超好用的富文本编辑器Summernote的使用

2023-01-16 07:23:55

官网地址

中文文档

源码下载地址

Summernote依赖于jquery和bootstrap3/4   所以用时记得引入这俩依赖

奉上引入方法（官网说的很清楚，api也很详细）：

<!-- include libraries(jQuery, bootstrap) -->

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>

<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script> 

<!-- include summernote css/js -->

<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote.css" rel="stylesheet">

<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote.js"></script>

简单的例子：

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>summernote</title>

    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">

  <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>

  <script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>

  <link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote.css" rel="stylesheet">

  <script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote.js"></script>

</head>

<body>

    <div id="summernote" style="width:100px;height:100px;"><p>Hello Summernote</p></div>

  <script>

    $(document).ready(function() {

        $('#summernote').summernote();

    });

  </script>

</body>

</html>

vue中如何使用

牛逼人物的使用笔记（里面有上传图片和视频的方法）

需要安装的依赖包：

"bootstrap": "^4.1.1",

"font-awesome": "^4.7.0",

"jquery": "^3.3.1",

"codemirror": "^5.37.0",

"summernote": "^0.8.10",

在main.js中引入

import 'bootstrap/dist/js/bootstrap.bundle.min'

import 'bootstrap/dist/css/bootstrap.css'

import 'font-awesome/css/font-awesome.css'

import 'summernote'

import 'summernote/dist/lang/summernote-zh-CN'

import 'summernote/dist/summernote.css'

view

<div id="summernote" v-model="richContent"></div>

mounted中

        $('#summernote').summernote({

            lang: 'zh-CN',//语言

            placeholder: '请输入内容',//提示语

            height: 300,//高度

            width: 'auto',//宽度  也可以指定固定宽度  比如600

            htmlMode: true,

            toolbar: [//工具栏配置

                ['style', ['bold', 'italic', 'underline', 'clear']],

                ['fontsize', ['fontsize']],

                ['fontname', ['fontname']],

                ['color', ['color']],

                ['para', ['ul', 'ol', 'paragraph']],

                ['insert', ['link', 'picture']],

                ['mybutton', ['myVideo']]

            ],

            fontSizes: ['8', '9', '10', '11', '12', '14', '18', '24', '36'],//字体大小配置

            fontNames: [//字体类型配置

                'Arial', 'Arial Black', 'Comic Sans MS', 'Courier New',

                'Helvetica Neue', 'Helvetica', 'Impact', 'Lucida Grande',

                'Tahoma', 'Times New Roman', 'Verdana','宋体','微软雅黑','楷体','黑体','隶书'
            ],

            buttons: {

                myVideo: myVideoBtn

            },

            callbacks: {//回调函数

                onSubmit: function() {

                    vm.richContent = $('#summernote').summernote('code')

                }

            }

        });

summernote取值和赋值

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

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

把附录也偷过来。。。

默认配置项概览：

