vue3页面插入富文本编辑器

最新推荐文章于 2024-06-18 22:01:00 发布

萝莉洛伊

最新推荐文章于 2024-06-18 22:01:00 发布

阅读量293

点赞数 8

分类专栏： vue3-富文本编辑器文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_58771326/article/details/138157050

版权

vue3-富文本编辑器专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍了如何在Vue项目中集成WangEditor富文本编辑器，包括基本代码示例、配置文件、自定义图片和视频上传功能，以及组件销毁时的正确处理。

摘要由CSDN通过智能技术生成

因为自己最近写的程序用到类似的编辑器输入，所以查了一圈，大多都看起来很麻烦，也看不到对于我这种笨蛋，所以最后发现一个简单好用的：

一、template部分代码

<!--        富文本编辑器开始-->
        <div style="border: 1px solid #ccc; width: 100%;height: 100%;">
          <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" @customPaste="customPaste" />
 <el-button style="margin: 0 auto" @click="getEditorHTML">发布</el-button>
        </div>
<!--        富文本编辑器结束-->

二、script部分的代码

<script setup>
  import '@wangeditor/editor/dist/css/style.css';
  import { onBeforeUnmount, ref, shallowRef } from 'vue';
// 导入富文本编辑器的组件
  import { Editor, Toolbar } from '@wangeditor/editor-for-vue';

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

// 内容 HTML
  const valueHtml = ref('<p>hello <strong>hello world</strong></p>');
  const toolbarConfig = {};
  const editorConfig = ref({ placeholder: '请输入内容...', MENU_CONF: {} });

// 自定义图片上传
  editorConfig.value.MENU_CONF['uploadImage'] = {
    async customUpload(file, insertFn) {
      console.log('上传图片', file);
      // 将上传的file图片转换为base64
      const base64 = URL.createObjectURL(file);

      // 这里的file为上传的图片对象,insertFn传入
      insertFn(base64, 'img');
    },
  };

// 自定义视频上传
  editorConfig.value.MENU_CONF['uploadVideo'] = {
    // eslint-disable-next-line no-unused-vars
    async customUpload(file, insertFn) {
      console.log('上传视频', file);
    },
  };

// 富文本编辑器生成后触发
  const handleCreated = editor => {
    editorRef.value = editor; // 记录 editor 实例，重要！
    console.log(editorConfig.value.MENU_CONF, 'editorConfig.value');
  };

// 监听富文本编辑器粘贴行为
  const customPaste = (editor, event, callback) => {
    // 获取粘贴的纯文本
    const text = event.clipboardData.getData('text/plain');
    if (text) {
      editor.insertText(text);
      event.preventDefault();
      callback(false);
    }
  };

// 获取富文本html内容
  const getEditorHTML = () => {
    console.log(editorRef.value.getHtml());
  };

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

</script>

最后，自己好好研究一下下，然后在这里留一下，以后说不定会用到勒！