百度富文本编辑器文档：http://fex.baidu.com/ueditor/#start-config
下载ueditor官网：http://ueditor.baidu.com/website/download.html
下面我们先在html中引用百度编辑器
1.在html中引入
<!-- 配置文件 -->
<script type="text/javascript" src="ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="ueditor.all.js"></script>
<!-- 语言文件 -->
<script type="text/javascript" charset="utf-8" src="lang/zh-cn/zh-cn.js"></script>
2.在body中加富文本编辑器的容器，并初始化
<!-- 加载编辑器的容器 -->
<script id="container" name="content" type="text/plain">
我的初始化
</script>
<!-- 在script中初始化 -->
<!-- 实例化编辑器 -->
<script type="text/javascript">
var ue = UE.getEditor('container',{
serverUrl:"http://test.io/php/controller.php?action=config"//这里是上传图片后端处理文件地址（自行替换），如果不使用图片上传，则不需要配置
});
</script>
3.此时如果后端配置好了，就已经可以使用了,后端需要修改上传限制以及上传返回路径
举例子：
{
"imageUrlPrefix": "http://test.io", /* 图片访问路径前缀 ,加入以后获取富文本编辑器内容时，图片地址会以这个前缀开头*/
"imagePathFormat": "/image/{yyyy}{mm}{dd}/{time}{rand:6}",/* 这是上传后的路径*/
4.最后放到服务器的样式：（其中图片是我自己在编辑器页面加入的）
微信图片_20190306162116.png
vue中使用ueditor
1.先下载富文本编辑器，并将所需要的文件放到指定文件夹中，我 是放在plugins中.
image.png
这里需要注意，在开发的时候如果开启了webpack-dev-server,在开发的时候可能是显示的，但是打包以后到生产环境的时候会找不到dialog等文件，需要你在webpack.config.prod.js文件中修改，加入CopyWebpackPlugin插件，将plugins中文件复制到对应目录dist/js目录下：
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('production')
}
}),
new CopyWebpackPlugin([
{
from: path.join(__dirname, './src/plugins/ueditor'),
to: path.join(__dirname,"./dist/js/"),
ignore: ['.*']
}
]),
2.在入口文件中导入我们需要的文件，我这里是main.js
// 导入编辑器
import './plugins/ueditor/ueditor.config.js'
import './plugins/ueditor/ueditor.all.js'
import './plugins/ueditor/lang/zh-cn/zh-cn.js'
import './plugins/ueditor/ueditor.parse.js'
3.为了多次使用富文本编辑器，我们使用vue的组件
<template>
<div class="editor-box">
<script id="editor" type="text/plain"></script>
</div>
</template>
<script>
export default {
name: 'UE',
data () {
return {
editor: null
}
},
props: {
defaultMsg: {
type: String
},
config: {
type: Object
}
},
mounted() {
const _this = this;
this.editor = UE.getEditor('editor', this.config); // 初始化UE
this.editor.addListener("ready", function () {
_this.editor.setContent(_this.defaultMsg); // 确保UE加载完成后，放入内容。
});
},
methods: {
getUEContent() { // 获取内容方法
return this.editor.getContent()
}
},
destroyed() {
this.editor.destroy();
}
}
</script>
<style>
.editor-box{
padding: 0 40px;
}
</style>
4.在所需的页面中导入组件
<template>
<div>
<div class="editor-container">
<UE :defaultMsg='defaultMsg' :config='config' ref="ue"></UE>
</div>
</div>
<template>
<script>
import UE from '../../../components/subcom/ueditor.vue';
export default {
components: {
UE
},
data () {
return {
defaultMsg:'测试',
config:{
serverUrl:"http://test.io/php/controller.php?action=config",
autoHeightEnabled: true,
autoFloatEnabled: true
},
}
},
mounted() {
this.$refs.ue.style="width:auto";
},
methods: {
},
}
</script>
<style>
</style>
这是我自己的项目中显示的富文本编辑器
image.png
5.这里补充一下，编辑器宽度自适应的问题，解决方案就是在config参数里面修改：initialFrameWidth：'100%'，即可解决自适应问题。
6解决自动将div转换成p标签，在config参数里面修改：allowDivTransToP：false，即可解决。
