feat: add tinymce embedded form example

vben
1 parent 28590676
Showing 6 changed files with 43 additions and 32 deletions
package.json
src/components/Tinymce/src/Editor.vue
src/router/menus/modules/demo/editor.ts
src/router/routes/modules/demo/editor.ts
src/utils/helper/routeHelper.ts
yarn.lock
@@ -81,7 +81,6 @@
     "postcss-import": "^12.0.1",
     "prettier": "^2.1.2",
     "rimraf": "^3.0.2",
-    "rollup-plugin-analyzer": "^3.3.0",
     "rollup-plugin-visualizer": "^4.1.2",
     "stylelint": "^13.7.2",
     "stylelint-config-prettier": "^8.0.2",
@@ -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,
@@ -17,10 +17,10 @@ const menu: MenuModule = {
             path: 'index',
             name: '基础使用',
           },
-          // {
-          //   path: 'editor',
-          //   name: '嵌入form使用',
-          // },
+          {
+            path: 'editor',
+            name: '嵌入form使用',
+          },
         ],
       },
     ],
@@ -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使用',
+          },
+        },
       ],
     },
   ],
@@ -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);
@@ -6757,11 +6757,6 @@ rimraf@^3.0.2:
   dependencies:
     glob "^7.1.3"
  
-rollup-plugin-analyzer@^3.3.0:
-  version "3.3.0"
-  resolved "https://registry.npmjs.org/rollup-plugin-analyzer/-/rollup-plugin-analyzer-3.3.0.tgz#52fb30465ae927d9c078b6ec90c578cfb9164fc2"
-  integrity sha512-zUPGitW4usmZcVa0nKecRvw3odtXgnxdCben9Hx1kxVoR3demek8RU9tmRG/R35hnRPQTb7wEsYEe3GUcjxIMA==
-
 rollup-plugin-babel@^4.3.3:
   version "4.4.0"
   resolved "https://registry.npmjs.org/rollup-plugin-babel/-/rollup-plugin-babel-4.4.0.tgz#d15bd259466a9d1accbdb2fe2fff17c52d030acb"