重点：当在页面插入文本编辑器后。无法用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']],
  ]
});

预设參数

类型 buttonid 方法
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'
  });
});

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

  1. 10个免费的javascript富文本编辑器（jQuery and non-jQuery）

    祝愿园子里的朋友圣诞节快乐. 本文介绍了10个免费易用富文本编辑器(rich text editors,RTE),其中5个是Jquery插件,另外5个是非Jquery富文本编辑器 简介 Javascr ...

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

    转自:http://www.cnblogs.com/lingyuan/archive/2010/11/15/1877447.html 基于WEB的HTML 编辑器,WYSIWYG所见即所得的编辑器,或 ...

  3. 基于ABP做一个简单的系统——实战篇：4.基于富文本编辑器，Razor模板引擎生成内容并导出Word 填坑记录

    起因 需求是这样的,有一种协议需要生成,协议的模板是可配置的,在生成过程中,模板中的内容可以根据约定的标记进行替换(就像mvc的razor模板一样).生成后的内容还需要导出成word或pdf. 常见的 ...

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

    vue-quill-editor的guthub地址,现在市面上有很多的富文本编辑器,我个人还是非常推荐Vue自己家的vue-quill-deitor,虽然说只支持IE10+,但这种问题,帅给别人吧! ...

  5. 基于jeesite的cms系统（五）：wangEditor富文本编辑器

    一.关于wangEditor: wangEditor —— 轻量级 web 富文本编辑器,配置方便,使用简单.支持 IE10+ 浏览器. 官网:www.wangEditor.com 文档:www.ka ...

  6. web开发实战--弹出式富文本编辑器的实现思路和踩过的坑

    前言: 和弟弟合作, 一起整了个智慧屋的小web站点, 里面包含了很多经典的智力和推理题. 其实该站点从技术层面来分析的话, 也算一个信息发布站点. 因此在该网站的后台运营中, 富文本的编辑器显得尤为 ...

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

    1. 引言 wangEditor——一款轻量级html富文本编辑器(开源软件) 网站:http://www.wangeditor.com/ demo演示:http://www.wangeditor.c ...

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

    提示:最新版wangEditor请参见:wangEditor.github.io 或者 https://github.com/wangfupeng1988/wangEditor 1. 前言 (下载源码 ...

  9. 我为什么要做富文本编辑器【wangEditor5个月总结】

    请访问wangEditor官网:www.wangEditor.com ----------------------------------------------------------------- ...

随机推荐

  1. 动态符号链接的细节 与 linux程序的加载过程

    转: http://hi.baidu.com/clivestudio/item/4341015363058d3d32e0a952 值得玩味的一篇分析程序链接.装载.动态链接细节的好文档 导读: by ...

  2. linux内核分析之缺页中断【转】

    转自:http://blog.csdn.net/bullbat/article/details/7108402 linux缺页异常程序必须能够区分由编程引起的异常以及由引用属于进程地址空间但还尚未分配 ...

  3. python接口自动化10-token登录【转载】

    本篇转自博客:上海-悠悠 原文地址:http://www.cnblogs.com/yoyoketang/tag/python%E6%8E%A5%E5%8F%A3%E8%87%AA%E5%8A%A8%E ...

  4. hdu 5063(思路题-反向操作数组)

    Operation the Sequence Time Limit: 3000/1500 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/O ...

  5. Codeforces Round #445 D. Restoration of string【字符串】

    D. Restoration of string time limit per test 2 seconds memory limit per test 256 megabytes input sta ...

  6. HDU 6270 Marriage （2017 CCPC 杭州赛区 G题，生成函数 + 容斥 + 分治NTT）

    题目链接  2017 CCPC Hangzhou Problem G 题意描述很清晰. 考虑每个家庭有且仅有$k$对近亲的方案数: $C(a, k) * C(b, k) * k!$ 那么如果在第$1$ ...

  7. 动态读取cron表达式

    项目中在使用任务调度时往往会用到cron表达式,比如每五分钟执行一次,每天12点执行一次,每周四凌晨1点执行一次等.但是如果将cron表达式写死,往往不利于测试.解决方案:我们可以将cron表达式写入 ...

  8. 探究堆喷射（heap spray）

    博客园的自动保存系统真心不咋地,写的差不多的文章蓝屏之后就没有了,醉了! 浏览器是互联网世界最主要的软件之一,从IE6到IE11安全攻防在不断升级,防御措施的实施促使堆喷射技巧不断变化.写这篇博文想好 ...

  9. How to show only next line after the matched one?

    awk '/blah/{getline; print}' logfile

  10. [POJ 1935] Journey

    Link: POJ1935 传送门 Solution: 一道吓唬人的水题 注意这是一棵树,两点间仅有唯一的路径! 于是每个“关键点”和起点只有一条路径,想去起点另一棵子树上的节点必须要回到起点 如果必 ...