基于bootstrsp的jquery富文本编辑器的手册说明

重点：当在页面插入文本编辑器后，无法用js/jq的方式去将某些值写入到文本编辑器，如：$("textarea").val("111");$("textarea").text("111");。。。

Summernote提供了指定的方式：$("textarea").Summernote().code(‘111‘);这是赋值，取值也可这样：$("textarea").Summernote().code();

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‘

  });

});

版权声明：本文为博主原创文章，未经博主允许不得转载。

时间： 2024-07-28 13:29:56

基于bootstrsp的jquery富文本编辑器的手册说明的相关文章

textEditorDemo：基于swift的一个富文本编辑器

TextEditorDemo swift:textEditorDemo一个简单的富文本编辑器 一个简单的富文本编辑器 (IPhone 5s Xcode 6.3 swift 1.2) 实现并解决了一些基本功能: 更改字体大小,粗体,下划线,斜体字.并进行了数据的存储 更多请查看网友StringX的文章:http://www.jianshu.com/p/ab5326850e74/comments/327660#comment-327660 在TextView中添加照片,以及照片存储 实现键盘隐藏和弹

推荐四款在线富文本编辑器

1.UMeditor : jQuery富文本编辑器 UMeditor,简称UM,是为满足广大门户网站对于简单发帖框,或者回复框需求所定制的在线富文本编辑器. UM的主要特点就是容量和加载速度上的改变,主文件的代码量为139k,而且放弃了使用传统的iframe模式,采用了div的加载方式, 以达到更快的加载速度和零加载失败率. 查看链接:http://www.leyideng.com/pages/2015-07/215.html 2.jQuery HTML编辑器 这是一个简单的所见即所得的HTML

N个富文本编辑器/基于Web的HTML编辑器

转自:http://www.cnblogs.com/lingyuan/archive/2010/11/15/1877447.html 基于WEB的HTML 编辑器,WYSIWYG所见即所得的编辑器,或是一个富文本的编辑器,是我们在开发WEB应用时接收用户输入时必需要考虑的问题.下面是一些开源的WEB在线的WYSWIG编辑器. 1.FCKeditorFCKeditor 这些在线编辑器中最著名的一个,其功能相当的强大,很像一个Web的Word软件.它可以方便地和ASP, ASP.NET, PHP,

Vue基于vue-quill-editor富文本编辑器

1.Vue基于vue-quill-editor富文本编辑器使用心得:https://www.cnblogs.com/ZaraNet/p/10209226.html 2.使用vue-quill-editor,获得到输入内容的html,怎样才能在外部的div中有跟编辑器里: 用v-html绑定一下就行了,加上class="ql-editor"的话,样式就和富文本录入的一样了,建议自己写样式,美观一点. 原文地址:https://www.cnblogs.com/zhengzemin/p/vu

Vue基于vue-quill-editor富文本编辑器使用心得

vue-quill-editor的guthub地址,现在市面上有很多的富文本编辑器,我个人还是非常推荐Vue自己家的vue-quill-deitor,虽然说只支持IE10+,但这种问题,帅给别人吧! 那么我们直击正题,在vue中使用quill呢,我们需要npm进行安装,安装命令如下: npm install vue-quill-editor 再安装依赖项 npm install quill 使用: 在main.js中进行引入 import Vue from 'vue' import VueQui

详解Vue基于vue-quill-editor富文本编辑器使用心得

vue-quill-editor的guthub地址,现在市面上有很多的富文本编辑器,我个人还是非常推荐Vue自己家的vue-quill-deitor,虽然说只支持IE10+,但这种问题,帅给别人吧! 那么我们直击正题,在vue中使用quill呢,我们需要npm进行安装,安装命令如下: ? 1 npm install vue-quill-editor 再安装依赖项 ? 1 npm install quill 使用: 在main.js中进行引入 ? 1 2 3 4 5 6 7 import Vue

轻量级富文本编辑器wangEditor源码结构介绍

1. 引言 wangEditor——一款轻量级html富文本编辑器(开源软件) 网站:http://www.wangeditor.com/ demo演示:http://www.wangeditor.com/wangEditor/demo.html 下载(github):https://github.com/wangfupeng1988/wangEditor QQ群:164999061 从我发布wangEditor到现在,大概有七八个月了,随着近期增加的插入视频,表情,地图这三个功能,目前为止基本

重构wangEditor（web富文本编辑器），欢迎指正！

1. 前言 (下载源码.使用说明.demo,请参见:https://github.com/wangfupeng1988/wangEditor) 前段时间做过一个基于bootstrap的富文本编辑器--wangEditor,并发布到github上(https://github.com/wangfupeng1988/wangEditor),在博客园写了篇文章(http://www.cnblogs.com/wangfupeng1988/p/4088229.html)也受到了不少关注. 之所以有这次重构

如何做一个富文本编辑器

很久以前就想做一个富文本编辑器,但是感觉比较难,一直没有实现.直到了解了html5的contenteditable属性可以设置一个div为可编辑状态,利用这个特性做富文本编辑器就比较简单了 首先 认识一下 contenteditable 它是一个属性 可以这样使一个DIV的编辑状态被激活 <div contenteditable="true"></div> 然后这个div就可以被编辑了 而我们要想获得它的html源码可以使用innerHTML来取得 举个例子如下