百度富文本编辑器UEditor如何自定义配置toolbars工具条

UE.getEditor('editor', {
        toolbars: [[//工具条
            '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'
        ]]
});

完整的按钮列表:

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’, // 图表 
] 
]
  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
百度文本编辑器UEditor是一款基于JavaScript的所见即所得文本编辑器,可以轻松地将其集成到Java Web项目中,为用户提供更好的编辑体验。下面简单介绍一下在Java Web项目中使用百度文本编辑器UEditor的方法。 1.下载UEditor 首先,需要从百度UEditor官网上下载UEditor的源代码。下载地址为:http://ueditor.baidu.com/website/download.html 2.将UEditor集成到Java Web项目中 下载完成后,将UEditor的源代码解压缩,并将解压后的文件夹复制到Java Web项目的WebContent目录下的任意一个子目录中(比如说WebContent/ueditor)。然后,将UEditor中的jsp目录下的所有文件复制到Java Web项目的WebContent目录下的任意一个子目录中(比如说WebContent/jsp)。 3.配置UEditor 在Java Web项目的WebContent目录下新建一个名为config.json的文件,该文件的内容如下: { "imageActionName": "uploadimage", "imageFieldName": "upfile", "imageMaxSize": 2048000, "imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], "imageCompressEnable": true, "imageCompressBorder": 1600, "imageInsertAlign": "none", "imageUrlPrefix": "", "imagePathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", "scrawlActionName": "uploadscrawl", "scrawlFieldName": "upfile", "scrawlPathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", "scrawlMaxSize": 2048000, "scrawlUrlPrefix": "", "scrawlInsertAlign": "none", "snapscreenActionName": "uploadimage", "snapscreenPathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", "snapscreenUrlPrefix": "", "snapscreenInsertAlign": "none", "catcherLocalDomain": ["127.0.0.1", "localhost", "img.baidu.com"], "catcherActionName": "catchimage", "catcherFieldName": "source", "catcherPathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", "catcherUrlPrefix": "", "catcherMaxSize": 2048000, "catcherAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], "videoActionName": "uploadvideo", "videoFieldName": "upfile", "videoPathFormat": "/ueditor/jsp/upload/video/{yyyy}{mm}{dd}/{time}{rand:6}", "videoUrlPrefix": "", "videoMaxSize": 102400000, "videoAllowFiles": [ ".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg", ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid" ], "fileActionName": "uploadfile", "fileFieldName": "upfile", "filePathFormat": "/ueditor/jsp/upload/file/{yyyy}{mm}{dd}/{time}{rand:6}", "fileUrlPrefix": "", "fileMaxSize": 51200000, "fileAllowFiles": [ ".png", ".jpg", ".jpeg", ".gif", ".bmp", ".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg", ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid", ".rar", ".zip", ".tar", ".gz", ".7z", ".bz2", ".cab", ".iso", ".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx", ".pdf", ".txt", ".md", ".xml" ], "imageManagerActionName": "listimage", "imageManagerListPath": "/ueditor/jsp/upload/image/", "imageManagerListSize": 20, "imageManagerUrlPrefix": "", "imageManagerInsertAlign": "none", "imageManagerAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], "fileManagerActionName": "listfile", "fileManagerListPath": "/ueditor/jsp/upload/file/", "fileManagerUrlPrefix": "", "fileManagerListSize": 20, "fileManagerAllowFiles": [ ".png", ".jpg", ".jpeg", ".gif", ".bmp", ".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg", ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid", ".rar", ".zip", ".tar", ".gz", ".7z", ".bz2", ".cab", ".iso", ".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx", ".pdf", ".txt", ".md", ".xml" ] } 该文件是UEditor配置文件,主要配置了上传文件的相关设置。 4.在JSP页面中使用UEditor 在需要使用UEditor的JSP页面中,添加如下代码: <!-- 加载ueditor编辑器js文件 --> <script type="text/javascript" src="${pageContext.request.contextPath}/ueditor/ueditor.config.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath}/ueditor/ueditor.all.min.js"></script> <!-- 创建编辑器 --> <script type="text/javascript"> var editor = UE.getEditor('editor'); </script> 其中,ueditor.config.js和ueditor.all.min.js是UEditor的核心文件,需要在页面中引入。editor是页面中一个div元素的id,表示要将该div元素转化为UEditor编辑器。 至此,就完成了在Java Web项目中使用百度文本编辑器UEditor的集成。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值