前言：最近做产品详情展示页面，详情里面有图片文字、样式什么的，用的字段比较多，还是选用编辑器比较方便。是基于vue，使用了ueditor富文本做表单提交，其他动能使用正常，上传图片一直都有问题，一直显示后台未配置，在网上也是找了很多的方法还是没有找到解决的办法，最后找到这个终于解决了，提交数据加图片，回显也没有问题，最后分享一下我的经验.
一.下载ueditor
Ueditor项目下载地址：ueditor.baidu.com/website/
因为我使用的是vue，所以使用了这个插件vue-ueditor-wrap，安装改插件，下载ueditor的php版本（因为后台使用的是php版本）。
二、把php版本中的如下内容添加到 /static/UEditor/
因为我的vue版本还是3.0以下的，如果是3.0以上的可以放在public中...
三、在vue项目中单独定义一个的富文本编辑器模块：
四、在父组件中使用组件
<vue-ueditor-wrap v-model="goods_desc" :config="myConfig" @beforeInit="addCustomButtom" :key="1"></vue-ueditor-wrap>
<script>
import VueUeditorWrap from './vue-ueditor-wrap.vue'
export default {
data() {
return {
goods_desc: '',
myConfig: {
autoHeightEnabled: false,
initialFrameHeight: 400,
initialFrameWidth: '100%',
UEDITOR_HOME_URL: '/static/UEditor/',
serverUrl: 'http://localhost:8081/controller.php', //图片上传的地址，需要后台的配置，不然就上传不了
},
}
},
methods() {
addCustomButtom(editorId) {
window.UE.registerUI('test-button', function (editor, uiName) {
// 注册按钮执行时的 command 命令，使用命令默认就会带有回退操作
editor.registerCommand(uiName, {
execCommand: function () {
editor.execCommand('inserthtml', `<span>这是一段由自定义按钮添加的文字</span>`);
}
});
// 创建一个 button
var btn = new window.UE.ui.Button({
// 按钮的名字
name: uiName,
// 提示
title: '鼠标悬停时的提示文字',
// 需要添加的额外样式，可指定 icon 图标，图标路径参考常见问题 2
cssRules: "",
// 点击时执行的命令
onclick: function () {
// 这里可以不用执行命令，做你自己的操作也可
editor.execCommand(uiName);
}
});
// 当点到编辑内容上时，按钮要做的状态反射
editor.addListener('selectionchange', function () {
var state = editor.queryCommandState(uiName);
if (state === -1) {
btn.setDisabled(true);
btn.setChecked(false);
} else {
btn.setDisabled(false);
btn.setChecked(state);
}
});
// 因为你是添加 button，所以需要返回这个 button
return btn;
}, 0 /* 指定添加到工具栏上的哪个位置，默认时追加到最后 */, editorId /* 指定这个 UI 是哪个编辑器实例上的，默认是页面上所有的编辑器都会添加这个按钮 */);
}
}
}
</script>
上传图片时需要后台处理、将接口写好，这样就可以看到效果了.
五.遇到的坑
最近在项目中遇到需要提交form表单的，由于数据较多，不想新建页面（主要是页面传值比较麻烦），我这边用到的是elemen-ui中的弹框（el-dialog）,将编辑器引入。
<el-dialog
:visible.sync="showForm"
width="80%"
:close-on-click-modal="false"
:append-to-body="true"
>
<el-form :model="formData" class="as-form-col">
<el-form-item
label="具体描述"
:label-width="formLabelWidth"
>
<vue-ueditor-wrap
v-model="formData.detail" //绑定的字段
:config="myConfig"
@beforeInit="addCustomButtom"
:key="1"
></vue-ueditor-wrap>
</el-form-item>
</el-dialog>
<script>
import VueUeditorWrap from "../common/vue-ueditor-wrap";
export default {
data() {
return {
showForm: false,
formLabelWidth: '100px',
formData: {
detail:''
},
myConfig: {
autoHeightEnabled: false,
initialFrameHeight: 400,
initialFrameWidth: "100%",
UEDITOR_HOME_URL: "/static/UEditor/", // 目录
serverUrl: "图片上传的地址"
}
}
}
components: {
VueUeditorWrap
},
methods:{
addCustomButtom(editorId) { // 直接去网上赋值过来
window.UE.registerUI(
"test-button",
function(editor, uiName) {
// 注册按钮执行时的 command 命令，使用命令默认就会带有回退操作
editor.registerCommand(uiName, {
execCommand: function() {
editor.execCommand(
"inserthtml",
`<span>这是一段由自定义按钮添加的文字</span>`
);
}
});
// 创建一个 button
var btn = new window.UE.ui.Button({
// 按钮的名字
name: uiName,
// 提示
title: "鼠标悬停时的提示文字",
// 需要添加的额外样式，可指定 icon 图标，图标路径参考常见问题 2
cssRules: "",
// 点击时执行的命令
onclick: function() {
// 这里可以不用执行命令，做你自己的操作也可
editor.execCommand(uiName);
}
});
// 当点到编辑内容上时，按钮要做的状态反射
editor.addListener("selectionchange", function() {
var state = editor.queryCommandState(uiName);
if (state === -1) {
btn.setDisabled(true);
btn.setChecked(false);
} else {
btn.setDisabled(false);
btn.setChecked(state);
}
});
// 因为你是添加 button，所以需要返回这个 button
return btn;
},
0 /* 指定添加到工具栏上的哪个位置，默认时追加到最后 */,
editorId /* 指定这个 UI 是哪个编辑器实例上的，默认是页面上所有的编辑器都会添加这个按钮 */
);
},
}
}
</script>
打开可以显示正常，有些功能显示不完全，如：
<style scope>
.el-dialog__wrapper {
z-index: 203 !important;
}
.v-modal {
z-index: 200 !important;
}
</style>
写的不足，有待更新......
