使用tinymce富文本

zhouwenxuan

2023-12-08 b7143b51f3a50b6fac9c139d291c1fad017daee6

 src/components/Editor/index.vue

@@ -33,8 +33,30 @@

const { proxy } = getCurrentInstance();

import{ Quill } from 'vue-quill-editor';
// 自定义插入a链接
var Link = Quill.import('formats/link');
class FileBlot extends Link {  // 继承Link Blot
    static create(value) {
        let node = undefined
        if (value&&!value.href){  // 适应原本的Link Blot
            node = super.create(value);
        }
        else{  // 自定义Link Blot
            node = super.create(value.href);
            // node.setAttribute('download', value.innerText);  // 左键点击即下载
            node.innerText = value.innerText;
            node.download = value.innerText;
        }
        return node;
    }
}
FileBlot.blotName = 'link';
FileBlot.tagName = 'A';
Quill.register(FileBlot);

const quillEditorRef = ref();
const uploadUrl = ref(import.meta.env.VITE_APP_BASE_API + "/common/upload"); // 上传的图片服务器地址
const uploadUrl = ref(import.meta.env.VITE_APP_BASE_API + "/system/common/uploadFile"); // 上传的图片服务器地址
const headers = ref({
  Authorization: "Bearer " + getToken()
});
@@ -87,10 +109,10 @@
      [{ color: [] }, { background: [] }],            // 字体颜色、字体背景颜色
      [{ align: [] }],                                // 对齐方式
      ["clean"],                                      // 清除文本格式
      ["link", "image", "video"]                      // 链接、图片、视频
      ["link", "image", "upload"]                      // 链接、图片、视频
    ],
  },
  placeholder: "请输入内容",
  placeholder: props.readOnly ? "" : "请输入内容",
  readOnly: props.readOnly
});

@@ -108,7 +130,7 @@
const content = ref("");
watch(() => props.modelValue, (v) => {
  if (v !== content.value) {
    content.value = v === undefined ? "<p></p>" : v;
    content.value = (v === undefined || v === "") ? "<p></p>" : v;
  }
}, { immediate: true });

@@ -156,6 +178,7 @@
    // 获取光标位置
    let length = quill.selection.savedRange.index;
    // 插入图片，res.url为服务器返回的图片链接地址

    quill.insertEmbed(length, "image", import.meta.env.VITE_APP_BASE_API + res.fileName);
    // 调整光标到最后
    quill.setSelection(length + 1);