富文本编辑器summernote的基本使用

凡客丶

已于 2022-12-12 10:58:15 修改

阅读量3.5k

点赞数

分类专栏： js 文章标签： java

于 2022-12-11 15:10:08 首次发布

本文链接：https://blog.csdn.net/qq_27480007/article/details/128274874

版权

js 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

summernote比较突出的优点就是能保持复制过来的东西的原有样式，并且比较流畅。

官网地址
 中文文档
 源码下载地址
Summernote依赖于jquery和bootstrap3/4 所以用时记得引入这俩依赖
引入方法

<!-- include libraries(jQuery, bootstrap) -->
<!-- 插件引入 -->
        <link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote.css" rel="stylesheet">
        <script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote.js"></script>
        <!--引入中文JS包-->
        <script src="https://cdn.bootcss.com/summernote/0.8.10/lang/summernote-zh-CN.js"></script>  //因为这个插件是国外的写的，一定要引入这个中文包，不然编辑器是默认的英文
HTML

简单的例子：
HTML

	<!--方法一-->
    <div id="summernote"></div>   //内容载体
	
	<!--方法二-->
<body>
    <div id="summernote" style="width:100px;height:100px;"><p>Hello Summernote</p></div>
  <script>
    $(document).ready(function() {
        $('#summernote').summernote();
    });
  </script>
</body>

js

//        编辑器功能=====================================
         $("#summernote").summernote({
             lang : 'zh-CN',// 语言
            height : , // 高度
            minHeight : , // 最小高度
            placeholder : '请输入文章内容', // 提示
            // summernote自定义配置
            toolbar: [
              ['operate', ['undo','redo']],
              ['magic',['style']],
              ['style', ['bold', 'italic', 'underline', 'clear']],
              ['para', ['height','fontsize','ul', 'ol', 'paragraph']],
              ['font', ['strikethrough', 'superscript', 'subscript']],
              ['color', ['color']],
              ['insert',['picture','video','link','table','hr']],
              ['layout',['fullscreen','codeview']],
            ],
            callbacks : { // 回调函数
                // 上传图片时使用的回调函数   因为我们input选择的本地图片是二进制图片，需要把二进制图片上传服务器，服务器再返回图片url，就需要用到callback这个回调函数
                onImageUpload : function(files) {
                    var form=new FormData();
                        form.append('myFileName',files[])  //myFileName 是上传的参数名，一定不能写错
                    $.ajax({
                        type:"post",
                        url:"${path}/Img/upload", //上传服务器地址
                        dataType:'json',
                        data:form,
                        processData : false,
                           contentType : false,
                           cache : false,
                           success:function(data){
                            console.log(data.data)
                              $('#summernote').summernote('editor.insertImage',data.data);
                           }
                    })
                }
            }
        });

注意：

$('#summernote').summernote('insertImage', url, filename); 
官方文档提供的图片插入封装函数，在本地环境下服务器返回的url并不能展示在编辑框内，所以不要怀疑这个函数的作用，当你放到生产环境的时候自然会展示在编辑框内，这个问题我花了一个下午才证明，希望不要再踩坑

summernote取值和赋值

取值：
$('#summernote').summernote('code')

赋值：
$('#summernote').summernote('code', this.richContent)

判断内容是否为空：
var isEmpty = $("#user-work-content").summernote('isEmpty');

今天想做个富文本编辑器器的字数提示功能

var text=$('#summernote').summernote('code');
拿到的值，里面带p标签，还有空格，换行标签什么的，很难统计出富文本的实际文本的长度，于是查了一篇文章

summernote文本编辑器使用（含概要内容提取）
这篇文章，提供了如何将原始文本，转化成干净的文本（不含各种标签，空格符什么的），下面单独将这块代码沾出来

