轻量级富文本编辑 Trumbowyg —— 基于 jQuery 插件配置-CSDN博客

本文链接：https://blog.csdn.net/qq_53895518/article/details/137084851

使用方法👇

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

<script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')</script>

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

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

<script src="js/vendor/trumbowyg.min.js"></script>

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

<link rel="stylesheet" href="css/vendor/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 官网