Summernote文本编辑器正确展示在html中

最新推荐文章于 2024-02-27 16:10:12 发布

qq_31636205

最新推荐文章于 2024-02-27 16:10:12 发布

阅读量303

点赞数

文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/qq_31636205/article/details/129060631

版权

文章介绍了如何使用Summernote，一个简洁美观的富文本编辑器。关键步骤包括导入必要的CSS和JS文件，设置语言选项，以及创建编辑器实例。此外，还提到了图片上传的回调函数示例和检查编辑器内容是否为空的方法。

摘要由CSDN通过智能技术生成

summernote是一个界面比较简洁美观的富文本编辑器
文件导入（官方下载地址：http://summernote.org/）

下载回来的文件夹是这样的：
在这里插入图片描述
插件的核心文件放在 dist 这个文件夹里面，文件夹内有三个起着重要作用的文件

font文件夹：将它放在你项目的css 文件的文件夹内否则会加载不出富文本编辑器上面的功能图标

另外还有一个语言的文件需要我们导入一下：
在这里插入图片描述

这个文件夹里面有18个国家的语言文件其中 zh-CN 就是中文的语言文件

总结下来我们需要的文件是：（注意一点font文件夹，将它放在你项目的css 文件的文件夹内否则会加载不出富文本编辑器上面的功能图标）
在这里插入图片描述
前端代码实例(使用Summernote富文本编辑器需要创建一个summernote实例)：

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <title>Summernote</title>
   <link rel="stylesheet" href="css/bootstrap.css"  rel="stylesheet">
   <script src="js/jquery.min.js"></script>
   <script src="js/bootstrap.js"></script>
   <link href="css/summernote.css" rel="stylesheet">
   <script src="js/summernote.js"></script>
   <script type="text/javascript" src="js/summernote-zh-CN.js" ></script>
 </head>
 <body>
     <div style="margin-left: 20%;width: 500px;height: 200px;">
        <div id="summernote"></div>
     </div>
     <br /><br /><br /><br /><br /><br /><br /><br /><br />
     <div style="margin-left: 20%;width: 800px;height: 400px;">
        <button id="btn1">显示书写的内容</button><br /><br />
        <div id="html" style="width: 800px;height: 300px;background-color: lavender;border: 1px solid;"></div>
     </div>
   <script>
     $(document).ready(function() {
         //jquery创建一个summernote实例
         $('#summernote').summernote({
              //功能图标改为中文
              lang: 'zh-CN',
              //预设内容
              placeholder: '请在此输入内容...',
              height: 300,
              width:800,
              //回调函数
              callbacks: {
                    //初始化
                   onInit: function() {
                       //init
                   },
                   //焦点
                   onFocus: function() {
                       //focus
                   },
                   //图片文件上传
                   onImageUpload: function(files, editor, $editable) {
                       data = new FormData();
                       data.append("file", files[0]);
                     $.ajax({
                         data : data,
                         type : "POST",
                         url : "",
                         cache : false,
                         contentType : false,
                         processData : false,
                         dataType : "json",
                         success: function(data) {
                             //[服务器所在文件所在目录位置]一般为"http://119.23.216.181/RoboBlogs/Upload_File/default_show.png"
                             $('#summernote').summernote('insertImage', "[服务器所在文件所在目录位置]");
                         },
                         error:function(){
                             alert("上传失败");
                         }
                     });
                   }
                 }
 
         });
         $("button#btn1").click(function(){
              var tt=$("#summernote").summernote("code");
              $("div#html").html(tt);
              alert(tt);
         });
 
     });
   </script>
 </body>
 </html>

获取内容：

$("#user-work-content").summernote("code");

插入内容

$("#user-work-content").summernote("code",content);

判断内容是否为空：

var isEmpty = $("#user-work-content").summernote('isEmpty');

还是调用 summernote 的方法，不过这次的参数是 ‘isEmpty’ 这个字符串的参数，调用时会返回一个布尔值，通过这个布尔值可以判断编辑器内容是否为空，true表示空，false表示非空

qq_31636205

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Summernote文本编辑器正确展示在html中

Summernote文本编辑器入门
复制链接

扫一扫