• 基于jquery的bootstrap在线文本编辑器插件Summernote 简单强大


    Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线编辑器。Summernote非常的轻量级,大小只有30KB,支持Safari,Chrome,Firefox、Opera、Internet Explorer 9 +(IE8支持即将到来)。

    特点:

    世界上最好的WYSIWYG在线编辑器

    极易安装

    开源

    自定义初化选项

    支持快捷键

    适用于各种后端程序言语

    使用方法

    使用html5文档

    1
    2
    3
    4
    <!DOCTYPE html>
    <html>
    ...
    </html>

    引入核心文件,Summernote需要几个JS库的支持,所以得先引入其它库

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <!-- include libries(jQuery, bootstrap, fontawesome) -->
    <script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css">
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.1/js/bootstrap.min.js"></script>
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
     
    <!-- include summernote css/js-->
    <link href="summernote.css" />
    <script src="summernote.min.js"></script>

    写入html,只需加入一个DIV元素,写上ID

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

    写入JS初始化插件

    1
    2
    3
    $(document).ready(function() {
            $('#summernote').summernote();
        });

    API

    初始化Summernote

    1
    $('.summernote').summernote();

    使用参数初始化

    设定高度与焦点

    1
    2
    3
    4
    5
    6
    7
    $('.summernote').summernote({
      height: 300,                 // set editor height
     
      minHeight: null,             // set minimum height of editor
      maxHeight: null,             // set maximum height of editor
     
      focus: true,                 // set focus to editable area after initializing summernote});

    设定高度后,如果内容高度超过设定高度将出现滚动条,如果没有设定高度则一直往下挣开。设定focus为true时,打开页面后焦点定位到编辑器中。

    自定义工具栏

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    $('.summernote').summernote({
      toolbar: [
        //[groupname, [button list]]
          
        ['style', ['bold''italic''underline''clear']],
        ['font', ['strikethrough']],
        ['fontsize', ['fontsize']],
        ['color', ['color']],
        ['para', ['ul''ol''paragraph']],
        ['height', ['height']],
      ]
    });

    预设参数

    类型按钮id方法
    Insert picture Insert a picture
    link Insert a hyperlink
    video Insert a video
    table Insert a table
    hr Insert a horizontal rule
    Style style Format selected block
    fontname Set font family
    fontsize Set font size
    color Set foreground and background color
    bold Toggle weight
    italic Toggle italic
    underline Toggle underline
    strikethrough Toggle strikethrough
    clear Clearing all styles
    Layout ul Make an un-ordered list
    ol Make an ordered list
    paragraph Set text alignment
    height Set height of text
    Misc fullscreen Toggle fullscreen editing mode
    codeview Toggle wysiwyg and html editing mode
    undo Undo
    redo Redo
    help Show help dialog

    极简模式Air-mode

    1
    2
    3
    4
    5
    6
    7
    8
    9
    $('.summernote').summernote({
      airPopover: [
        ['color', ['color']],
        ['font', ['bold''underline''clear']],
        ['para', ['ul''paragraph']],
        ['table', ['table']],
        ['insert', ['link''picture']]
      ]
    });

    释放Summernote

    1
    $('.summernote').destroy();

    取值与赋值

    1
    2
    3
    4
    5
    6
    //取值
    var sHTML = $('.summernote').code();
    //同一页面多个summernote时,取第二个的值
    var sHTML = $('.summernote').eq(1).code();
    //赋值
    $('.summernote').code(sHTML);

    事件

    oninit

    1
    2
    3
    4
    5
    $('#summernote').summernote({
      oninit: function() {
        console.log('Summernote is launched');
      }
    });

    onenter

    1
    2
    3
    4
    5
    $('#summernote').summernote({
      onenter: function(e) {
        console.log('Enter/Return key pressed');
      }
    });

    onfocus

    1
    2
    3
    4
    5
    $('#summernote').summernote({
      onfocus: function(e) {
        console.log('Editable area is focused');
      }
    });

    onblur

    1
    2
    3
    4
    5
    $('#summernote').summernote({
      onblur: function(e) {
        console.log('Editable area loses focus');
      }
    });

    onkeyup

    1
    2
    3
    4
    5
    $('#summernote').summernote({
      onkeyup: function(e) {
        console.log('Key is released:', e.keyCode);
      }
    });

    onkeydown

    1
    2
    3
    4
    5
    $('#summernote').summernote({
      onkeydown: function(e) {
        console.log('Key is pressed:', e.keyCode);
      }
    });

    onpaste

    1
    2
    3
    4
    5
    $('#summernote').summernote({
      onpaste: function(e) {
        console.log('Called event paste');
      }
    });

    onImageUpload

    可以重写图片上传句柄

    1
    2
    3
    4
    5
    $('#summernote').summernote({
      onImageUpload: function(files, editor, $editable) {
        console.log('image upload:', files, editor, $editable);
      }
    });

    onChange

    IE9-10: DOMCharacterDataModified, DOMSubtreeModified, DOMNodeInserted

    Chrome, FF: input

    1
    2
    3
    4
    5
    $('#summernote').summernote({
      onChange: function(contents, $editable) {
        console.log('onChange:', contents, $editable);
      }
    });

    支持18国语言,使用时引入你需要的语言文件,lang值设为你需要的语言

    1
    2
    3
    4
    5
    6
    7
    8
    <!-- include summernote-ko-KR -->
    <script src="lang/summernote-ko-KR.js"></script>
     
    $(document).ready(function() {
      $('#summernote').summernote({
        lang: 'ko-KR' // default: 'en-US'
      });
    });
  • 相关阅读:
    这些奇葩的排序算法,你没见过动画吧?
    五分钟学会一个高难度算法:希尔排序
    看完动画你还会不懂 快速排序么
    动画演示二叉树的前序遍历
    一款基于jQuery日历插件的开发过程
    图片全部加载完成之后再显示页面ui,公司项目里用上,自己写的几行代码
    转:SQL Server附加数据库提示“版本为661,无法打开,支持655版本……”
    Android基础-TextView(文本控件)
    Android基础-UI控件(整体简单介绍)
    Android基础-相对布局(电影页面为例)
  • 原文地址:https://www.cnblogs.com/laobiao/p/5510466.html
Copyright © 2020-2023  润新知