vue2和vue3引用ueditor的区别

官方文档入口

UEditor Docs

vue2使用方式

UE.vue组件

<template><div><script id="editor" type="text/plain"></script><Upload v-if="isupload" :config="{total:9}" :isupload="isupload" @returnImgs="returnImgsFunc">上传图片</Upload></div>
</template>
<script>import Upload from '@/components/file/Upload';export default {components:{Upload},name: 'ue',data() {return {editor: null,isupload:false,hasCallback: false,callback: null,this_config:{//不需要工具栏漂浮autoFloatEnabled:false}}},props: {text: String,config: Object},created() {/*富文本框的默认选择图片方式，改成自定义的选择方式*/window.openUpload = this.openUpload;},watch:{},mounted() {Object.assign(this.this_config,this.config);this.editor = window.UE.getEditor('editor', this.this_config);this.editor.addListener('ready', (e) => {this.editor.setContent(this.text);});/*监听富文本内容变化，有变化传给调用组件的页面*/this.editor.addListener('contentChange', (e) => {this.$emit('contentChange',this.editor.getContent());});},methods: {/*获取富文本框内容*/getUEContent() {return this.editor.getContent()},/*打开选择图片*/openUpload: function(callback) {this.isupload = true;if (callback) {this.hasCallback = true;this.callback = callback;}},/*获取图片*/returnImgsFunc(e) {if (e != null) {this.hasCallback && this.callback(e);}this.isupload = false;},},/*销毁*/destroyed() {this.editor.destroy()}}
</script>

引用index.vue

<template><Uediter :text="form.model.content" :config="ueditor.config" ref="ue" @contentChange="contentChangeFunc"></Uediter>
</template><script>
import Uediter from '@/components/UE.vue';
export default {components: {Uediter,},data() {return {/*富文本框配置*/ueditor: {text: '',config: {initialFrameWidth: 400,initialFrameHeight: 500}},};},created() {},inject: ['form'],methods:{/*获取富文本内容*/contentChangeFunc(e){this.form.model.content=e;},}
};
</script><style></style>

vue3使用方式

UE.vue

<template><div><!-- <vue-ueditor-wrap v-model="msg" :config="editorConfig" editor-id="editor-demo-01" @beforeInit="addCustomButtom" @ready="ready"></vue-ueditor-wrap> --><vue-ueditor-wrap v-model="msg" :config="editorConfig" editor-id="editor-demo-01" @ready="ready"></vue-ueditor-wrap><Upload v-if="isupload" :config="{ total: 9 }" :isupload="isupload" @returnImgs="returnImgsFunc">上传图片</Upload></div>
</template>
<script>
import { reactive, toRefs, ref, watch } from 'vue';
import Upload from '@/components/file/Upload.vue';
export default {components: {Upload},props: ['text'],setup(props, { emit }) {const state = reactive({msg: props.text,editor: null,isupload: false,hasCallback: false,callback: null,this_config: {//不需要工具栏漂浮autoFloatEnabled: false,},});watch(() => state.msg,(v) => {emit("contentChange",v)});return {...toRefs(state),};},methods: {ready(){window.openUpload = this.openUpload;},// addCustomButtom(editorId){// 	let _this = this;//     window.UE.registerUI('test-button', function (editor, uiName) {//         // 注册按钮执行时的 command 命令，使用命令默认就会带有回退操作//         editor.registerCommand(uiName, {//             execCommand: () => {//                 /* _this.imageList = [];//                 _this.dialogVisible = true; *///                 _this.openUpload();//                 _this.editorHandler = editor;//             }//         })//         // 创建一个 button//         var btn = new window.UE.ui.Button({//             // 按钮的名字//             name: uiName,//             // 提示//             title: '图片上传',//             // 需要添加的额外样式，可指定 icon 图标，图标路径参考常见问题 2//             cssRules: "background-position: -380px 0;",//             // 点击时执行的命令//             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//     }, 46 /* 指定添加到工具栏上的哪个位置，默认时追加到最后 */, editorId /* 指定这个 UI 是哪个编辑器实例上的，默认是页面上所有的编辑器都会添加这个按钮 */)// },/*打开选择图片*/openUpload: function(callback) {this.isupload = true;if (callback) {this.hasCallback = true;this.callback = callback;}},/*获取图片*/returnImgsFunc(e) {if (e != null) {this.hasCallback && this.callback(e);}this.isupload = false;},}
};
</script>

index.vue

<template>
<Uediter :text="form.model.content" :config="ueditor.config" ref="ue"@contentChange="contentChangeFunc"></Uediter>
</template><script>
import Uediter from '@/components/UE.vue';
export default {components: {/*编辑器*/Uediter,},data() {return {/*富文本框配置*/ueditor: {text: '',config: {initialFrameWidth: 400,initialFrameHeight: 500}},};},created() {},inject: ['form'],methods: {/*获取富文本内容*/contentChangeFunc(e) {this.form.model.content = e;},}
};
</script><style></style>