zoukankan      html  css  js  c++  java
  • UEditor自定义toolbar工具条

    使用ueditor的同学都知道,ueditor里有很多功能,很全面,但有时候我们的编辑器不需要太多的功能,比如前台评论或者留言,就不需要这么多功能了,那我们怎么去定制自己想要的工具呢?官方给出了两个方法,ueditor工具栏上的按钮列表可以自定义配置,只需要通过修改配置项就可以实现需求:

    1. 方法一:修改ueditorconfig.js里面的toolbars
    2. 方法二:实例化编辑器的时候传入toolbars参数
    第一种貌似不适合,需要改ueditor.config.js文件,有点麻烦,第二种就很好,我们且来看看第二种方法,示例如下:

    <script type="text/javascript" src="ueditor/ueditor.config.js"></script>
    <script type="text/javascript" src="ueditor/ueditor.all.min.js"> </script>
    <script type="text/javascript" src="ueditor/lang/zh-cn/zh-cn.js"></script>
    <script>
    $(function() {
    //本来是这样的:UE.getEditor('editor'); 传入参数后就是下面那样子了,toolbars里的就是工具的图标
    UE.getEditor('editor', {
    toolbar: [
    ['fullscreen', 'source', 'undo', 'redo', 'bold', 'italic',
    'underline','fontborder', 'backcolor', 'fontsize', 'fontfamily',
    'justifyleft', 'justifyright','justifycenter', 'justifyjustify',
    'strikethrough','superscript', 'subscript', 'removeformat',
    'formatmatch','autotypeset', 'blockquote', 'pasteplain', '|',
    'forecolor', 'backcolor','insertorderedlist', 'insertunorderedlist',
    'selectall', 'cleardoc', 'link', 'unlink','emotion', 'help']
    ]
    });
    })
    </script>

    配置项里用竖线 ‘|’ 代表分割线
    完整的按钮列表

    toolbars: [
    [
    'anchor', //锚点
    'undo', //撤销
    'redo', //重做
    'bold', //加粗
    'indent', //首行缩进
    'snapscreen', //截图
    'italic', //斜体
    'underline', //下划线
    'strikethrough', //删除线
    'subscript', //下标
    'fontborder', //字符边框
    'superscript', //上标
    'formatmatch', //格式刷
    'source', //源代码
    'blockquote', //引用
    'pasteplain', //纯文本粘贴模式
    'selectall', //全选
    'print', //打印
    'preview', //预览
    'horizontal', //分隔线
    'removeformat', //清除格式
    'time', //时间
    'date', //日期
    'unlink', //取消链接
    'insertrow', //前插入行
    'insertcol', //前插入列
    'mergeright', //右合并单元格
    'mergedown', //下合并单元格
    'deleterow', //删除行
    'deletecol', //删除列
    'splittorows', //拆分成行
    'splittocols', //拆分成列
    'splittocells', //完全拆分单元格
    'deletecaption', //删除表格标题
    'inserttitle', //插入标题
    'mergecells', //合并多个单元格
    'deletetable', //删除表格
    'cleardoc', //清空文档
    'insertparagraphbeforetable', //"表格前插入行"
    'insertcode', //代码语言
    'fontfamily', //字体
    'fontsize', //字号
    'paragraph', //段落格式
    'simpleupload', //单图上传
    'insertimage', //多图上传
    'edittable', //表格属性
    'edittd', //单元格属性
    'link', //超链接
    'emotion', //表情
    'spechars', //特殊字符
    'searchreplace', //查询替换
    'map', //Baidu地图
    'gmap', //Google地图
    'insertvideo', //视频
    'help', //帮助
    'justifyleft', //居左对齐
    'justifyright', //居右对齐
    'justifycenter', //居中对齐
    'justifyjustify', //两端对齐
    'forecolor', //字体颜色
    'backcolor', //背景色
    'insertorderedlist', //有序列表
    'insertunorderedlist', //无序列表
    'fullscreen', //全屏
    'directionalityltr', //从左向右输入
    'directionalityrtl', //从右向左输入
    'rowspacingtop', //段前距
    'rowspacingbottom', //段后距
    'pagebreak', //分页
    'insertframe', //插入Iframe
    'imagenone', //默认
    'imageleft', //左浮动
    'imageright', //右浮动
    'attachment', //附件
    'imagecenter', //居中
    'wordimage', //图片转存
    'lineheight', //行间距
    'edittip ', //编辑提示
    'customstyle', //自定义标题
    'autotypeset', //自动排版
    'webapp', //百度应用
    'touppercase', //字母大写
    'tolowercase', //字母小写
    'background', //背景
    'template', //模板
    'scrawl', //涂鸦
    'music', //音乐
    'inserttable', //插入表格
    'drafts', // 从草稿箱加载
    'charts', // 图表
    ]
    ]


    备注:
    我配置的时候配置key使用的是toolbar,很多博文使用的是toolbars,但是我使用toolbars不起作用,不知道是不是ueditor的版本问题。

  • 相关阅读:
    entity framework 查看自动生成的sql
    如何从只会 C++ 语法的水平到达完成项目编写软件的水平?
    C/C++程序员必须熟练应用的开源项目
    VS2013创建Windows服务
    VS2013中使用Git建立源代码管理
    PowerDesigner导出表到word
    SQLSERVER的逆向工程,将数据库导入到PowerDesigner中
    Asp.Net MVC+EF+三层架构的完整搭建过程
    QT开发(一)Vs2013集成 QT5.3.1
    VS2013 好用的插件
  • 原文地址:https://www.cnblogs.com/zqifa/p/ueditor-1.html
Copyright © 2011-2022 走看看