feat: add tinymce embedded form example

src/components/Tinymce/src/Editor.vue

@@ -15,6 +15,7 @@
     watch,
     onUnmounted,
     onDeactivated,
+    watchEffect,
   } from 'vue';
   import { basicProps } from './props';
   import toolbar from './toolbar';
@@ -57,6 +58,8 @@
         const { height, options } = props;
         return {
           selector: `#${unref(tinymceId)}`,
+          base_url: CDN_URL,
+          suffix: '.min',
           height: height,
           toolbar: toolbar,
           menubar: 'file edit insert view format table',
@@ -134,36 +137,48 @@
         bindHandlers(e, attrs, unref(editorRef));
       }
 
+      function setValue(editor: any, val: string, prevVal: string) {
+        if (
+          editor &&
+          typeof val === 'string' &&
+          val !== prevVal &&
+          val !== editor.getContent({ format: attrs.outputFormat })
+        ) {
+          editor.setContent(val);
+        }
+      }
+
       function bindModelHandlers(editor: any) {
         const modelEvents = attrs.modelEvents ? attrs.modelEvents : null;
         const normalizedEvents = Array.isArray(modelEvents) ? modelEvents.join(' ') : modelEvents;
         watch(
           () => props.modelValue,
           (val: string, prevVal: string) => {
-            if (
-              editor &&
-              typeof val === 'string' &&
-              val !== prevVal &&
-              val !== editor.getContent({ format: attrs.outputFormat })
-            ) {
-              editor.setContent(val);
-            }
+            setValue(editor, val, prevVal);
+          }
+        );
+
+        watch(
+          () => props.value,
+          (val: string, prevVal: string) => {
+            setValue(editor, val, prevVal);
+          },
+          {
+            immediate: true,
           }
         );
 
         editor.on(normalizedEvents ? normalizedEvents : 'change keyup undo redo', () => {
-          emit('update:modelValue', editor.getContent({ format: attrs.outputFormat }));
+          const content = editor.getContent({ format: attrs.outputFormat });
+          emit('update:modelValue', content);
+          emit('change', content);
         });
       }
 
-      function handleChange(value: string) {
-        emit('change', value);
-      }
       return {
         containerWidth,
         initOptions,
         tinymceContent,
-        handleChange,
         tinymceScriptSrc,
         elRef,
         tinymceId,

src/router/menus/modules/demo/editor.ts

@@ -17,10 +17,10 @@ const menu: MenuModule = {
             path: 'index',
             name: '基础使用',
           },
-          // {
-          //   path: 'editor',
-          //   name: '嵌入form使用',
-          // },
+          {
+            path: 'editor',
+            name: '嵌入form使用',
+          },
         ],
       },
     ],

src/router/routes/modules/demo/editor.ts

@@ -40,14 +40,14 @@ export default {
           },
         },
         // TODO
-        // {
-        //   path: 'editor',
-        //   name: 'TinymceFormDemo',
-        //   component: () => import('/@/views/demo/comp/tinymce/Editor.vue'),
-        //   meta: {
-        //     title: '嵌入form使用',
-        //   },
-        // },
+        {
+          path: 'editor',
+          name: 'TinymceFormDemo',
+          component: () => import('/@/views/demo/editor/tinymce/Editor.vue'),
+          meta: {
+            title: '嵌入form使用',
+          },
+        },
       ],
     },
   ],

src/utils/helper/routeHelper.ts

@@ -44,8 +44,10 @@ export function genRouteModule(moduleList: AppRouteModule[]) {
 // 动态引入
 function asyncImportRoute(routes: AppRouteRecordRaw[]) {
   routes.forEach((item) => {
-    const { component, children } = item;
+    let { component } = item;
+    const { children } = item;
     if (component) {
+      component = component.replace(/^\//, '');
       item.component = () => import(`/@/views/${component}`);
     }
     children && asyncImportRoute(children);