function getNoMarkupStr(markupStr) {
         /* markupStr 源码</> */
         //console.log(markupStr);
         var noMarkupStr=$("<div>").html(markupStr).text();/* 得到可视文本(不含图片),将&nbsp;&lt;&gt;转为空字符串和<和>显示,同时去掉了换行,文本单行显示 */
         //console.log("1--S" + noMarkupStr + "E--");
         noMarkupStr=noMarkupStr.replace(/(\r\n|\n|\r)/gm,"");/* 去掉可视文本中的换行,(没有用,上一步已经自动处理) */
         //console.log("2--S" + noMarkupStr + "E--");
         noMarkupStr=noMarkupStr.replace(/^\s+/g,"");/* 替换开始位置一个或多个空格为一个空字符串 */
         //console.log("3--S" + noMarkupStr + "E--");
         noMarkupStr=noMarkupStr.replace(/\s+$/g,"");/* 替换结束位置一个或多个空格为一个空字符串 */
         //console.log("4--S" + noMarkupStr + "E--");
         noMarkupStr=noMarkupStr.replace(/\s+/g," ");/* 替换中间位置一个或多个空格为一个空格 */
         //console.log("5--S" + noMarkupStr + "E--");
         return noMarkupStr;
}

将获取到的原始文本，传入，然后返回的就是干净的文本，于是就好统计实际文本的长度了

使用summernote
1.summernote使用的js代码

var preview = function(params){
        layer.open({
            title:"预览",
            content: $(".note-editable").html(),
            area: ['900px', '500px'],
        });
    }
    var previewCallback = function(params){
        //console.info(params);
    }
    var previewButton = function (context) {
        var ui = $.summernote.ui;
        // create button
        var button = ui.button({
            contents: '<i class="fa fa-search"/>',  //按钮样式
            tooltip: '预览',
            click: function (params) {
                preview(params);// 这里是我自己的点出时触发的事件
            },
            callback:function(params){
                previewCallback(params);// 这里的回调函数会在加载页面的时候直接执行
            }
        });
        return button.render();//按钮渲染
    }
    $('.summernote').summernote({
        fontNames: ['Arial', 'Arial Black', 'Comic Sans MS', 'Courier New', 'Georgia', 'Georgia2', 'Merriweather'],
        fontNamesIgnoreCheck:['Georgia'],
        height : 400,
        lang : 'zh-CN',
        callbacks: {
            onImageUpload: function (files) {
                sendFile(files[0], this);
            }
        },
        toolbar: [
            ['style', ['style']],
            ['font', ['bold', 'italic', 'underline', 'clear', 'strikethrough', 'subscript', 'superscript']],
            ['fontsize',['fontsize']],
            ['fontname', ['fontname']],
            ['color', ['color']],
            ['para', ['ul', 'ol', 'paragraph']],
            ['height', ['height']],
            ['insert', ['table', 'link', 'picture', 'video', 'hr']],
            ['view', ['fullscreen', 'codeview', 'help', 'preview']],
        ],
        buttons: {
            preview: previewButton//自已定义的按钮函数
        },
    });

    $('.note-editable').css('font-family','Georgia2');

2.上传文件js代码

//上传文件
function sendFile(file, obj) {
    var data = new FormData();
    var ctx = [[@{/}]] + "summernote/content";
    data.append("file", file);
    $.ajax({
        type: "POST",
        url: ctx + "/file/upload",
        data: data,
        cache: false,
        contentType: false,
        processData: false,
        dataType: 'json',
        success: function(result) {
            if (result.code == web_status.SUCCESS) {
                $(obj).summernote('editor.insertImage', result.fileName, result.fileName);
            } else {
                $.modal.alertError(result.msg);
            }
        },
        error: function(error) {
            $.modal.alertWarning("图片上传失败。");
        }
    });
}

3.获取富文本编辑器里的值

var markupHTML = $('.summernote').summernote('code');

凡客丶

关注

0
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
富文本编辑器summernote的基本使用

这篇文章，提供了如何将原始文本，转化成干净的文本（不含各种标签，空格符什么的），下面单独将这块代码沾出来。summernote比较突出的优点就是能保持复制过来的东西的原有样式，并且比较流畅。将获取到的原始文本，传入，然后返回的就是干净的文本，于是就好统计实际文本的长度了。summernote取值和赋值。
复制链接

扫一扫

专栏目录