@sy-common/wang-editor 1.0.0-beta.2

package/index.js

@@ -0,0 +1,3 @@
+import WangEditor from './src/index.vue'
+export default WangEditor
+export { WangEditor }

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@sy-common/wang-editor",
+  "version": "1.0.0-beta.2",
+  "description": "",
+  "main": "index.js",
+  "author": "lambo",
+  "license": "ISC",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "devDependencies": {
+    "@lambo-design/core": "^4.7.1-beta.140",
+    "@wangeditor-next/editor": "^5.6.0",
+    "@wangeditor-next/editor-for-vue2": "^1.0.2"
+  },
+  "scripts": {
+    "release-upload-file": "pnpm release-beta && git push --follow-tags && pnpm re-publish",
+    "release-major": "standard-version --release-as major",
+    "release-minor": "standard-version --release-as minor",
+    "release-patch": "standard-version --release-as patch",
+    "release-beta": "standard-version --prerelease beta",
+    "re-publish": "pnpm publish --access public --no-git-checks"
+  }
+}

package/src/index.vue

@@ -0,0 +1,189 @@
+<template>
+  <div >
+    <!-- 工具栏 -->
+    <Toolbar
+        :editor="editor"
+        :defaultConfig="toolbarConfig"
+    />
+    <!-- 编辑器 -->
+    <Editor
+        style="height: 400px; overflow-y: hidden;"
+        :defaultConfig="editorConfig"
+        v-model="html"
+        @onChange="onChange"
+        @onCreated="onCreated"
+    />
+  </div>
+</template>
+
+<script>
+import '@wangeditor-next/editor/dist/css/style.css'
+import {oneOf} from '@lambo-design/shared/utils/platform';
+import { Editor, Toolbar  } from '@wangeditor-next/editor-for-vue2'
+
+export default {
+  name: 'WangEditor',
+  components: { Editor, Toolbar },
+  props: {
+    value: {
+      type: String,
+      default: ''
+    },
+    /**
+     * 绑定的值的类型, enum: ['html', 'text']
+     */
+    valueType: {
+      type: String,
+      default: 'html',
+      validator: (val) => {
+        return oneOf(val, ['html', 'text'])
+      }
+    },
+    /**
+     * @description 设置change事件触发时间间隔
+     */
+    changeInterval: {
+      type: Number,
+      default: 200
+    },
+    /**
+     * @description 是否开启本地存储
+     */
+    cache: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * @description 是否使用 base64 保存图片
+     */
+    uploadImgShowBase64: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * 上传图片上下文
+     */
+    ossServerContext: {
+      type: String,
+      default: ''
+    },
+    /**
+     * 上传图片Url地址
+     */
+    ossFilePutUrl: {
+      type: String,
+      default: "/oss/file/put"
+    },
+    /**
+     * 获取图片url地址
+     */
+    ossFileGetImgUrl: {
+      type: String,
+      default: "/oss/file/get/"
+    },
+    /**
+     * @description 是否保留粘贴内容的样式
+     */
+    preservePasteStyle: {
+      type: Boolean,
+      default: false
+    },
+
+  },
+  data() {
+    return {
+      editor: null,
+      html: '',
+      toolbarConfig: {
+        // toolbarKeys: [ /* 显示哪些菜单，如何排序、分组 */ ],
+        // excludeKeys: [ /* 隐藏哪些菜单 */ ],
+      },
+      editorConfig: {
+        placeholder: '请输入内容...',
+        MENU_CONF: {
+
+          uploadImage: {
+            //上传图片配置
+            server: this.ossServerContext+this.ossFilePutUrl, //上传接口地址
+            fieldName: 'file', //上传文件名
+            methods: 'post',
+            metaWithUrl: true, // 参数拼接到 url 上
+            //自定义插入图片
+            customInsert:(res, insertFn)=>{
+              let self = this;
+              const imgInfo = res.data[0] || {}
+              const { fileId, fileName, contentType } = imgInfo
+              insertFn(self.ossServerContext + self.ossFileGetImgUrl + fileId, fileName, self.ossServerContext + self.ossFileGetImgUrl + fileId)
+            } ,
+
+          },
+        }
+      }
+    }
+  },
+  watch: {
+    value: {
+      handler: function (newVal, oldVal) {
+        //  console.log('watch',newVal+"  "+oldVal)
+        if (oldVal === '') {
+          if (this.valueType === 'html') {
+            this.editor.setHtml(newVal)
+          } else {
+            this.editor.insertText(newVal)
+          }
+        }
+      }
+    },
+  },
+  computed: {
+    // editorId() {
+    //   return `editor${this._uid}`
+    // }
+  },
+  methods: {
+
+    onCreated(editor) {
+      this.editor = Object.seal(editor) // 【注意】一定要用 Object.seal() 否则会报错
+      // 如果本地有存储加载本地存储内容
+      let html = this.value
+      if (html) this.editor.setHtml(html)
+    },
+    onChange(editor) {
+      let self = this;
+      let html = this.editor.getHtml()
+      if (html.includes('table')){
+        html = html.replace(/<table /g,'<table class="wangeditor-styled-table" style= "border-collapse: collapse;"');  // 添加边框)
+      }
+      console.log(html)
+      this.$emit('input', self.valueType === 'html' ? html : editor.getText())
+      this.$emit('on-change', html, editor.getText())
+    },
+    customPaste(editor, event, callback) {
+      //console.log('ClipboardEvent 粘贴事件对象', event)
+      const html = event.clipboardData.getData('text/html') // 获取粘贴的 html
+      const text = event.clipboardData.getData('text/plain') // 获取粘贴的纯文本
+      const rtf = event.clipboardData.getData('text/rtf') // 获取 rtf 数据（如从 word wsp 复制粘贴）
+
+      //console.log("customPaste-html",rtf)
+      // 自定义插入内容
+      editor.setHtml(html)
+
+      // 返回 false ，阻止默认粘贴行为
+      event.preventDefault()
+      callback(false) // 返回值（注意，vue 事件的返回值，不能用 return）
+
+      // 返回 true ，继续默认的粘贴行为
+      // callback(true)
+    },
+  },
+  mounted() {
+
+  },
+  beforeDestroy() {
+    const editor = this.editor
+    if (editor == null) return
+    editor.destroy() // 组件销毁时，及时销毁 editor ，重要！！！
+  },
+
+}
+</script>