浙江 杭州

基于Bootstrap3所见即所得的jQuery文本编辑器插件

系统分类: 网页特效 - jquery插件 - jQuery表单及相关 2017-02-09

人气30192

亲们该页面内会员们分享的“作品”,版权为才华横溢的原作者们所有滴,不得商业使用!


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");
        }
    }
});                
              

可用的事件有:

  • 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:当用户通过富文本命令来格式化后触发。

关于该文本编辑器插件更多的信息可以参考:https://github.com/bootstrap-wysiwyg/bootstrap3-wysiwyg

查看演示
下载资源:4
下载资源
错误提交:

格式:zip 大小:937.73KB

================关于优设记================
“优设记ui3g.com“是国内最全jquery插件下载 - 高质量网页素材的学习下载平台
资源微博:同步网站更新内容,订阅jquery资源 @吐槽优设记,欢迎关注获取网页设计资源、下载顶尖设计素材。
文章链接: http://www.ui3g.com/code/uicode-1618.html 非特殊说明,本文版权归原作者所有,转载请注明出处
基于Bootstrap3所见即所得的jQuery文本编辑器插件

我当前G币余额:0 已下载次数:4

注:点击右侧分享按钮并且留下评论自动+10G币

所需G币:20

下载提示:由于文件较小,请直接点击下载,不支持迅雷等下载工具。

抱歉 G币 不足,你可以通过 上传PSD & jquery 充值 获得G币

评论功能关闭...(已有0 评论)