基于jsp的百度Ueditor插件的使用

初次使用百度的富文本编辑器Ueditor,写下使用经验以备不时之需

只是简单的应用，如有错误，请指正

首先去下载编辑器插件http://ueditor.baidu.com/website/download.html

我选择的是开发版Jsp  UTF-8版

这样我们就得到一个ZIP压缩包

解压该压缩包我们会得到utf-8-jsp的文件夹，文件夹的内容包括

在web项目中的webapp文件夹底下新建static/js/ueditor这样的文件结构

文件夹里所有的文件通通拷入ueditor中，我使用的idea集成开发工具，遇到文件dialogs文件拷不进去的情况，那就直接右键ueditor点击Show in Explorer直接拷入文件底下

这样准备工作就完成了。

接下来，在需要集成编辑器的jsp页面中导入js文件

导入这几个，文件目录是相对于webapp的

然后在script中写页面优先加载

<script id="editor" type="text/plain" style="width:1024px;height:500px;">编辑内容初始化</script>

将该段代码放入from表单中或你想显示的地方，当然这些操作官网也可以获得

关键是如何通过from表单提交内容，在我的项目中，from表单根本不认识script

我通过隐藏域

将从富文本编辑器中获得内容填充到隐藏域中

这样就完成了富文本编辑器的集成

此外，上传图片的配置在config.json文件下，重点关注imageUrlPrefix和imagePathFormat两个value值，也可以看其他博友写的关于上传图片的博文

怎样控制富文本编辑器的工具图标？

在实例化富文本编辑器的时候传入想要显示的值即可

可将以下代码复制粘贴，不想用那个功能直接注释

ue_s = UE.getEditor('editor',{toolbars: [[
        'fullscreen',//全画面
        'source',//源代码
        '|',
        'undo',//取消
        'redo',//还原
        '|',
        'bold',//黑字体
        'italic',//斜字体
        'underline',//下划线
        'fontborder',//字体边框
        'strikethrough',//删除线
        'superscript',//上标高度
        'subscript',//下标
        'removeformat',//清除格式
        'formatmatch',//格式刷
        'autotypeset',//自动排版
        'blockquote',//引用，用来设定一段较长的文字段落 缩进的标签.文本会2端都缩进
        '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',//居中
        '|',
        'simpleupload',//单图上传
        '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',//查询替换
        'drafts',//从查稿箱加载
        'help'//帮助
]]
});