fx-platform-ui 0.0.13-alpha11 → 0.0.13-alpha12

package/packages/components/editor/src/hook/useEditorState.ts

@@ -1,12 +1,33 @@
 import { computed, ref, watchEffect } from 'vue'
-import tinymce from 'tinymce/tinymce'
+// import tinymce from 'tinymce/tinymce'
 import { message } from 'ant-design-vue'
 import { PlatEditorProps } from '../plat-editor-props'
 import { isFunction } from '../../../../utils/is'
 
 const DEFAULT_INIT = {
   selector: 'textarea',
-  placeholder: '在这里输入文字'
+  placeholder: '在这里输入文字',
+  language_url: '/tinymce/langs/zh-Hans.js', // 语言包的路径，具体路径看自己的项目，文档后面附上中文js文件
+  language: 'zh-Hans', //语言
+  skin_url: '/tinymce/skins/ui/oxide', // skin路径，具体路径看自己的项目
+  height: 500, //编辑器高度
+  branding: false, //是否禁用“Powered by TinyMCE”
+  menubar: true, //顶部菜单栏显示
+  image_dimensions: true, //图片宽高属性
+  promotion: false, // 去除高级功能升级的促销按钮
+  plugins:
+    'wordcount table searchreplace pagebreak  fullscreen  codesample  autolink anchor  autolink image media lists  link code  image', //这里的数据是在props里面就定义好了的
+  toolbar:
+    'fontsize fontfamily fontsizeselect fontselect bold  italic lineheight underline alignleft aligncenter alignright alignjustify anchor | undo redo |  formatselect | forecolor backcolor | bullist numlist outdent indent | lists link  image axupimgs media  table  | removeformat | fullscreen|preview code  codesample|searchreplace', //这里的数据是在props里面就定义好了的
+  paste_webkit_styles: 'all',
+  paste_merge_formats: true,
+  nonbreaking_force_tab: false,
+  paste_auto_cleanup_on_paste: false,
+  file_picker_types: 'file image media',
+  fontsize_formats: '8pt 10pt 12pt 14pt 16pt 18pt 20pt 22pt 24pt 36pt',
+  font_formats:
+    "微软雅黑='微软雅黑';宋体='宋体';黑体='黑体';仿宋='仿宋';楷体='楷体';隶书='隶书';幼圆='幼圆';Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings",
+  content_css: '/tinymce/skins/content/default/content.css' //以css文件方式自定义可编辑区域的css样式，css文件需自己创建并引入
 }
 
 export const useEditorState = (props: PlatEditorProps) => {
@@ -14,32 +35,32 @@ export const useEditorState = (props: PlatEditorProps) => {
   const init = computed(() => {
     return {
       ...DEFAULT_INIT,
-      images_upload_handler: (blobInfo) => {
-        return new Promise((resolve, reject) => {
-          imgBeforeUpload(blobInfo.blob())
-            .then((res) => {
-              resolve(res)
-            })
-            .catch((err) => {
-              reject(err)
-            })
-        })
-      },
-      file_picker_callback: (callback) => {
-        const filetype = props.mediaSetting.fileTypeLimit.toString()
-        const inputElem: any = document.createElement('input') //创建文件选择
-        inputElem.setAttribute('type', 'file')
-        inputElem.setAttribute('accept', filetype)
-        inputElem.click()
-        inputElem.onchange = function () {
-          const file = inputElem.files[0]
-          tinymce.activeEditor?.setProgressState(true)
-          mediaBeforeUpload(file).then((res) => {
-            tinymce.activeEditor?.setProgressState(false)
-            callback(res)
-          })
-        }
-      },
+      // images_upload_handler: (blobInfo) => {
+      //   return new Promise((resolve, reject) => {
+      //     imgBeforeUpload(blobInfo.blob())
+      //       .then((res) => {
+      //         resolve(res)
+      //       })
+      //       .catch((err) => {
+      //         reject(err)
+      //       })
+      //   })
+      // },
+      // file_picker_callback: (callback) => {
+      //   const filetype = props.mediaSetting.fileTypeLimit.toString()
+      //   const inputElem: any = document.createElement('input') //创建文件选择
+      //   inputElem.setAttribute('type', 'file')
+      //   inputElem.setAttribute('accept', filetype)
+      //   inputElem.click()
+      //   inputElem.onchange = function () {
+      //     const file = inputElem.files[0]
+      //     tinymce.activeEditor?.setProgressState(true)
+      //     mediaBeforeUpload(file).then((res) => {
+      //       tinymce.activeEditor?.setProgressState(false)
+      //       callback(res)
+      //     })
+      //   }
+      // },
       ...props.editorSetting
     }
   })

package/packages/components/editor/src/index.vue

@@ -8,28 +8,28 @@
 import { onMounted, watch, ref } from 'vue'
 //在js中引入所需的主题和组件
 import tinymce from 'tinymce/tinymce'
-import 'tinymce/skins/content/default/content.css'
+// import 'tinymce/skins/content/default/content.css'
 import Editor from '@tinymce/tinymce-vue'
-import 'tinymce/themes/silver'
-import 'tinymce/themes/silver/theme'
-import 'tinymce/icons/default' //引入编辑器图标icon，不引入则不显示对应图标
-import 'tinymce/models/dom' // 这里是个坑 一定要引入
-
-//在TinyMce.vue中接着引入相关插件
-import 'tinymce/icons/default/icons'
-import 'tinymce/plugins/image' // 插入上传图片插件
-import 'tinymce/plugins/media' // 插入视频插件
-import 'tinymce/plugins/table' // 插入表格插件
-import 'tinymce/plugins/lists' // 列表插件
-import 'tinymce/plugins/wordcount' // 字数统计插件
-import 'tinymce/plugins/code' // 源码
-import 'tinymce/plugins/fullscreen' //全屏
-import 'tinymce/plugins/pagebreak' //插入分页符
-import 'tinymce/plugins/codesample'
-import 'tinymce/plugins/searchreplace'
-import 'tinymce/plugins/link'
-import 'tinymce/plugins/autolink'
-import 'tinymce/plugins/anchor'
+// import 'tinymce/themes/silver'
+// import 'tinymce/themes/silver/theme'
+// import 'tinymce/icons/default' //引入编辑器图标icon，不引入则不显示对应图标
+// import 'tinymce/models/dom' // 这里是个坑 一定要引入
+//
+// //在TinyMce.vue中接着引入相关插件
+// import 'tinymce/icons/default/icons'
+// import 'tinymce/plugins/image' // 插入上传图片插件
+// import 'tinymce/plugins/media' // 插入视频插件
+// import 'tinymce/plugins/table' // 插入表格插件
+// import 'tinymce/plugins/lists' // 列表插件
+// import 'tinymce/plugins/wordcount' // 字数统计插件
+// import 'tinymce/plugins/code' // 源码
+// import 'tinymce/plugins/fullscreen' //全屏
+// import 'tinymce/plugins/pagebreak' //插入分页符
+// import 'tinymce/plugins/codesample'
+// import 'tinymce/plugins/searchreplace'
+// import 'tinymce/plugins/link'
+// import 'tinymce/plugins/autolink'
+// import 'tinymce/plugins/anchor'
 
 import { platEditorProps } from './plat-editor-props'
 import { platEditorEmits } from './plat-editor-emits'