@lambo-design/wang-editor 1.0.0-beta.8 → 2.0.0-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lambo-design/wang-editor",
-  "version": "1.0.0-beta.8",
+  "version": "2.0.0-beta.2",
   "description": "",
   "main": "index.js",
   "author": "lambo",
@@ -9,12 +9,13 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "dependencies": {
-    "wangeditor": "^3.1.1"
-  },
   "devDependencies": {
-    "@lambo-design/core": "^4.7.1-beta.158",
-    "@lambo-design/shared": "^1.0.0-beta.250"
+    "@lambo-design/shared": "^1.0.0-beta.334",
+    "@lambo-design/core": "^4.7.1-beta.174"
+  },
+  "dependencies": {
+    "@wangeditor/editor": "5.1.23",
+    "@wangeditor/editor-for-vue": "^1.0.2"
   },
   "scripts": {
     "release": "pnpm release-beta && git push --follow-tags && pnpm re-publish",

package/src/index.vue

@@ -1,15 +1,40 @@
 <template>
-  <div class="lambo-wang-editor editor-wrapper">
-    <div :id="editorId"></div>
+  <div style="border: 1px solid #ccc;">
+    <Toolbar
+        style="border-bottom: 1px solid #ccc"
+        :editor="editor"
+        :defaultConfig="toolbarConfig"
+        :mode="mode"
+    />
+    <Editor
+        style="height: 500px; overflow-y: hidden;"
+        v-model="value"
+        :defaultConfig="editorConfig"
+        :mode="mode"
+        @onCreated="onCreated"
+        @customPaste="handlePaste"
+    />
   </div>
 </template>
 
 <script>
 import axios from 'axios';
 import {oneOf} from '@lambo-design/shared/utils/platform';
+import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
 
 export default {
   name: 'LamboWangEditor',
+  components: { Editor, Toolbar },
+  data() {
+    return {
+      editor: null,
+      toolbarConfig: {},
+      editorConfig: {
+        placeholder: '请输入内容...',
+        zIndex: 999
+      },
+    }
+  },
   props: {
     value: {
       type: String,
@@ -67,129 +92,143 @@ export default {
       type: String,
       default: "/oss/file/get/"
     },
+    /**
+     * @description 是否保留粘贴内容的样式
+     */
+    preservePasteStyle: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * @description 模式, enum: ['default', 'simple']
+     */
+    mode: {
+      type: String,
+      default: 'default',
+      validator: (val) => {
+        return oneOf(val, ['default', 'simple'])
+      }
+    },
+    /**
+     * @description 排除菜单组，写菜单组 key 的值即可
+     */
+    excludeKeys: {
+      type: Array,
+      default: []
+    }
 
   },
-  computed: {
-    editorId() {
-      return `editor${this._uid}`
-    }
+  watch: {
+    value: {
+      handler: function (newVal, oldVal) {
+        if (oldVal === '' && this.editor) {
+          if (this.valueType === 'html') {
+            this.editor.setHtml(newVal);
+          } else {
+            // 如果是文本模式，也需要转换为 HTML 格式
+            this.editor.setHtml(`<p>${newVal}</p>`);
+          }
+        }
+      }
+    },
   },
   methods: {
-    setHtml(val) {
-      this.editor.txt.html(val)
-    }
+    onCreated(editor) {
+      this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
+    },
+    handlePaste(editor, event, callback) {
+      if (this.preservePasteStyle) {
+        // 保留源格式的处理
+        const html = event.clipboardData.getData('text/html')
+        if (html) {
+          // 插入带格式的HTML
+          editor.setHtml(html)
+        } else {
+          // 没有HTML内容时回退到纯文本
+          editor.insertText(event.clipboardData.getData('text/plain'))
+        }
+      } else {
+        // 不保留格式，强制转为纯文本
+        editor.insertText(event.clipboardData.getData('text/plain'))
+      }
+
+      // 阻止默认行为
+      event.preventDefault()
+      callback(false)
+    },
   },
   mounted() {
-    let self = this;
-    const Editor = require('wangeditor')
-    self.editor = new Editor(`#${this.editorId}`)
-    self.editor.customConfig.onchange = (html) => {
-      let text = self.editor.txt.text()
-      if (self.cache) localStorage.editorCache = html
-      this.$emit('input', self.valueType === 'html' ? html : text)
-      this.$emit('on-change', html, text)
-    }
+    // 如果仅仅想排除掉某些菜单，其他都保留，可以使用 excludeKeys 来配置。可通过 toolbar.getConfig().toolbarKeys 查看工具栏的默认配置
+    this.toolbarConfig.excludeKeys = this.excludeKeys
 
-    // 删除粘贴内容的样式
-    self.editor.customConfig.pasteFilterStyle = false
-    // 设置触发事件间隔
-    self.editor.customConfig.onchangeTimeout = this.changeInterval
+    this.editorConfig.MENU_CONF['uploadImage'] = {
+      // base64 限制大小，小于该值就插入 base64 格式（而不上传），默认为 0
+      base64LimitSize: this.uploadImgShowBase64 ? 5 * 1024 * 1024 : 0,
 
-    self.editor.customConfig.zIndex = 999
+      async customUpload(files, insertFn) {
+        const formData = new FormData();
+        for (const file of files) {
+          formData.append('file', file);
+        }
+        try {
+          const response = await axios.post(
+              this.ossServerContext + this.ossFilePutUrl,
+              formData
+          );
 
-    // 配置debug模式
-    self.editor.customConfig.debug = true
-    // 隐藏“网络图片”tab
-    self.editor.customConfig.showLinkImg = false
-    // 使用 base64 保存图片
-    self.editor.customConfig.uploadImgShowBase64 = self.uploadImgShowBase64
-    // 上传图片到服务器
-    // this.editor.customConfig.uploadImgServer = config.ossServerContext + "/file/wangeditor/put"
-    //
-    self.editor.customConfig.uploadImgHeaders = {
-      // 'Accept': 'multipart/form-data, text/plain, */*',
-      // 'enctype':'multipart/form-data'
-      // =""
+          if (response.data.code == "1") {
+            const result = response.data.data;
+            const imageList = result.map(item => ({
+              url: this.ossServerContext + this.ossFileGetImgUrl + item.fileId,
+              alt: item.fileName
+            }));
+            // 循环插入每张图片
+            imageList.forEach(imageData => {
+              insertFn(imageData.url, imageData.alt, imageData.url);
+            });
+          }
+        } catch (error) {
+          console.error('图片上传失败:', error);
+        }
+      }
+      // 其他图片上传配置...
+      // 注意：不需要修改的配置可以省略，wangEditor 会自动合并默认配置
     }
-    let ossServer = this.ossServerContext;
-    self.editor.customConfig.customUploadImg = function (files, insert) {
-      let formData = new FormData();
-      for (let file of files) {
-        formData.append('file', file);
+
+    this.editorConfig.onChange = (editor) => {
+      const html = editor.getHtml();
+      const text = editor.getText();
+      if (this.cache) {
+        localStorage.editorCache = html;
       }
-      // files 是 input 中选中的文件列表
-      // insert 是获取图片 url 后，插入到编辑器的方法
-      axios.post(ossServer + self.ossFilePutUrl, formData).then(response => {
-        if (response.data.code == "1") {
-          var result = response.data.data;
-          // 上传代码返回结果之后，将图片插入到编辑器中
-          let imgUrl = []
-          result.forEach(item => {
-            insert(ossServer + self.ossFileGetImgUrl + item.fileId)
-            // imgUrl.push()
-          })
+      this.$emit('input', this.valueType === 'html' ? html : text);
+      this.$emit('on-change', html, text);
+    }
 
+    this.editorConfig.MENU_CONF['insertLink'] = {
+      checkLink: (text, link) => {
+        if (!/^https?:\/\/[^\s/$.?#].[^\s]*$/.test(link)) {
+          return '链接格式不正确，请输入有效的HTTP/HTTPS地址';
         }
-      })
-
-
-    }
-    // 自定义菜单配置
-    self.editor.customConfig.menus = [
-      'head',  // 标题
-      'bold',  // 粗体
-      'fontSize',  // 字号
-      'fontName',  // 字体
-      'italic',  // 斜体
-      'underline',  // 下划线
-      'strikeThrough',  // 删除线
-      'foreColor',  // 文字颜色
-      'backColor',  // 背景颜色
-      'link',  // 插入链接
-      'list',  // 列表
-      'justify',  // 对齐方式
-      'quote',  // 引用
-      // 'emoticon',  // 表情
-      'image',  // 插入图片
-      'table',  // 表格
-      'video',  // 插入视频
-      'code',  // 插入代码
-      'undo',  // 撤销
-      'redo'  // 重复
-    ]
-    // 自定义配置颜色（字体颜色、背景色）
-    self.editor.customConfig.colors = [
-      '#000000',
-      '#eeece0',
-      '#1c487f',
-      '#4d80bf',
-      '#c24f4a',
-      '#8baa4a',
-      '#7b5ba1',
-      '#46acc8',
-      '#f9963b',
-      '#ffffff'
-    ]
-    self.editor.customConfig.pasteTextHandle = function (content) {
-      // content 即粘贴过来的内容（html 或 纯文本），可进行自定义处理然后返回
-      if (content == '' && !content) return ''
-      var str = content
-      str = str.replace(/<xml>[\s\S]*?<\/xml>/ig, '')
-      str = str.replace(/<style>[\s\S]*?<\/style>/ig, '')
-      str = str.replace(/<\/?[^>]*>/g, '')
-      str = str.replace(/[ | ]*\n/g, '\n')
-      // str = str.replace(/&nbsp;/ig, '')
-      return str
+        if (link.includes('javascript:')) {
+          return '禁止使用javascript协议';
+        }
+        return true;
+      }
     }
 
-    // create这个方法一定要在所有配置项之后调用
-    self.editor.create()
-    // 如果本地有存储加载本地存储内容
-    let html = self.value || localStorage.editorCache
-
+    // 加载本地存储内容或传入的 value
+    const htmlCache = this.value || localStorage.getItem('editorCache');
 
-    if (html) self.editor.txt.html(html)
-  }
+    if (html) {
+      editor.setHtml(htmlCache);
+    }
+  },
+  beforeDestroy() {
+    const editor = this.editor
+    if (editor == null) return
+    editor.destroy() // 组件销毁时，及时销毁编辑器
+  },
 }
 </script>