做个记录
引入:
之前项目用的vue-cli3脚本架创建的项目,然后引入ueditor的时候很多资源找不到路径,好多地方报错,后来重新用webpack重构了项目,ueditor的显示问题就自动解决了。
1、下载下来的ue资源包解压放在项目static目录下
2、在main.js里引入
import '../static/ue/ueditor.config.js';
import '../static/ue/ueditor.all.js';
import '../static/ue/lang/zh-cn/zh-cn.js';
import '../static/ue/ueditor.parse.js';
其中all.js和parse.js有压缩版,可以引用压缩版
3、在src/components组件目录下新建一个ue编辑器组件
<template>
<div>
<script :id="id" type="text/plain"></script>
</div>
</template>
<script>
export default {
name: 'UE',
data() {
return {
editor: null
}
},
props: {
value: {
type: String,
},
config: {
type: Object
},
id: {
type: String
},
},
mounted() {
const _this = this;
this.editor = UE.getEditor(this.id, this.config); // 初始化UE
this.editor.addListener("ready", function () {
_this.editor.setContent(_this.value); // 确保UE加载完成后,放入内容。
})
},
methods: {
getUEContent() { // 获取内容
return this.editor.getContent()
},
setUEContent(val) { // 设置编辑器内容
return this.editor.setContent(val);
}
ueSetEnabled() { // 使编辑器不可编辑
this.editor.setEnabled()
},
},
destroyed() {
this.editor.destroy();
}
}
</script>
4、把组件引入到页面里
<template>
<div>
<uediter id="uediter" ref="uediter" :value="contentLog" :config="ueditor.config"
style="line-height:22px;">
</uediter>
</div>
</template>
<script>
import Uediter from "../../components/ue.vue";
export default {
data() {
return {
ueditor: {
value: "编辑器默认文字",
config: {
toolbars: [
[
"source", //源码
"paragraph", //段落格式
"fontfamily", //字体
"fontsize", //字号
"undo", // 撤销
"insertorderedlist", //有序列表
"insertunorderedlist", //无序列表
"justifyleft", //居左对齐
"justifyright", //居右对齐
"justifycenter", //居中对齐
"simpleupload", //单图上传
"preview", // 预览
"fullscreen" //全屏
]
],
}
},
}
},
components:{
uediter,
},
}
后面有时间再写我做过的一些改动~