vue3中使用富文本编译器

#vue中使用富文本编译器

这里我使用的是wangeditor

为了方便使用我对wangeditor进行了一次组件封装

开发过程

1.下载插件

npm i wangeditor

我这里的是4.7.15版本

2.在components下面创建组件wangEditor.vue

组件内容

<template>
  <div style="border: 1px solid #ccc">
    <!-- 创建编辑器容器 -->
    <div id="editorid"></div>
  </div>
</template>
<!-- 使用的vue3 setup的语法糖 -->
<script setup>
import { onMounted, defineModel,watch,defineProps,defineEmits, reactive, ref } from "vue";
// 引入wangeditor
import E from "wangeditor";
//这里的操作是为了使用组件的时候使用v-model绑定数据可以做到数据同步和回显
const editorContent = defineModel();
const editor = ref(null)
defineProps(['modelValue'])
defineEmits(['update:modelValue'])
watch(editorContent,(val)=>{
  if(editor.value){
    editor.value.txt.html(val)
  }
})


onMounted(() => {
  editor.value = new E("#editorid"); //指定一个容器id为div1
  editor.value.create();
   //这里是设置图片的保存格式是base64的格式 否则需要提供图片的上传地址
  editor.value.config.uploadImgShowBase64 = true;
   //这里就是v-moldel绑定的时候设置的初始值
  editor.value.config.onchange = (html) => {
    editorContent.value = html;
  };
});
</script>

3.组件的使用

使用说明

html中

wangEditorVue v-model="valueHtml" />

js中

// 引入组件

import wangEditorVue from "@/components/wangEditor.vue";

let valueHtml = ref("");

示例：

<template>
  <div class="shopSetting">
     <wangEditorVue v-model="formData.product_detail" />
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import wangEditorVue from "@/components/wangEditor.vue";

//这里也可以给它设置初始值
const formData = reactive({
  product_detail:'',
});


</script>