使用UEditor

时间:2023-11-09 18:07:38

在http://ueditor.baidu.com/website/上下载官方文件

文本编辑器的配置文件在ueditor.config.js

需要注意一下几点

首先

var URL = window.UEDITOR_HOME_URL || getUEBasePath();

这里是获取文件的基本安装目录,如果将代码放在服务器上时,发现无法加载下来,可以直接将替换这个地址

替换如下
window.UEDITOR_HOME_URL = "/xxxx/xxxx/";

还有修改工具栏的功能选项

, toolbars:[
            ['fullscreen', 'source', '|', 'undo', 'redo', '|',
                'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
                'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
                'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
                'directionalityltr', 'directionalityrtl', 'indent', '|',
                'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',
                'link', 'unlink', 'anchor', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
                'insertimage', 'emotion', 'scrawl', 'insertvideo', 'music', 'attachment', 'map', 'gmap', 'insertframe','insertcode', 'webapp', 'pagebreak', 'template', 'background', '|',
                'horizontal', 'date', 'time', 'spechars', 'snapscreen', 'wordimage', '|',
                'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', 'charts', '|',
                'print', 'preview', 'searchreplace', 'help', 'drafts']
        ]

这里的功能繁多,可以根据自己的需要修改

有时候我们根据不同的页面,需要的功能不一样,也可以在页面初始化的时候,对这个进行修改

var editor = new baidu.editor.ui.Editor({initialFrameHeight:320,toolbars:[
            ['fullscreen', 'source', '|', 'undo', 'redo', '|',
                'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
                'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
                'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
                'directionalityltr', 'directionalityrtl', 'indent', '|',
                'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',
                'link', 'unlink', 'anchor', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
                'insertimage', 'emotion', 'scrawl', 'insertvideo', 'music', 'attachment', 'map', 'gmap', 'insertframe','insertcode', 'webapp', 'pagebreak', 'template', 'background', '|',
                'horizontal', 'date', 'time', 'spechars', 'snapscreen', 'wordimage', '|',
                'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', 'charts', '|',
                'print', 'preview', 'searchreplace', 'help', 'drafts']
        ]});  
editor.render('editor');

工具栏的配置向对应的功能

分组 |
全屏 FullScreen
源代码 Source
撤销 Undo
重做
Redo
加粗 Bold
斜体 Italic
Border
上标 Superscript
下标 Subscript
清除格式
RemoveFormat
引用 BlockQuote
纯文本粘贴模式 PastePlain
文字颜色 ForeColor
背景颜**ackColor
有序列表 InsertOrderedList
无序列表 InsertUnorderedList
下划线
Underline
格式 Paragraph
字体 FontFamily
字体大小 FontSize
从左读
DirectionalityLtr
从右读 DirectionalityRtl
左对齐 JustifyLeft
居中对齐
JustifyCenter
右对齐 JustifyRight
两端对齐 JustifyJustify
添加外连 Link
清除外连
Unlink
添加图片 Image
特殊字符 Spechars
添加表情 Emoticon
添加视频 Video
添加地图
Map
分割线 Horizontal
添加日期 Date
添加时间 Time
删除表格 InsertTable
删除表格
DeleteTable
向表格前插入行 InsertParagraphBeforeTable
向前插入行 InsertRow
删除行
DeleteRow
向前插入列 InsertCol
删除列 DeleteCol
合并多个单元格 MergeCells
向右合并单元格
MergeRight
向下合并单元格 MergeDown
完全拆分单元格 SplittoCells
拆分成行
SplittoRows
拆分成列 SplittoCols
全选 SelectAll
清空文档 ClearDoc
替换查询
SearchReplace
打印 Print
预览 Preview
帮助 Help