使用方法

首先,添加jQuery到页面位置:

Trumbowyg需要jQuery > = 1.7,因为它使用.on()一个新的函数出现在1.7版本。

在这之后,你必须加载Trumbowyg。

别忘了Trumbowyg CSS到,或负载编辑您自己的风格。

基础知识

这最少的代码将一个简单的div Trumbowyg到神奇的WYSIWYG编辑器。

$('#trumbowyg-demo').trumbowyg();

如果你想设置Trumbowyg选项,添加一个包含你的选择对象作为参数。

$('#trumbowyg-demo').trumbowyg({ 

   fullscreenable: false,  

   closable: true,  

  btns: ['bold', 'italic', '|', 'insertImage']

});

Trumbowyg 1.17,颜色插件用法，

$('#my-editor').trumbowyg({

     //设置中文

     lang: 'zh_cn',

     // closable: true,

     fixedBtnPane: true,

     //设置颜色插件

     btnsAdd: ['foreColor','backColor'],

     btnsDef: {

     // 设置上传的3种方法，远程上传，本地上传，图片64位加密

     image: {

            dropdown: ['insertImage', 'upload','base64'],

            ico: 'insertImage'

            }

          },

      // Redefine the button pane

      btns: ['viewHTML',

            '|', 'formatting',

            '|', 'btnGrp-semantic',

            '|', 'link',

            '|', 'image',

            '|', 'btnGrp-justify',

            '|', 'btnGrp-lists',

            '|', 'horizontalRule']，

 });

颜色插件在 dist目录下的plugins目录下！

Button pane 按钮窗格

这可能是最有趣的选项，它允许您选择出现在按钮窗格中的按钮。此选项是一个数组，其中包含表示按钮或垂直分隔符（使用竖线字符）的字符串值。若要创建自己的自定义按钮窗格，请定义一个数组并将其传递给 btns 该选项。

$('.simple-editor').trumbowyg({

btns: [['bold', 'italic'], ['link']] //加粗 斜体 链接

});

By default, btns option value is: 默认情况下， btns 选项值为：

$('.simple-editor').trumbowyg({

btns: [

['viewHTML'], //查看html

['undo', 'redo'], // 撤消 重做

['formatting'], //格式

['strong', 'em', 'del'], //字体加粗

['superscript', 'subscript'], //上标 下标

['link'], //链接

['insertImage'], // 插入图片

['justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull'], //靠左 剧中 靠右 全部

['unorderedList', 'orderedList'], //无序列表 有序列表

['horizontalRule'], //水平规则

['removeformat'], //删除格式

['fullscreen']， //全屏

]

});

参考链接     Documentation | Trumbowyg 官网

好文推荐

评论可见，请评论后查看内容，谢谢！！！
 您阅读本篇文章共花了：