使用方法👇
首先,添加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 官网
