简要教程
bootstrap3-wysiwyg是一款简单实用的基于Bootstrap3所见即所得的jQuery文本编辑器插件。该文本编辑器使用简单,支持多国语言,适用于需要简单文本编辑的场合。
查看演示 下载插件
使用方法
使用该文本编辑器插件需要引入jQuery、Bootstrap3相关文件以及bootstrap3-wysihtml5.min.css和bootstrap3-wysihtml5.all.min.js文件。
<link rel="stylesheet" type="text/css" href="bootstrap-3.3.5/css/bootstrap.min.css"></link> <link rel="stylesheet" type="text/css" href="bootstrap-3.3.5/css/bootstrap-theme.min.css"></link> <link rel="stylesheet" type="text/css" href="dist/bootstrap3-wysihtml5.min.css"></link> <script src="js/jquery.min.js"></script> <script src="bootstrap-3.3.5/js/bootstrap.min.js"></script> <script src="dist/bootstrap3-wysihtml5.all.min.js"></script>
HTML结构
你可以使用一个<textarea>元素来作为该文本编辑器的容器。
<textarea id="some-textarea" placeholder="Enter text ..." style="styles to copy to the iframe"> </textarea>
初始化插件
在页面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": <buttonsize> //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"); } } });
可用的事件有:
来源:jQuery之家