vite 使用富文本组件

原创已于 2025-03-25 11:29:29 修改 · 301 阅读

0 ·

CC 4.0 BY-SA版权

柳晓黑胡椒

文章标签：

#javascript #vue.js #前端

于 2023-03-10 14:18:43 首次发布

vue实践专栏收录该内容

24 篇文章

订阅专栏

文章介绍了在Vue项目中安装和使用WangEditor富文本组件的步骤，包括添加依赖、处理字符串转义字符、图片上传功能的自定义实现，以及组件销毁时的内存管理。示例代码展示了编辑器的配置选项和事件监听。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

🚀 个人简介：某大型测绘遥感企业资深Webgis开发工程师，软件设计师(中级)、优快云优质创作者
💟 作者：柳晓黑胡椒❣️
📝 专栏：vue实践
🌈 若有帮助，还请关注 ➕ 点赞➕收藏，不行的话我再努努力💪💪💪

安装依赖
组件
- 注意
效果
参考

安装依赖

yarn add @wangeditor/editor

yarn add @wangeditor/editor-for-vue

wangeditor官网：链接
在这里插入图片描述

组件

注意

js 去掉字符串中的转义字符

str.replace(/[\'\"\\\b\f\n\r\t]/g,“'”)

返给后端的标签，存在请求接口中存在标签，而返回时标签消失的情况，使用编码解码的方式解决

let str = "<p><img src=\"http://10.100.5.201:9300/statics/2023/03/10/image_20230310145308A035.png\" /></p>"
let newStr = str.replace(/[\'\"\\\b\f\n\r\t]/g,"'") 
//   "<p><img src="http://10.100.5.201:9300/statics/2023/03/10/image_20230310145308A035.png" /></p>"

encodeURIComponent(Cert);
decodeURIComponent(Cert)

在这里插入图片描述

//  WangEditor.vue
<!--/**
 * @author: liuk
 * @date: 2023/3/10
 * @describe: 富文本组件
*/-->
<template>
  <div style="border: 1px solid #ccc">
    <!-- 工具栏 -->
    <Toolbar
        :editor="editorRef"
        :defaultConfig="toolbarConfig"
        style="border-bottom: 1px solid #ccc"
        :mode="mode"
    />
    <!-- 编辑器 -->
    <Editor
        :defaultConfig="editorConfig"
        v-model="defaultHtml"
        @onChange="handleChange"
        style="height: 500px; overflow-y: hidden"
        :mode="mode"
        @onCreated="handleCreated"
    />
  </div>
</template>

<script setup lang="ts">
import {onBeforeUnmount, shallowRef, reactive, toRefs, computed} from 'vue';
import {Editor, Toolbar} from '@wangeditor/editor-for-vue';

// API 引用
import {uploadFile} from '@/api/cemetery/cemetery';

const props = defineProps({
  modelValue: {
    type: String,
    default: '',
  },
});

const emit = defineEmits(['update:modelValue']);

// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef();

// 父子组件数据双向绑定
const defaultHtml = computed<string | undefined>({
  get() {
    return props.modelValue;
  },
  set(val) {
    // imgUrl改变时触发修改父组件绑定的v-model的值
    emit('update:modelValue', val);
  },
});

const state = reactive({
  toolbarConfig: {},
  editorConfig: {
    placeholder: '请输入内容...',
    MENU_CONF: {
      uploadImage: {
        // 自定义图片上传
        async customUpload(file: any, insertFn: any) {
          console.log('上传图片');
          uploadFile(file).then((response) => {
            const url = response.data.url;
            insertFn(url);
          });
        },
      },
    },
  },
  mode: 'default',
});

const {toolbarConfig, editorConfig, mode} = toRefs(state);

const handleCreated = (editor: any) => {
  editorRef.value = editor; // 记录 editor 实例，重要！
};

function handleChange(editor: any) {
  emit('update:modelValue', editor.getHtml());
}

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

<style src="@wangeditor/editor/dist/css/style.css"></style>