feat:avue-plugin-ueditor lib

package.json

@@ -11,10 +11,9 @@
   "dependencies": {
     "@element-plus/icons-vue": "^2.0.9",
     "@saber/nf-design-base-elp": "^1.0.0",
-    "@smallwei/avue": "^3.2.13",
-    "@wangeditor/editor": "^5.1.23",
-    "@wangeditor/editor-for-vue": "^5.1.12",
+    "@smallwei/avue": "^3.2.15",
     "animate.css": "^4.1.1",
+    "avue-plugin-ueditor": "^1.0.1",
     "axios": "^0.21.1",
     "crypto-js": "^4.1.1",
     "dayjs": "^1.10.6",
@@ -40,4 +39,4 @@
     "vite-plugin-compression": "^0.5.1",
     "vite-plugin-vue-setup-extend": "^0.4.0"
   }
-}
+}

src/components/avue-ueditor/main.vue

@@ -1,70 +0,0 @@
-<template>
-  <div class="editor—wrapper">
-    <Toolbar class="toolbar-container" :editor="editorRef" :defaultConfig="toolbarConfig" />
-    <Editor
-      :style="styleName"
-      v-model="valueHtml"
-      :defaultConfig="editorConfig"
-      @onChange="onChange"
-      @onCreated="handleCreated"
-    />
-  </div>
-</template>
-
-<script setup>
-import '@wangeditor/editor/dist/css/style.css'; // 引入 css
-import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
-
-const emit = defineEmits();
-const props = defineProps({
-  placeholder: String,
-  modelValue: String,
-  minRows: [String, Number],
-});
-const styleName = computed(() => {
-  return {
-    height: props.minRows * 50 + 'px',
-  };
-});
-// 编辑器实例，必须用 shallowRef
-const editorRef = shallowRef();
-
-// 内容 HTML
-const valueHtml = ref(props.modelValue);
-
-onMounted(() => {
-  valueHtml.value = props.modelValue;
-});
-const toolbarConfig = {};
-const editorConfig = { placeholder: props.placeholder };
-
-// 组件销毁时，也及时销毁编辑器
-onBeforeUnmount(() => {
-  const editor = editorRef.value;
-  if (editor == null) return;
-  editor.destroy();
-});
-watch(
-  () => props.modelValue,
-  val => {
-    console.log(val);
-    valueHtml.value = val;
-  }
-);
-const onChange = editor => {
-  emit('update:modelValue', valueHtml.value);
-};
-const handleCreated = editor => {
-  editorRef.value = editor; // 记录 editor 实例，重要！
-};
-</script>
-
-<style>
-.editor—wrapper {
-  border: 1px solid #ccc;
-}
-
-.toolbar-container {
-  border-bottom: 1px solid #ccc;
-}
-</style>

src/main.js

@@ -14,7 +14,7 @@ import crudCommon from '@/mixins/crud.js';
 import { getScreen } from './utils/util';
 import './permission';
 import error from './error';
-import avueUeditor from 'components/avue-ueditor/main.vue';
+import avueUeditor from 'avue-plugin-ueditor';
 import basicBlock from 'components/basic-block/main.vue';
 import basicContainer from 'components/basic-container/main.vue';
 import thirdRegister from './components/third-register/main.vue';
@@ -33,7 +33,6 @@ const app = createApp(App);
 for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
   app.component(key, component);
 }
-app.component('avueUeditor', avueUeditor);
 app.component('basicContainer', basicContainer);
 app.component('basicBlock', basicBlock);
 app.component('thirdRegister', thirdRegister);
@@ -54,5 +53,6 @@ app.use(Avue, {
   calcHeight: 10,
   locale: messages[language],
 });
+app.use(avueUeditor, { axios })
 app.use(NfDesignBase);
 app.mount('#app');