wangEditor5 富文本编辑器基于 vue3、Nuxt3

这是官方dome: https://www.wangeditor.com/demo/index.html

使用这个插件会遇到的一些问题 已解决：

1.使用5.1.23的最新的话：视频尺寸编辑会有问题

2.setHtml 不可以设置值 提示不存在 上传图片 上传视频

3.刷新页面 编辑器数据不存在

这篇文章主要讲一下创建 引入 图片上传 粘贴 视频上传等

在项目中安装

yarn安装
    yarn add @wangeditor/editor
    yarn add @wangeditor/editor-for-vue@next
npm 安装
    npm install @wangeditor/editor
    npm install @wangeditor/editor-for-vue@next

这里我是通过创建组件来使用 你们也可以直接在想要的页面直接引入就好

这个是部分代码截图：

 第一步：首先创建一个组件wangeditor.vue

这里讲一下vue3和nuxt引入 我们除了引入不同 其他的都是一样的 我们在wangeditor.vue组件里面引入wangeditor

vue3的引入方法：

        import "@wangeditor/editor/dist/css/style.css";

        import { Editor, Toolbar} from '@wangeditor/editor-for-vue'

Nuxt的引入方法： 因为在Nuxt中是分服务端跟客户端的所以这里我们需要判断一下

方法1：       

 if (process.client) {

                const { Editor, Toolbar } = await import("@wangeditor/editor-for-vue");

        }

方法2：在父组件使用

 <ClientOnly>

        <h-wangeditor />

 </ClientOnly>

 然后再子组件就可以用vue3的引入方式了

wangeditor.vue组件代码：

vue3引入：

<template>
  <div class="py-5px">
    <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig" mode="default" />
    <Editor style="height: 500px; overflow-y: hidden" v-model="valueHtml" :defaultConfig="editorConfig" mode="default" @onCreated="handleCreated" />
  </div>
</template>

<script setup>
import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
import "@wangeditor/editor/dist/css/style.css"; // 引入 css
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";

const editorRef = shallowRef(); // 编辑器实例，必须用 shallowRef
const valueHtml = ref("<p>hello</p>"); // 内容 HTML
// 模拟 ajax 异步获取内容
onMounted(() => {
  setTimeout(() => {
    valueHtml.value = "<p>模拟 Ajax 异步设置内容</p>";
  }, 1500);
});
const toolbarConfig = {};
const editorConfig = { placeholder: "请输入内容..." };
// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value;
  if (editor == null) return;
  editor.destroy();
});
const handleCreated = (editor) => {
  editorRef.value = editor; // 记录 editor 实例，重要！
};
</script>

Nuxt3引入：

<template>
  <div class="py-5px">
    <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig" mode="default" />
    <Editor style="height: 500px; overflow-y: hidden" v-model="valueHtml" :defaultConfig="editorConfig" mode="default" @onCreated="handleCreated" />
  </div>
</template>

<script setup>
import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
import "@wangeditor/editor/dist/css/style.css"; // 引入 css
if (process.client) {
  const { Editor, Toolbar } = await import("@wangeditor/editor-for-vue");
}
const editorRef = shallowRef(); // 编辑器实例，必须用 shallowRef
const valueHtml = ref("<p>hello</p>"); // 内容 HTML
// 模拟 ajax 异步获取内容
onMounted(() => {
  setTimeout(() => {
    valueHtml.value = "<p>模拟 Ajax 异步设置内容</p>";
  }, 1500);
});
const toolbarConfig = {};
const editorConfig = { placeholder: "请输入内容..." };
// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value;
  if (editor == null) return;
  editor.destroy();
});
const handleCreated = (editor) => {
  editorRef.value = editor; // 记录 editor 实例，重要！
};
</script>

以上就能够展示富文本编辑器出来来 自己去想要的页面引入一下就好了

然后就讲一下图片上传粘贴这些怎么配置 ：没什么改变就是 加了上传图片跟视频的配置 然后就可以粘贴这些都没问题了

<template>
  <div class="py-5px">
    <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig" mode="default" />
    <Editor style="height: 500px; overflow-y: hidden" v-model="valueHtml" :defaultConfig="editorConfig" mode="default" @onCreated="handleCreated" />
  </div>
</template>

<script setup>
import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
import "@wangeditor/editor/dist/css/style.css"; // 引入 css
if (process.client) {
  const { Editor, Toolbar } = await import("@wangeditor/editor-for-vue");
}
const editorRef = shallowRef(); // 编辑器实例，必须用 shallowRef
const valueHtml = ref("<p>hello</p>"); // 内容 HTML
// 模拟 ajax 异步获取内容
onMounted(() => {
  setTimeout(() => {
    valueHtml.value = "<p>模拟 Ajax 异步设置内容</p>";
  }, 1500);
});
const toolbarConfig = {};
const editorConfig = {  MENU_CONF: {}};
/**
 * @上传图片
 */
 editorConfig.MENU_CONF["uploadImage"] = {
  // 上传图片的配置
  server: "这里是上传图片的地址",
  fieldName: "image", //这个是参数名字
  headers: { //配置token 接口需要就配 不需要就不用
    Authorization: "Bearer asdfhaohfvdsnvshf",
  },
  customInsert(res, insertFn) {这个是获取接口返回的数据
    insertFn(res.data.url); // 从 res 中找到 url（也就是接口返回的图片地址），然后插入图片
  },
};

/**
 * @上传视频
 */
 editorConfig.MENU_CONF["uploadVideo"] = {
  server: "这里是上传图片的地址", //上传图片的请求地址
  fieldName: "image", //这个是参数名字
  headers: {//配置token 接口需要就配 不需要就不用
    Authorization: "Bearer asdfhaohfvdsnvshf",
  },
  customInsert(res, insertFn) { 这个是获取接口返回的数据
    insertFn(res.data.url); // 从 res 中找到（也就是接口返回的图片地址），然后插入图片
  },
};
// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value;
  if (editor == null) return;
  editor.destroy();
});
const handleCreated = (editor) => {
  editorRef.value = editor; // 记录 editor 实例，重要！
};
</script>

现在就可以实现基本的富文本需求了 自己创建一个dome试一下 流程走通了 大概了解了在 丢进项目 不然报错一大堆 然后找bug就找一天  如果有什么其他的问题欢迎提问~~~

wangeditor 在nuxt3中 第一次进入回显正常 刷新 或者第二次进去 就会报setHtml不存在 当时花了一周的时间去找这个问题 最后还是没用它这个方法 直接改成dangerouslyInsertHtml这个方法去回显html值

1.视频编辑尺寸不显示 请把版本降级 我是降级到了5.1.12版本

2.setHtml方法不存在 我们使用  

//这里我过滤了一下 因为每次进入编辑器 首位都会自动添加回车 不过滤就会越加越多

const valueHtml = computed({
  get() {
    //这里我过滤了一下 因为每次进入编辑器 首位都会自动添加回车 不过滤就会越加越多
    return props.content.replace(/<p><br><\/p>/g, "");
  },
  set(value) {
    emit("on-html", value);
  },
});

3.刷新页面数据不存在 也是跟2一样