2016-12-08 37 views
1

我正在寻找一个更小的Javascript“编辑器”来使用我的web项目。我发现https://github.com/summernote/summernote/,它看起来不错,似乎有一定的承诺。如何检索Summernote的内容?

我尝试使用它通过创建以下代码:

<!DOCTYPE> 
<html lang="en"> 

<head> 
    <!-- include libraries(jQuery, bootstrap) --> 
    <script type="text/javascript"  src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" /> 
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script> 

    <!-- include summernote css/js--> 
    <link href="assets/plugins/summernote-master/summernote.css" rel="stylesheet"> 
    <script src="assets/plugins/summernote-master/summernote.js"></script> 
</head> 
<body> 
<div id="summernote">Hello Summernote</div> 
<button onclick="getCode();return false;">Get the code!</button> 
<script> 
    function getCode() 
    { 
     var html = $("#summernote").summernote("code"); 
     console.log(html); 
    } 

    $(document).ready(function() { 
     $("#summernote").summernote(); 
    }); 
</script> 
</body> 
</html> 

根据文档的一切,你需要使用的是.summernote("code")收集文本编辑器窗口中的内容。但是我CONSOLE.LOG结果:

Object { length: 1, context: HTMLDocument → info.php, selector: "#summernote", 1 more… } info.php:21:9 

有没有人有这个编辑器,可以帮助我明白我需要做不同的体验呢?我的目标是按照我可以发布到我的应用程序的方式收集用户创建的窗口内容。

谢谢你的想法!

回答

0

将您的HTML更改为以下。

<div class="summernote" id="summernote">Hello Summernote</div> 

获取代码!

和脚本

<script> 

$(document).ready(function() { 
    $(".summernote").summernote(); 
}); 

function getCode() 
{ 
    var html = $("#summernote").summernote("code"); 
    console.log(html); 
} 
</script> 
+0

这是完全相同的什么的问题,你只要以后再定义的功能,我不知道怎么说是有帮助的。 – MMAdams

+0

HTML呈现不正确。编辑。现在检查。代码已经过测试并且工作正常。 – Vamshi