diff --git a/package.json b/package.json index a6bc24eb6321e619bb45ddfd7389aa2d1db4f283..cc0e54d2698b3c366d55f693e956b5a0b1c7857f 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/components/Tinymce/src/Editor.vue b/src/components/Tinymce/src/Editor.vue index 1e7fbd42a26bad80540bb4fb66b410ed05109e18..ae74d4650fffaca62e6c9b63abd5c5ad741f8e5d 100644 --- a/src/components/Tinymce/src/Editor.vue +++ b/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, diff --git a/src/router/menus/modules/demo/editor.ts b/src/router/menus/modules/demo/editor.ts index eb307dcaa822fa782646f92257f2e455404a9f9b..f6e372fda661fabc82c385468a184323331118a4 100644 --- a/src/router/menus/modules/demo/editor.ts +++ b/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使用', + }, ], }, ], diff --git a/src/router/routes/modules/demo/editor.ts b/src/router/routes/modules/demo/editor.ts index cf54ea331b84942e9ca79c839cc4a73652f61685..639cb250765c508938b941aac8f5fbc27289395e 100644 --- a/src/router/routes/modules/demo/editor.ts +++ b/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使用', + }, + }, ], }, ], diff --git a/src/utils/helper/routeHelper.ts b/src/utils/helper/routeHelper.ts index 4cce1ebdedb3874082014e972277c077fc898844..4bfc9e7cf6a25748a27213d597c62fa21c7c3c2c 100644 --- a/src/utils/helper/routeHelper.ts +++ b/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); diff --git a/yarn.lock b/yarn.lock index d368053366c8169938a20cab15616556875f6b82..9e565c7be1bf4292d6196add1999e18cf5ce96d6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -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"