后台管理页面、菜单配置

zhouwenxuan

2023-11-30 25fa992e12447e535b801da2cc497bdafe0b7b9b

 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,7 +109,7 @@
      [{ color: [] }, { background: [] }],            // 字体颜色、字体背景颜色
      [{ align: [] }],                                // 对齐方式
      ["clean"],                                      // 清除文本格式
      ["link", "image", "video"]                      // 链接、图片、视频
      ["link", "image", "upload"]                      // 链接、图片、视频
    ],
  },
  placeholder: props.readOnly ? "" : "请输入内容",
@@ -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);