Vue3 +elementUI + wangEditor 富文本编辑器

标签：文本编辑 vue elementUI wangEditor res editor file 上传

哎呀，一个富文本编辑器折腾了我好久啊，刚开始找的就是wangEditor ，但是上传图片的调接口，我就寻思找个简单的，后来换了quill 可以不调接口上传图片，但是v-model绑定不了，而且一直报错，后来换了tinymce,按照网上的教程装完了，wuhu，直接不显示，后来我妥协了，我换回来了wangEditor + 自定义上传图片的方法，有空我一定把另外俩搞出来

首先wangEditor 官网地址：https://www.wangeditor.com/

我用的vue3哈，vue,elementUi 啥都装完了，我就根据官网来了
首先安装插件

npm install @wangeditor/editor --save
npm install @wangeditor/editor-for-vue@next --save

然后在componets里面新建 wangEditor.vue,直接复制就行了

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

<script>
import '@wangeditor/editor/dist/css/style.css' // 引入 css

import { onBeforeUnmount, ref, shallowRef, onMounted } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

export default {
  components: { Editor, Toolbar },
  setup() {
    // 编辑器实例，必须用 shallowRef
    const editorRef = shallowRef()

    // 内容 HTML
    const valueHtml = ref('') 
//  工具栏配置

　　　const toolbarConfig = {excludeKeys: [ 'fullScreen',//不显示全屏 'group-video', // 不显示上传视频 ]}

//菜单配置
    const editorConfig = { 
　　　　placeholder: '请输入内容...',

　　　　　MENU_CONF:{ // 配置默认字号 // 配置上传图片 uploadImage:{ // 上传图片请求接口路径 server: "/api//v1/upload/file", // 后端接收的文件名称 fieldName: "multipartFile", maxFileSize: 10 * 1024 * 1024, // 上传图片10M // 上传的图片类型 allowedFileTypes: ["image/*"], // 小于该值就插入 base64 格式（而不上传），默认为 0 base64LimitSize: 10 * 1024, // 10MB // 自定义上传图片返回格式【后端返回的格式】 customInsert(res, insertFn) { if(res.code != 200 ){ ElMessage.error("上传文件失败，"+res.message) return }

　　　　　　　　    // 从 res 中找到 url alt href ，然后插入图片 ,根据后端实际返回的字段来

insertFn(res.data.url, res.data.alt,res.data.url) }, // 将 meta 拼接到 url 参数中，默认 false metaWithUrl: true, // 单个文件上传成功之后 onSuccess(file, res) { if(res.code == 200){ ElMessage.success(`${file.name} 上传成功`) return }else { ElMessage.warning(`${file.name} 上传出了点异常`) return } // console.log(`${file.name} 上传成功`, res) //ElMessage.success(`${file.name} 上传成功`, res) }, // 单个文件上传失败 onFailed(file, res) { console.log(res) ElMessage.error(`${file.name} 上传失败`) }, // 上传错误，或者触发 timeout 超时 one rror(file, err, res) { console.log(err, res) ElMessage.error(`${file.name} 上传出错`) }, } }



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

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

　　　　// 查看所有工具栏key，先查看可以根据实际情况进项增删　　 console.log(editor.getAllMenuKeys())

    }

    return {
      editorRef,
      valueHtml,
      mode: 'default', // 或 'simple'
      toolbarConfig,
      editorConfig,
      handleCreated
    };
  }
}
</script>

这个就是富文本的组件了，用的时候在页面引用一下index.vue

<template>
  <div id="page">
     <wangEditor />
  </div>
</template>
<script> 
 import  wangEditor from '../../componets/wangEditor.vue'
export default {
  components: {wangEditor},
  setup() {
     
    return {
      
    }
  },
}
</script>

最后的富文本就长这样了，我编辑了一下上传的图片

标签：文本编辑,vue,elementUI,wangEditor,res,editor,file,上传
From： https://www.cnblogs.com/xbxxf/p/16791084.html

Vue3 +elementUI + wangEditor 富文本编辑器

相关文章

赞助商

阅读排行