admin-frontend/src/components/Editor/index.vue

<!--
 * @Author: Gui
 * @Date: 2023-03-01 19:20:44
 * @LastEditors: guicheng 1625811865@qq.com
 * @LastEditTime: 2024-06-20 15:03:36
 * @Description: kxs files
 * @filePath: 
-->
<script setup lang="ts">
import "@wangeditor/editor/dist/css/style.css"; // 引入 css
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { onBeforeUnmount, ref, shallowRef, onMounted, watch } from "vue";
import Ossupload from "@/utils/OSSupload";

const props = defineProps<{}>();
type Res = {
  url?: string;
  describe?: string;
};
const mode = "default";
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef();

// 内容 HTML
const valueHtml = ref("");
// 模拟异步获取内容
onMounted(() => { });

const toolbarConfig: any = { excludeKeys: "fullScreen" };
const editorConfig = {
  placeholder: "请输入内容...",
  MENU_CONF: {}
};

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value;
  if (editor == null) return;
  editor.destroy();
});

const handleCreated = editor => {
  editorRef.value = editor; // 记录 editor 实例，重要！
};
// 自定义校验图片
function customCheckImageFn(src) {
  // JS 语法
  if (!src) {
    return;
  }
  if (src.indexOf("http") !== 0) {
    return "图片网址必须以 http/https 开头";
  }
  return true;
  // 返回值有三种选择：
  // 1. 返回 true ，说明检查通过，编辑器将正常插入图片
  // 2. 返回一个字符串，说明检查未通过，编辑器会阻止插入。会 alert 出错误信息（即返回的字符串）
  // 3. 返回 undefined（即没有任何返回），说明检查未通过，编辑器会阻止插入。但不会提示任何信息
}
// 转换图片链接
function customParseImageSrc(src) {
  // JS 语法
  if (src.indexOf("http") !== 0) {
    return `http://${src}`;
  }
  return src;
} // 插入图片
editorConfig.MENU_CONF["insertImage"] = {
  onInsertedImage(imageNode) {
    // JS 语法
    if (imageNode == null) return;

    const { src, alt, url, href } = imageNode;
    console.log("inserted image", src, alt, url, href);
  },
  checkImage: customCheckImageFn, // 也支持 async 函数
  parseImageSrc: customParseImageSrc // 也支持 async 函数
};
// 编辑图片
editorConfig.MENU_CONF["editImage"] = {
  // TS 语法
  onUpdatedImage(imageNode) {
    // JS 语法
    if (imageNode == null) return;

    const { src, alt, url } = imageNode;
    console.log("updated image", src, alt, url);
  },
  checkImage: customCheckImageFn, // 也支持 async 函数
  parseImageSrc: customParseImageSrc // 也支持 async 函数
};
// Image
editorConfig.MENU_CONF["uploadImage"] = {
  // 自定义上传
  async customUpload(file, insertFn) {
    Ossupload(file, "KxsAdmin/Editor").then((res: Res) => {
      insertFn(res.url, res.describe);
    });
  }
};
// Video
editorConfig.MENU_CONF["uploadVideo"] = {
  // 自定义上传
  async customUpload(file, insertFn) {
    // JS 语法
    // file 即选中的文件
    // 自己实现上传，并得到视频 url poster
    // 最后插入视频
    Ossupload(file, "KxsAdmin/Video").then((res: Res) => {
      insertFn(res.url, res.describe);
    });
  }
};
defineExpose({
  valueHtml
});
// const buttonclick = function () {
//   const _source = editorRef.value.getText();
//   console.log(_source);
//   editorRef.value.setHtml(_source);
// };
// const buttonclick1 = function () {
//   const _source = editorRef.value
//     .getHtml()
//     .replace(/</g, "&lt;")
//     .replace(/>/g, "&gt;")
//     .replace(/ /g, "&nbsp;");
//   console.log(_source);
//   editorRef.value.setHtml(_source);
// };
</script>
<template>
  <!-- <el-button type="primary" @click="buttonclick">转文字</el-button>
  <el-button type="primary" @click="buttonclick1">转代码</el-button> -->
  <div class="wangeditor">
    <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig" :mode="mode" />
    <Editor style="height: 700px; overflow-y: hidden" v-model="valueHtml" :defaultConfig="editorConfig" :mode="mode"
      @onCreated="handleCreated" />
  </div>
</template>
<style lang="css">
.editor-content-view p,
.editor-content-view li {
  white-space: pre-wrap;
  /* 保留空格 */
}

.editor-content-view blockquote {
  border-left: 8px solid #d0e5f2;
  padding: 10px 10px;
  margin: 10px 0;
  background-color: #f1f1f1;
}

.editor-content-view code {
  font-family: monospace;
  background-color: #eee;
  padding: 3px;
  border-radius: 3px;
}

.editor-content-view pre>code {
  display: block;
  padding: 10px;
}

.editor-content-view table {
  border-collapse: collapse;
}

.editor-content-view td,
.editor-content-view th {
  border: 1px solid #ccc;
  min-width: 50px;
  height: 20px;
}

.editor-content-view th {
  background-color: #f1f1f1;
}

.editor-content-view ul,
.editor-content-view ol {
  padding-left: 20px;
}

.editor-content-view input[type="checkbox"] {
  margin-right: 5px;
}
</style>