html5bootstrap 文本编辑器,基于Bootstrap3所见即所得的jQuery文本编辑器插件
bootstrap3-wysiwyg是一款简单实用的基于Bootstrap3所见即所得的jQuery文本编辑器插件。该文本编辑器使用简单，支持多国语言，适用于需要简单文本编辑的场合。
使用方法
使用该文本编辑器插件需要引入jQuery、Bootstrap3相关文件以及bootstrap3-wysihtml5.min.css和bootstrap3-wysihtml5.all.min.js文件。
HTML结构
你可以使用一个元素来作为该文本编辑器的容器。
placeholder="Enter text ..."
style="styles to copy to the iframe">
初始化插件
在页面DOM元素初加载完毕之后可以通过wysihtml5()方法来初始化该文本编辑器插件。
$('#some-textarea').wysihtml5();
配置参数
可以在初始化的时候在wysihtml5()中插入一个参数对象来配置文本编辑器。
$('#some-textarea').wysihtml5({someOption: 23, ...})
按钮
要设置工具栏上的按钮可以使用下面的参数：
$('#some-textarea').wysihtml5({
toolbar: {
"font-styles": true, //Font styling, e.g. h1, h2, etc. Default true
"emphasis": true, //Italics, bold, etc. Default true
"lists": true, //(Un)ordered lists, e.g. Bullets, Numbers. Default true
"html": false, //Button which allows you to edit the generated HTML. Default false
"link": true, //Button to insert a link. Default true
"image": true, //Button to insert an image. Default true,
"color": false, //Button to change color of font
"blockquote": true, //Blockquote
"size": //default: none, other options are xs, sm, lg
}
});
Font Awesome字体图标
要在工具栏中使用Font Awesome字体图标，可以如下配置：
toolbar: {
"fa": true
}
自定义模板
要自定义工具栏的按钮模板，可以参考这里。
事件
Wysihtml5文本编辑器提供了一些可用的事件。事件的使用方法如下：
var editor = new wysihtml5.Editor("textarea-id");
// observe
function onChange() { alert("The content of the editor has changed"); };
function onLoad() { alert("Go!"); };
editor.on("change", onChange);
editor.on("load", onLoad);
// unobserve
editor.stopObserving("onChange", onChange);
editor.stopObserving("onLoad", onLoad);
或者：
$('#some-textarea').wysihtml5({
"events": {
"load": function() {
console.log("Loaded!");
},
"blur": function() {
console.log("Blured");
}
}
});
可用的事件有：
load：文本编辑器完全加载之后触发。
beforeload：仅用于内部使用。
focus：当文本编辑器获取焦点的时候触发。
focus:composer：当富文本视图获取焦点时触发。
focus:textarea：当source view获取焦点时触发。
blur：当文本编辑器失去焦点的时候触发。
blur:composer：当富文本视图失去焦点时触发。
blur:textarea：当source view失去焦点时触发。
change：当值改变时触发。
change:composer：当富文本视图中的值改变时触发。
change:textarea：当source view的值改变时触发。
paste：当用户粘贴或拖拽时触发。
paste:composer：当用户粘贴或拖拽到富文本区域时触发。
paste:textarea：当用户粘贴或拖拽到source view区域时触发。
newword:composer：当用户在富文本区域输入新的单词时触发。
destroy:composer：当富文本区域被移除时触发。
change_view：当在源文件视图和富文本视图之间切换时触发。
show:dialog：当工具栏显示时触发。
save:dialog：当工具栏对话框被点击的时候触发。
cancel:dialog：当工具栏对话框被取消的时候触发。
undo:composer：当用户调用undo操作时触发。
redo:composer：当用户调用redo操作时触发。
beforecommand:composer：当用户通过富文本命令来格式化前触发。
aftercommand:composer：当用户通过富文本命令来格式化后触发。