feat: 富文本编辑器初步实现设计器部分

src/components/generator/config.js

@@ -127,6 +127,24 @@ export const inputComponents = [
     precision: undefined,
     'controls-position': '',
     disabled: false
+  },
+  {
+    __config__: {
+      label: '编辑器',
+      showLabel: true,
+      changeTag: true,
+      labelWidth: null,
+      tag: 'tinymce',
+      tagIcon: 'rich-text',
+      defaultValue: undefined,
+      span: 24,
+      layout: 'colFormItem',
+      required: true,
+      regList: [],
+      document: 'http://tinymce.ax-z.cn'
+    },
+    height: 300, // 编辑器高度
+    branding: false // 隐藏右下角技术支持
   }
 ]
 

src/components/render/render.js

@@ -1,31 +1,3 @@
-export function makeMap(str, expectsLowerCase) {
-  const map = Object.create(null)
-  const list = str.split(',')
-  for (let i = 0; i < list.length; i++) {
-    map[list[i]] = true
-  }
-  return expectsLowerCase
-    ? val => map[val.toLowerCase()]
-    : val => map[val]
-}
-
-// 参考https://github.com/vuejs/vue/blob/v2.6.10/src/platforms/web/server/util.js
-const isAttr = makeMap(
-  'accept,accept-charset,accesskey,action,align,alt,async,autocomplete,'
-  + 'autofocus,autoplay,autosave,bgcolor,border,buffered,challenge,charset,'
-  + 'checked,cite,class,code,codebase,color,cols,colspan,content,http-equiv,'
-  + 'name,contenteditable,contextmenu,controls,coords,data,datetime,default,'
-  + 'defer,dir,dirname,disabled,download,draggable,dropzone,enctype,method,for,'
-  + 'form,formaction,headers,height,hidden,high,href,hreflang,http-equiv,'
-  + 'icon,id,ismap,itemprop,keytype,kind,label,lang,language,list,loop,low,'
-  + 'manifest,max,maxlength,media,method,GET,POST,min,multiple,email,file,'
-  + 'muted,name,novalidate,open,optimum,pattern,ping,placeholder,poster,'
-  + 'preload,radiogroup,readonly,rel,required,reversed,rows,rowspan,sandbox,'
-  + 'scope,scoped,seamless,selected,shape,size,type,text,password,sizes,span,'
-  + 'spellcheck,src,srcdoc,srclang,srcset,start,step,style,summary,tabindex,'
-  + 'target,title,type,usemap,value,width,wrap'
-)
-
 function vModel(self, dataObject, defaultValue) {
   dataObject.props.value = defaultValue
 
@@ -124,14 +96,12 @@ export default {
         vModel(this, dataObject, confClone.__config__.defaultValue)
       } else if (dataObject[key]) {
         dataObject[key] = { ...dataObject[key], ...val }
-      } else if (!isAttr(key)) {
-        dataObject.props[key] = val
       } else {
         dataObject.attrs[key] = val
       }
     })
-    delete dataObject.props.__config__
-    delete dataObject.props.__slot__
+    delete dataObject.attrs.__config__
+    delete dataObject.attrs.__slot__
     return h(this.conf.__config__.tag, dataObject, children)
   },
   props: ['conf']

src/components/tinymce/config.js

@@ -0,0 +1,8 @@
+/* eslint-disable max-len */
+
+export const plugins = [
+  'advlist anchor autolink autosave code codesample directionality emoticons fullscreen hr image imagetools insertdatetime link lists media nonbreaking noneditable pagebreak paste preview print save searchreplace spellchecker tabfocus table template textpattern visualblocks visualchars wordcount'
+]
+export const toolbar = [
+  'code searchreplace bold italic underline strikethrough alignleft aligncenter alignright outdent indent blockquote undo redo removeformat subscript superscript codesample hr bullist numlist link image charmap preview anchor pagebreak insertdatetime media table emoticons forecolor backcolor fullscreen'
+]

src/components/tinymce/index.vue

@@ -0,0 +1,75 @@
+<template>
+  <textarea :id="tinymceId" class="textarea" />
+</template>
+
+<script>
+import loadTinymce from '@/utils/loadTinymce'
+import { plugins, toolbar } from './config'
+
+let num = 1
+
+export default {
+  props: {
+    id: {
+      type: String,
+      default: () => {
+        num === 10000 && (num = 1)
+        return `tinymce${+new Date()}${num++}`
+      }
+    },
+    value: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      tinymceId: this.id
+    }
+  },
+  computed: {
+
+  },
+  watch: {
+
+  },
+  mounted() {
+    loadTinymce(tinymce => {
+      import('./zh_CN')
+      tinymce.init({
+        selector: `#${this.tinymceId}`,
+        language: 'zh_CN',
+        menubar: 'file edit insert view format table',
+        plugins,
+        toolbar,
+        height: this.$attrs.height || 300,
+        branding: this.$attrs.branding || false,
+        object_resizing: false,
+        end_container_on_empty_block: true,
+        powerpaste_word_import: 'clean',
+        code_dialog_height: 450,
+        code_dialog_width: 1000,
+        advlist_bullet_styles: 'square',
+        advlist_number_styles: 'default',
+        default_link_target: '_blank',
+        link_title: false,
+        nonbreaking_force_tab: true,
+        init_instance_callback: editor => {
+          if (this.value) {
+            editor.setContent(this.value)
+          }
+        }
+      })
+    })
+  },
+  methods: {
+
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.textarea{
+  visibility: hidden;
+}
+</style>