options: {

  modules: {

    'editor': Editor,

    'clipboard': Clipboard,

    'dropzone': Dropzone,

    'codeview': Codeview,

    'statusbar': Statusbar,

    'fullscreen': Fullscreen,

    'handle': Handle,

    // FIXME: HintPopover must be front of autolink

    //  - Script error about range when Enter key is pressed on hint popover

    'hintPopover': HintPopover,

    'autoLink': AutoLink,

    'autoSync': AutoSync,

    'placeholder': Placeholder,

    'buttons': Buttons,

    'toolbar': Toolbar,

    'linkDialog': LinkDialog,

    'linkPopover': LinkPopover,

    'imageDialog': ImageDialog,

    'imagePopover': ImagePopover,

    'videoDialog': VideoDialog,

    'helpDialog': HelpDialog,

    'airPopover': AirPopover

  },

  buttons: {},

  lang: 'zh-CN',

  // toolbar工具栏默认

  toolbar: [

    ['style', ['style']],

    ['font', ['bold', 'underline', 'clear']],

    ['fontname', ['fontname']],
      ['font',['strikethrough','superscript','subscript']],//加脚标功能
    ['color', ['color']],

    ['para', ['ul', 'ol', 'paragraph']],

    ['table', ['table']],

    ['insert', ['link', 'picture', 'video']],

    ['view', ['fullscreen', 'codeview', 'help']]

  ],

  // popover

  popover: {

    image: [

      ['imagesize', ['imageSize100', 'imageSize50', 'imageSize25']],

      ['float', ['floatLeft', 'floatRight', 'floatNone']],

      ['remove', ['removeMedia']]

    ],

    link: [

      ['link', ['linkDialogShow', 'unlink']]

    ],

    air: [

      ['color', ['color']],

      ['font', ['bold', 'underline', 'clear']],

      ['para', ['ul', 'paragraph']],

      ['table', ['table']],

      ['insert', ['link', 'picture']]

    ]

  },

  // air mode: inline editor

  airMode: false,

  width: null,

  height: null,

  focus: false,

  tabSize: 4,

  styleWithSpan: false,

  shortcuts: true,

  textareaAutoSync: true,

  direction: null,

  styleTags: ['p', 'blockquote', 'pre', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'],

  fontNames: [

    'Arial', 'Arial Black', 'Comic Sans MS', 'Courier New',

    'Helvetica Neue', 'Helvetica', 'Impact', 'Lucida Grande',

    'Tahoma', 'Times New Roman', 'Verdana'

  ],

  fontSizes: ['8', '9', '10', '11', '12', '14', '18', '24', '36'],

  // pallete colors(n x n)

  colors: [

    ['#000000', '#424242', '#636363', '#9C9C94', '#CEC6CE', '#EFEFEF', '#F7F7F7', '#FFFFFF'],

    ['#FF0000', '#FF9C00', '#FFFF00', '#00FF00', '#00FFFF', '#0000FF', '#9C00FF', '#FF00FF'],

    ['#F7C6CE', '#FFE7CE', '#FFEFC6', '#D6EFD6', '#CEDEE7', '#CEE7F7', '#D6D6E7', '#E7D6DE'],

    ['#E79C9C', '#FFC69C', '#FFE79C', '#B5D6A5', '#A5C6CE', '#9CC6EF', '#B5A5D6', '#D6A5BD'],

    ['#E76363', '#F7AD6B', '#FFD663', '#94BD7B', '#73A5AD', '#6BADDE', '#8C7BC6', '#C67BA5'],

    ['#CE0000', '#E79439', '#EFC631', '#6BA54A', '#4A7B8C', '#3984C6', '#634AA5', '#A54A7B'],

    ['#9C0000', '#B56308', '#BD9400', '#397B21', '#104A5A', '#085294', '#311873', '#731842'],

    ['#630000', '#7B3900', '#846300', '#295218', '#083139', '#003163', '#21104A', '#4A1031']

  ],

  lineHeights: ['1.0', '1.2', '1.4', '1.5', '1.6', '1.8', '2.0', '3.0'],

  tableClassName: 'table table-bordered',

  insertTableMaxSize: {

    col: 10,

    row: 10

  },

  dialogsInBody: false,

  dialogsFade: false,

  maximumImageFileSize: null,

  callbacks: {

    onInit: null,//初始化回调函数

    onFocus: null,//聚集

    onBlur: null,//失去焦点

    onEnter: null,//回车键的回调函数

    onKeyup: null,

    onKeydown: null,

    onSubmit: null,//提交时回调函数

    onImageUpload: null,//这就是上传图片的回调函数

    onImageUploadError: null//上传图片出错

  },

  codemirror: {

    mode: 'text/html',

    htmlMode: true,

    lineNumbers: true

  },

  keyMap: {

    pc: {

      'ENTER': 'insertParagraph',

      'CTRL+Z': 'undo',

      'CTRL+Y': 'redo',

      'TAB': 'tab',

      'SHIFT+TAB': 'untab',

      'CTRL+B': 'bold',

      'CTRL+I': 'italic',

      'CTRL+U': 'underline',

      'CTRL+SHIFT+S': 'strikethrough',

      'CTRL+BACKSLASH': 'removeFormat',

      'CTRL+SHIFT+L': 'justifyLeft',

      'CTRL+SHIFT+E': 'justifyCenter',

      'CTRL+SHIFT+R': 'justifyRight',

      'CTRL+SHIFT+J': 'justifyFull',

      'CTRL+SHIFT+NUM7': 'insertUnorderedList',

      'CTRL+SHIFT+NUM8': 'insertOrderedList',

      'CTRL+LEFTBRACKET': 'outdent',

      'CTRL+RIGHTBRACKET': 'indent',

      'CTRL+NUM0': 'formatPara',

      'CTRL+NUM1': 'formatH1',

      'CTRL+NUM2': 'formatH2',

      'CTRL+NUM3': 'formatH3',

      'CTRL+NUM4': 'formatH4',

      'CTRL+NUM5': 'formatH5',

      'CTRL+NUM6': 'formatH6',

      'CTRL+ENTER': 'insertHorizontalRule',

      'CTRL+K': 'linkDialog.show'

    },

    mac: {

      'ENTER': 'insertParagraph',

      'CMD+Z': 'undo',

      'CMD+SHIFT+Z': 'redo',

      'TAB': 'tab',

      'SHIFT+TAB': 'untab',

      'CMD+B': 'bold',

      'CMD+I': 'italic',

      'CMD+U': 'underline',

      'CMD+SHIFT+S': 'strikethrough',

      'CMD+BACKSLASH': 'removeFormat',

      'CMD+SHIFT+L': 'justifyLeft',

      'CMD+SHIFT+E': 'justifyCenter',

      'CMD+SHIFT+R': 'justifyRight',

      'CMD+SHIFT+J': 'justifyFull',

      'CMD+SHIFT+NUM7': 'insertUnorderedList',

      'CMD+SHIFT+NUM8': 'insertOrderedList',

      'CMD+LEFTBRACKET': 'outdent',

      'CMD+RIGHTBRACKET': 'indent',

      'CMD+NUM0': 'formatPara',

      'CMD+NUM1': 'formatH1',

      'CMD+NUM2': 'formatH2',

      'CMD+NUM3': 'formatH3',

      'CMD+NUM4': 'formatH4',

      'CMD+NUM5': 'formatH5',

      'CMD+NUM6': 'formatH6',

      'CMD+ENTER': 'insertHorizontalRule',

      'CMD+K': 'linkDialog.show'

    }

  },

  icons: {

    'align': 'icon-align',

    'alignCenter': 'icon-align-center',

    'alignJustify': 'icon-align-justify',

    'alignLeft': 'icon-align-left',

    'alignRight': 'icon-align-right',

    'indent': 'icon-indent-right',

    'outdent': 'icon-indent-left',

    'arrowsAlt': 'icon-resize-full',

    'bold': 'icon-bold',

    'caret': 'icon-caret-down',

    'circle': 'icon-circle',

    'close': 'icon-close',

    'code': 'icon-code',

    'eraser': 'icon-eraser',

    'font': 'icon-font',

    'frame': 'icon-frame',

    'italic': 'icon-italic',

    'link': 'icon-link',

    'unlink': 'icon-chain-broken',

    'magic': 'icon-magic',

    'menuCheck': 'icon-check',

    'minus': 'icon-minus',

    'orderedlist': 'icon-list-ol',

    'pencil': 'icon-pencil',

    'picture': 'icon-picture',

    'question': 'icon-question',

    'redo': 'icon-redo',

    'square': 'icon-square',

    'strikethrough': 'icon-strikethrough',

    'subscript': 'icon-subscript',

    'superscript': 'icon-superscript',

    'table': 'icon-table',

    'textHeight': 'icon-text-height',

    'trash': 'icon-trash',

    'underline': 'icon-underline',

    'undo': 'icon-undo',

    'unorderedlist': 'icon-list-ul',

    'video': 'icon-facetime-video'

  }

}

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

但是我用

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;

            }

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

上一篇：makefile--subst


下一篇：整合SpringDataJPA