vue3 wangEditor

D、赞

已于 2022-10-13 13:20:58 修改

阅读量2.2k

点赞数

文章标签： vue.js javascript 前端

于 2022-08-31 17:14:24 首次发布

本文链接：https://blog.csdn.net/qq_40734853/article/details/126627004

版权

1.首先去安装，这里使用npm下载依赖，vue2和vue3下载的版本不同

vue2（@wangeditor/editor-for-vue）

vue3（@wangeditor/editor-for-vue@next）

2.创建index.vue，引入编辑器

import "@wangeditor/editor/dist/css/style.css"; // 引入 css
import { Editor, Toolbar } from "@wangeditor/editor-for-vue"；//编辑器

html部分


 <Toolbar
      class="toolbar"
      :editor="editorRef"
      :defaultConfig="toolbarConfig"
      :mode="mode"
  />
  <Editor
      class="editor"
      v-model="valueHtml"
      :defaultConfig="editorConfig"
      @onCreated="handleCreated"
      :mode="mode"
  />

注意：toolbarConfig 不配置时，工具栏为默认配置

// 编辑器内容 
const valueHtml = ref("<p>hello</p>");
 //工具栏
const toolbarConfig = {};
//配置项
const editorConfig = {placeholder: "请输入内容...",};

目前操作，编辑器就生成了，如下图：

3.编辑器实例

注意：编辑器实例，必须用 shallowRef

import {shallowRef,} from "vue";//vue3引入
const editorRef = shallowRef();
// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value;
  if (editor == null) return;
  editor.destroy();
});

4.工具栏配置

（1）查询编辑器注册的所有菜单 key （可能有的不在工具栏上）

import { createEditor } from "@wangeditor/editor";//查看工具栏
const editor = createEditor({});
console.log(editor.getAllMenuKeys(), "工具栏");

打印出配置项的各个key（2）toolbarKeys

重新配置工具栏，显示哪些菜单，以及菜单的排序、分组。

const toolbarConfig = {
   toolbarKeys:[
      // 菜单 key
    'headerSelect',
    // 分割线
    '|',
    // 菜单 key
    'bold', 'italic',
    // 菜单组，包含多个菜单
    {
        key: 'group-more-style', // 必填，要以 group 开头
        title: '更多样式', // 必填
        iconSvg: '<svg>....</svg>', // 可选
        menuKeys: ["through", "code", "clearStyle"] // 下级菜单 key ，必填
    },
    // 继续配置其他菜单...
  ]
};

（3） excludeKeys

如果仅仅想排除掉某些菜单，其他都保留，可以使用 excludeKeys 来配置。

const toolbarConfig = {
   excludeKeys = [
    'headerSelect',
    'italic',
    'group-more-style' // 排除菜单组，写菜单组 key 的值即可
  ]
};

4.自定义上传图片的配置

上传本地图片到后端，后端返回图片地址，在插入编辑器中

const editorConfig = {
  placeholder: "请输入内容...",
  MENU_CONF: {
    uploadImage: {
      //上传图片配置
      server: baseUrl + "/microsoft/api/v1/plane/messageTemplate/uploadImage", //上传接口地址
      fieldName: "file", //上传文件名
      methods: "post",
      // timeout: 5 * 1000, // 5s
      // meta: { token: "xxx", a: 100 },
      metaWithUrl: true, // 参数拼接到 url 上
      // headers: { Accept: "text/x-json" },
      maxFileSize: 10 * 1024 * 1024, // 10M
      // base64LimitSize: 5 * 1024, // 5kb 以下插入 base64
      onBeforeUpload(files: any) {
        if (files.extension == "svg") {
          globalProperties.$message.info("不支持此格式图片");
          return false; // 返回哪些文件可以上传 会阻止上传
        }
      },
      onProgress(progress: any) {
        console.log("onProgress", progress);
      },
      onSuccess(file: any, res: any) {
        console.log("onSuccess", file, res);
      },
      onFailed(file: any, res: any) {
        console.log("onFailed", file, res);
      },
      onError(file: any, err: any, res: any) {
        console.error("onError", file, err, res);
      },

      // // 用户自定义插入图片
      customInsert(res: any, insertFn: any) {
        const imgInfo = res || {};
        //data为后端返回的图片地址
        const { data } = imgInfo;
        if (!data) throw new Error(`Image url is empty`);
        // 自己插入图片
        insertFn(data);
      },
    },
  },
};

5.预览编辑器的html内容

 <div v-html="lookContent" class="content-text"></div>
  let lookContent=ref("<div>有内容</div>")//定义数据

注意：这里将预览的框大小设置为A4纸的尺寸，宽为21cm，高可以自行设置，而且预览时浏览器将图片解析为文本，也就是行内元素，所以图片的格式不生效，只需要将图片设置为inline-block行内块元素。

.content-text {
  width: 21cm;
  height: 690px;
  overflow-y: auto;
  img {
     display: inline-block;
      }
 }

6.将编辑的内容html转换为doc和docx格式的文档

（1）下载成doc格式

let header = `<html><body>${valueHtml.value}</body></html>`;
let source ="data:application/vnd.ms-word;charset=utf-8," +encodeURIComponent(header);
let fileDownload = document.createElement("a");
document.body.appendChild(fileDownload);
fileDownload.href = source;
fileDownload.download = "文件.doc";
fileDownload.click();
document.body.removeChild(fileDownload);

（2）下载成docx格式

注意：html-docx-js不支持目前的主流框架，直接安装npm install html-docx-js-typescript --save就可以

npm  i file-saver  --save
npm  i html-docx-js-typescript --save
import { saveAs } from "file-saver";
import { asBlob } from "html-docx-js-typescript";

const htmlString = `<!DOCTYPE html>
                    <html lang="en"><head><meta charset="UTF-8"> 
                    <title>Document</title></head>
                    <body>${valueHtml.value}</body>
                    </html>`;
const fileData = asBlob(htmlString).then((data: any) => {
          saveAs(data, "文件.docx"); // 保存为docx文件
});