imatrix-ui 0.0.15 → 0.1.1-up

package/components/rich-editor/index-bak.vue

@@ -0,0 +1,306 @@
+<template>
+  <div :style="{ maxHeight: maxHeight + 'px' }">
+    <!--<Editor-->
+    <!--  v-if="!disabled"-->
+    <!--  v-model:value="contentValue"-->
+    <!--  :init="init"-->
+    <!--  :disabled="disabled"-->
+    <!--/>-->
+    <div>
+      <div
+        :id="viewerId"
+        :style="{ maxHeight: maxHeight + 'px' }"
+        style="overflow: auto; border: 1px solid #dcdfe6; padding: 2px"
+      />
+      <el-tooltip
+        :content="$t('imatrixUIPublicModel.fullScreen')"
+        class="item"
+        effect="dark"
+        placement="top"
+      >
+        <em
+          class="el-icon-full-screen"
+          style="z-index: 1; right: 20px; position: absolute; top: 2px"
+          @click="fullScreenContent"
+        />
+      </el-tooltip>
+      <el-image
+        ref="previewImg"
+        :src="srcList[0]"
+        :preview-src-list="srcList"
+        style="display: none; width: 100px; height: 100px"
+      />
+    </div>
+    <el-dialog
+      v-model="dialogVisible"
+      :title="title"
+      destroy-on-close
+      append-to-body
+      fullscreen
+    >
+      <div :id="fullscreenViewerId" />
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { $on, $off, $once, $emit } from '../utils/gogocodeTransfer'
+
+import { getLanguageWithLocale } from '../../src/utils/util'
+// 引入tinymce编辑器
+// import Editor from '@tinymce/tinymce-vue'
+// // 引入node_modules里的tinymce相关文件文件
+// import * as tinymce from 'tinymce/tinymce' // tinymce默认hidden，不引入则不显示编辑器
+// import 'tinymce/themes/silver' // 编辑器主题，不引入则报错
+// import 'tinymce/icons/default' // 引入编辑器图标icon，不引入则不显示对应图标
+//
+// // 引入编辑器插件
+// import 'tinymce/plugins/advlist' // 高级列表
+// // import 'tinymce/plugins/anchor' // 锚点
+// // import 'tinymce/plugins/autolink' // 自动链接
+// // import 'tinymce/plugins/autoresize' // 编辑器高度自适应,注：plugins里引入此插件时，Init里设置的height将失效
+// // import 'tinymce/plugins/autosave' // 自动存稿
+// import 'tinymce/plugins/directionality' // 文字方向
+// // import 'tinymce/plugins/fullpage' // 文档属性
+// import 'tinymce/plugins/fullscreen' // 全屏
+// // import 'tinymce/plugins/hr' // 水平分割线
+// import 'tinymce/plugins/image' // 插入编辑图片
+// // import 'tinymce/plugins/importcss' // 引入css
+// // import 'tinymce/plugins/insertdatetime' // 插入日期时间
+// import 'tinymce/plugins/link' // 超链接
+// import 'tinymce/plugins/lists' // 列表插件
+// // import 'tinymce/plugins/media' // 插入编辑媒体
+// // import 'tinymce/plugins/nonbreaking' // 插入不间断空格
+// // import 'tinymce/plugins/pagebreak' // 插入分页符
+// // import 'tinymce/plugins/paste' // 粘贴插件
+// import 'tinymce/plugins/preview' // 预览
+// // import 'tinymce/plugins/print' // 打印
+// import 'tinymce/plugins/quickbars' // 快速工具栏
+// import 'tinymce/plugins/save' // 保存
+// import 'tinymce/plugins/searchreplace' // 查找替换
+// // import 'tinymce/plugins/spellchecker'  //拼写检查，暂未加入汉化，不建议使用
+// // import 'tinymce/plugins/tabfocus' // 切入切出，按tab键切出编辑器，切入页面其他输入框中
+// import 'tinymce/plugins/table' // 表格
+// // import 'tinymce/plugins/template' // 内容模板
+// // import 'tinymce/plugins/textcolor' // 文字颜色
+// // import 'tinymce/plugins/textpattern' // 快速排版
+// // import 'tinymce/plugins/toc' // 目录生成器
+// // import 'tinymce/plugins/visualblocks' // 显示元素范围
+// // import 'tinymce/plugins/visualchars' // 显示不可见字符
+// import 'tinymce/plugins/wordcount' // 字数统计
+// // 样式
+// // import 'tinymce/skins/content/default/content.min.css'
+// import 'tinymce/skins/ui/oxide/skin.min.css'
+// import 'tinymce/skins/ui/oxide/content.min.css'
+// // 主题
+// import 'tinymce/themes/silver'
+import * as Vue from 'vue'
+export default {
+  name: 'RichEditor',
+  components: {
+    // Editor,
+  },
+  props: {
+    entity: {
+      type: Object,
+      default: null,
+    },
+    prop: {
+      type: String,
+      default: null,
+    },
+    value: {
+      type: String,
+      default: '',
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    options: {
+      type: Object,
+      default: null,
+    },
+    title: {
+      type: String,
+      default: '',
+    },
+    plugins: {
+      type: [String, Array],
+      default:
+        'paste print preview searchreplace directionality fullscreen image link table hr  advlist lists wordcount  ',
+    },
+    toolbar: {
+      type: [String, Array],
+      default:
+        ' undo redo | formatselect fontsizeselect bold italic strikethrough underline hr forecolor backcolor | image |  ' +
+        '  lineheight   bullist numlist table | print fullscreen  preview  ',
+    },
+  },
+  data() {
+    const _that = this
+    if (getLanguageWithLocale() === 'zh_CN') {
+      require('./langs/zh-Hans.js')
+    }
+    let maxHeight = '400'
+    if (this.options && this.options.maxHeight) {
+      maxHeight = this.options.maxHeight
+    }
+    return {
+      maxHeight,
+      init: {
+        height: maxHeight,
+        language: 'zh-Hans', // 语言类型
+        plugins: this.plugins, // 插件配置
+        toolbar: this.toolbar, // 工具栏配置，设为false则隐藏
+        menubar: false, // 菜单栏配置，设为false则隐藏，不配置则默认显示全部菜单，也可自定义配置--查看 http://tinymce.ax-z.cn/configure/editor-appearance.php --搜索“自定义菜单”
+        fontsize_formats:
+          '12px 14px 16px 18px 20px 22px 24px 28px 32px 36px 48px 56px 72px', // 字体大小
+        font_formats:
+          '微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;', // 字体样式
+        // 自带默认字体：'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,zapf dingbats'
+        lineheight_formats: '0.5 0.8 1 1.2 1.5 1.75 2 2.5 3 4 5', // 行高配置，也可配置成"12px 14px 16px 20px"这种形式
+        placeholder: '在这里输入文字',
+        branding: false, // tiny技术支持信息是否显示
+        resize: false, // 编辑器宽高是否可变，false-否,true-高可变，'both'-宽高均可，注意引号
+        // statusbar: false,  //最下方的元素路径和字数统计那一栏是否显示
+        elementpath: false, // 元素路径是否显示
+        // image_caption: true,
+        // relative_urls: false,  //false: tinymce将不再自动将文件路径由绝对转为相对
+        // convert_urls: false,  //false: tinymce将不再自动处理文件路径
+        // file_picker_callback: () => {
+        //   alert(11)
+        // },
+        image_description: false,
+        content_style: 'img {width:400px;height:300px}', // 直接自定义可编辑区域的css样式
+        // content_css: '/tinycontent.css',  //以css文件方式自定义可编辑区域的css样式，css文件需自己创建并引入
+        // images_upload_url: '/apib/api-upload/uploadimg',  //后端处理程序的url，建议直接自定义上传函数image_upload_handler，这个就可以不用了
+        // images_upload_base_path: '/demo',  //相对基本路径--关于图片上传建议查看--http://tinymce.ax-z.cn/general/upload-images.php
+        paste_data_images: true, // 图片是否可粘贴'
+        urlconverter_callback: (url, node, onSave, name) => {
+          if (node === 'img' && url.startsWith('blob:')) {
+            console.log('urlconverter_callback ....')
+            tinymce.activeEditor && tinymce.activeEditor.uploadImages()
+            return url
+          }
+          return url
+        },
+        images_upload_handler: (blobInfo, success, failure, progress) => {
+          let file
+          if (blobInfo.blob() instanceof File) {
+            console.log('images_upload_handler .File')
+            file = blobInfo.blob()
+          } else {
+            console.log('images_upload_handler .base64')
+            file = _that.base64ToFile(blobInfo.base64(), 'a.png')
+          }
+          const params = new FormData()
+          params.append('file', file)
+          const config = {
+            headers: {
+              'Content-Type': 'multipart/form-data',
+            },
+          }
+          _that.$http
+            .post('/common/fs-upload/rich-editor-image', params, config)
+            .then((res) => {
+              console.log(res)
+              success(res.url)
+            })
+            .catch(() => {
+              failure('上传出错，服务器开小差了呢')
+            })
+        },
+      },
+      contentValue: this.value,
+      markValue: '',
+      srcList: [],
+      psrcList: [],
+      viewerId: 'aglie_rich_editor_' + new Date().getTime(),
+      dialogVisible: false,
+      fullscreenViewerId: 'editor_viewer_' + new Date().getTime(),
+      ImageComponent: null,
+    }
+  },
+  watch: {
+    value: {
+      deep: true,
+      handler(newValue, oldValue) {
+        this.contentValue = newValue
+        this.entity[this.prop] = newValue
+      },
+    },
+    contentValue: {
+      deep: true,
+      handler(newValue, oldValue) {
+        $emit(this, 'update:value', newValue)
+        this.entity[this.prop] = newValue
+      },
+    },
+    disabled: {
+      deep: true,
+      handler(newValue, oldValue) {
+        if (newValue) {
+          this.initViewer()
+        }
+      },
+    },
+  },
+  created() {},
+  mounted() {
+    // if (this.disabled) {
+    //   this.initViewer()
+    // } else {
+    //   tinymce.init(this.init)
+    // }
+  },
+  methods: {
+    showImage($event) {
+      console.log(this.$refs.previewImg)
+      this.srcList = [$event.target.currentSrc]
+      this.$refs.previewImg.showViewer = true
+    },
+    fullScreenContent() {
+      this.dialogVisible = true
+      this.$nextTick(() => {
+        // 必须得再new一个，  不然会导致表单里显示。弹框不显示，弹框显示，表单不显示内容
+        const viewContent = new this.ImageComponent().$mount()
+        document
+          .getElementById(this.fullscreenViewerId)
+          .appendChild(viewContent.$el)
+      })
+    },
+    initViewer() {
+      const that = this
+      let m = this.value.replaceAll('<img', '<img @click="showImage" ')
+      m = '<div> ' + m + ' </div> '
+      this.ImageComponent = {
+        methods: {
+          showImage($event) {
+            console.log($event)
+            that.showImage($event)
+          },
+        },
+        template: m,
+        emits: ['update:value'],
+      }
+      const viewContent = new this.ImageComponent().$mount()
+      this.$nextTick(() => {
+        document.getElementById(this.viewerId).appendChild(viewContent.$el)
+      })
+    },
+    base64ToFile(data, filename) {
+      var bstr = atob(data)
+      var n = bstr.length
+      var u8arr = new Uint8Array(n)
+      filename =
+        new Date().getTime() + '-' + Math.floor(Math.random() * 10000) + '.png'
+      while (n--) {
+        u8arr[n] = bstr.charCodeAt(n)
+      }
+      return new File([u8arr], filename, { type: 'image/png' })
+    },
+  },
+  emits: ['update:value'],
+}
+</script>

package/components/rich-editor/index.vue

@@ -0,0 +1,236 @@
+<template>
+ <main id="sample">
+    <Editor
+      api-key="no-api-key"
+      :init="{
+        plugins: 'lists link image table code help wordcount'
+      }"
+    />
+  </main>
+</template>
+<style scoped>
+.logo {
+  display: block;
+  margin: 0 auto 2rem;
+}
+
+@media (min-width: 1024px) {
+  #sample {
+    display: flex;
+    flex-direction: column;
+    place-items: center;
+    width: 1000px;
+  }
+}
+</style>
+<script>
+import Editor from '@tinymce/tinymce-vue'
+export default {
+  name: 'RichEditor',
+  components: {
+    // Editor,
+  },
+  props: {
+    entity: {
+      type: Object,
+      default: null,
+    },
+    prop: {
+      type: String,
+      default: null,
+    },
+    value: {
+      type: String,
+      default: '',
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    options: {
+      type: Object,
+      default: null,
+    },
+    title: {
+      type: String,
+      default: '',
+    },
+    plugins: {
+      type: [String, Array],
+      default:
+        'paste print preview searchreplace directionality fullscreen image link table hr  advlist lists wordcount  ',
+    },
+    toolbar: {
+      type: [String, Array],
+      default:
+        ' undo redo | formatselect fontsizeselect bold italic strikethrough underline hr forecolor backcolor | image |  ' +
+        '  lineheight   bullist numlist table | print fullscreen  preview  ',
+    },
+  },
+  data() {
+    const _that = this
+    if (getLanguageWithLocale() === 'zh_CN') {
+      require('./langs/zh-Hans.js')
+    }
+    let maxHeight = '400'
+    if (this.options && this.options.maxHeight) {
+      maxHeight = this.options.maxHeight
+    }
+    return {
+      maxHeight,
+      init: {
+        height: maxHeight,
+        language: 'zh-Hans', // 语言类型
+        plugins: this.plugins, // 插件配置
+        toolbar: this.toolbar, // 工具栏配置，设为false则隐藏
+        menubar: false, // 菜单栏配置，设为false则隐藏，不配置则默认显示全部菜单，也可自定义配置--查看 http://tinymce.ax-z.cn/configure/editor-appearance.php --搜索“自定义菜单”
+        fontsize_formats:
+          '12px 14px 16px 18px 20px 22px 24px 28px 32px 36px 48px 56px 72px', // 字体大小
+        font_formats:
+          '微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;', // 字体样式
+        // 自带默认字体：'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,zapf dingbats'
+        lineheight_formats: '0.5 0.8 1 1.2 1.5 1.75 2 2.5 3 4 5', // 行高配置，也可配置成"12px 14px 16px 20px"这种形式
+        placeholder: '在这里输入文字',
+        branding: false, // tiny技术支持信息是否显示
+        resize: false, // 编辑器宽高是否可变，false-否,true-高可变，'both'-宽高均可，注意引号
+        // statusbar: false,  //最下方的元素路径和字数统计那一栏是否显示
+        elementpath: false, // 元素路径是否显示
+        // image_caption: true,
+        // relative_urls: false,  //false: tinymce将不再自动将文件路径由绝对转为相对
+        // convert_urls: false,  //false: tinymce将不再自动处理文件路径
+        // file_picker_callback: () => {
+        //   alert(11)
+        // },
+        image_description: false,
+        content_style: 'img {width:400px;height:300px}', // 直接自定义可编辑区域的css样式
+        // content_css: '/tinycontent.css',  //以css文件方式自定义可编辑区域的css样式，css文件需自己创建并引入
+        // images_upload_url: '/apib/api-upload/uploadimg',  //后端处理程序的url，建议直接自定义上传函数image_upload_handler，这个就可以不用了
+        // images_upload_base_path: '/demo',  //相对基本路径--关于图片上传建议查看--http://tinymce.ax-z.cn/general/upload-images.php
+        paste_data_images: true, // 图片是否可粘贴'
+        urlconverter_callback: (url, node, onSave, name) => {
+          if (node === 'img' && url.startsWith('blob:')) {
+            console.log('urlconverter_callback ....')
+            tinymce.activeEditor && tinymce.activeEditor.uploadImages()
+            return url
+          }
+          return url
+        },
+        images_upload_handler: (blobInfo, success, failure, progress) => {
+          let file
+          if (blobInfo.blob() instanceof File) {
+            console.log('images_upload_handler .File')
+            file = blobInfo.blob()
+          } else {
+            console.log('images_upload_handler .base64')
+            file = _that.base64ToFile(blobInfo.base64(), 'a.png')
+          }
+          const params = new FormData()
+          params.append('file', file)
+          const config = {
+            headers: {
+              'Content-Type': 'multipart/form-data',
+            },
+          }
+          _that.$http
+            .post('/common/fs-upload/rich-editor-image', params, config)
+            .then((res) => {
+              console.log(res)
+              success(res.url)
+            })
+            .catch(() => {
+              failure('上传出错，服务器开小差了呢')
+            })
+        },
+      },
+      contentValue: this.value,
+      markValue: '',
+      srcList: [],
+      psrcList: [],
+      viewerId: 'aglie_rich_editor_' + new Date().getTime(),
+      dialogVisible: false,
+      fullscreenViewerId: 'editor_viewer_' + new Date().getTime(),
+      ImageComponent: null,
+    }
+  },
+  watch: {
+    value: {
+      deep: true,
+      handler(newValue, oldValue) {
+        this.contentValue = newValue
+        this.entity[this.prop] = newValue
+      },
+    },
+    contentValue: {
+      deep: true,
+      handler(newValue, oldValue) {
+        $emit(this, 'update:value', newValue)
+        this.entity[this.prop] = newValue
+      },
+    },
+    disabled: {
+      deep: true,
+      handler(newValue, oldValue) {
+        if (newValue) {
+          this.initViewer()
+        }
+      },
+    },
+  },
+  created() {},
+  mounted() {
+    // if (this.disabled) {
+    //   this.initViewer()
+    // } else {
+    //   tinymce.init(this.init)
+    // }
+  },
+  methods: {
+    showImage($event) {
+      console.log(this.$refs.previewImg)
+      this.srcList = [$event.target.currentSrc]
+      this.$refs.previewImg.showViewer = true
+    },
+    fullScreenContent() {
+      this.dialogVisible = true
+      this.$nextTick(() => {
+        // 必须得再new一个，  不然会导致表单里显示。弹框不显示，弹框显示，表单不显示内容
+        const viewContent = new this.ImageComponent().$mount()
+        document
+          .getElementById(this.fullscreenViewerId)
+          .appendChild(viewContent.$el)
+      })
+    },
+    initViewer() {
+      const that = this
+      let m = this.value.replaceAll('<img', '<img @click="showImage" ')
+      m = '<div> ' + m + ' </div> '
+      this.ImageComponent = {
+        methods: {
+          showImage($event) {
+            console.log($event)
+            that.showImage($event)
+          },
+        },
+        template: m,
+        emits: ['update:value'],
+      }
+      const viewContent = new this.ImageComponent().$mount()
+      this.$nextTick(() => {
+        document.getElementById(this.viewerId).appendChild(viewContent.$el)
+      })
+    },
+    base64ToFile(data, filename) {
+      var bstr = atob(data)
+      var n = bstr.length
+      var u8arr = new Uint8Array(n)
+      filename =
+        new Date().getTime() + '-' + Math.floor(Math.random() * 10000) + '.png'
+      while (n--) {
+        u8arr[n] = bstr.charCodeAt(n)
+      }
+      return new File([u8arr], filename, { type: 'image/png' })
+    },
+  },
+  emits: ['update:value'],
+}
+</script>