首先，因项目需求和客户要求，需要使用到功能非常齐全的富文本编辑器。最后项目组开会，决定使用百度的ueditor。这个第三方的富文本编辑器，其实在前端引入和使用上，都没有什么难点。主要是在后端配置上。因为我们公司是使用java开发的后端，在接ueditor的api时有些技术难点问题。不过好在项目组的后端同事最后还是解决了，并且能成功的上传文件、图片、视频等，上传路径也是可以的。插件文档可以看http://fex.baidu.com/ueditor/。
其次，就会在前端接入使用过程中遇到的一些小问题，下面总结一下：
1、 引入的时候，我开始在start下面的index.html文件中引入js文件，但是在具体的使用的页面，会产生一个问题：就是只有在第一次页面加载后台，富文本编辑器才会加载出来，只有再次点击进入这个也免得话，富文本框就不会再加载，所以后来改成直接在要使用的页面去引入ueditor的js文件。
微信截图_20210207145237.png
2、第二个问题，就是客户需要将编辑器设置成默认字体是宋体，字号是12px，行间距是2倍，这个一开始以为失去源码文件修改，后来看了文档，是可以在加载使用页面配置的。
3、第三个问题，编辑器的工具栏会随着页面固定到顶部后，会定位在顶部，然后就回不到原来位置，导致页面看起来样式有问题。这个问题，我一开始也是想着修改源码，但是后来发现只要在内容区域加上滚动条就好了。然后就给配置autoHeightEnabled: false，这个参数就可以了，固定页面需要的位置。
因为在layui框架中，我们使用的是单页面模板，使用的底层是iframe。ueditor也是使用的嵌套iframe，可能冲突，所以使用内容滚动的方式解决更好点。
4、第四个问题：上传图片时，如果图片过大，超出了区域，会无法进行操作，可以通过后端修改配置，前端修改源码来配置上传到页面中展示的图片的默认尺寸。详细请看：https://www.cnblogs.com/sunky/p/11026786.html
微信截图_20210207170622.png
5、第五个问题：上传的图片点击之后的焦点框会错位，样式的定位错误问题。可以将源码里面的me.editor.document.body.scrollTop，用上面的方式，替换成me.editor.document.documentElement.scrollTop
详情请看 https://blog.csdn.net/iteye_3142/article/details/82580137
微信截图_20210207170635.png
目前只记得这么多，后续还有问题，接着记录。只是为了提醒自己，下次再遇到问题，有地方快速找到答案。
下面附上使用的代码
html:
<form class="layui-form" lay-filter="formFilter" action="javascript: return false;"> <div class="layui-form-item"> <label class="layui-form-label"><span>内容：</span></label> <div class="layui-input-block"> <textarea name="content" id="editor" type="text/plain"></textarea> </div> </div> <div class="layui-form-item"> <div class="layui-input-block" style="text-align: left;"> <button class="layui-btn layuimini-btn" lay-submit lay-filter="submit">保存</button> <button type="reset" class="layui-btn" id="reset-btn">重置</button> </div> </form>
js:
`
<script type="text/javascript" src="../js/uedit/ueditor.config.js"></script>
<script type="text/javascript" src="../js/uedit/ueditor.all.js"></script>
<script type="text/javascript" src="../js/uedit/ueditor.parse.js"></script>
<script>
layui.use(['admin', 'eleTree'], function() {
var ,
admin = layui.admin,
form = layui.form;
// 创建编辑器
var ue = UE.getEditor('editor', {
autoHeightEnabled: false // 编辑器自动高度关闭，就是可以固定高度，内容区域滚动，编辑器操作栏一直固定在上面
});
ue.ready(function() {
ue.execCommand('fontfamily', 'SimSun'); //字体
ue.execCommand('lineheight', 2); //行间距
ue.execCommand('fontsize', '12px'); //字号
});
// 表单提交
form.on('submit(submit)', function(data) {
console.log('提交的数据：', data.field) // 符文变编辑器放在form表单标签中，可以使用submit事件监听提交的数据
});
// 重置表单
$('#reset-btn').click(function() {
// 清除富文本
ue.setContent('');
// 由于重置了表单，会把之前的默认设置也重置，所以这边再加上默认设置的代码
ue.ready(function() {
ue.execCommand('fontfamily', 'SimSun'); //字体
ue.execCommand('lineheight', 2); //行间距
ue.execCommand('fontsize', '12px'); //字号
});
});
// 回显值/设置值
// console.log('内容:', res.data.content)
ue.ready(function() {
ue.setContent(res.data.content);
});
})
</script>
`
网友评论