vue3项目引入富文本编辑器

Angus-zoe

已于 2024-03-11 13:53:20 修改

阅读量1.4k

点赞数 18

分类专栏： vue 文章标签： vue.js 前端 javascript

于 2024-01-17 16:01:39 首次发布

本文链接：https://blog.csdn.net/m0_66879773/article/details/135652293

版权

vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一、wangEditor官网地址

https://www.wangeditor.com/

二、安装插件依赖

npm i @wangeditor/editor @wangeditor/editor-for-vue

安装成功后在package-lock.json中可以看到：

三、页面中使用

3.1、template中：

	<el-form-item label="文本内容:" prop="desc">
				<!-- 富文本 -->
		<div style="border: 1px solid #dcdfe6; width: 100%; border-radius: 4px; margin-bottom: 10px">
					<toolbar
						style="border-bottom: 1px solid #dcdfe6; width: 100%; border-radius: 4px"
						:editor="editorRef"
						:default-config="toolbarConfig"
						mode="default"
					/>
					<editor
						v-model="ruleForm.desc"
						style="height: 300px; overflow-y: hidden"
						:default-config="editorConfig"
						mode="default"
						@onCreated="onCreated"
					/>
				</div>
	</el-form-item>

3.2、script标签中引入：

import '@wangeditor/editor/dist/css/style.css'; // css样式
import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
import {nextTick,shallowRef} from "vue"

3.3、创建编辑器实例同样写在script标签里边

// 富文本实例对象
const editorRef = shallowRef()
// 菜单配置
const toolbarConfig = ref({})
// 编辑器配置
const editorConfig = ref({
  placeholder: '请输入文本内容...',
  readOnly: false,  // 只读
  MENU_CONF: {
    // 配置上传图片
    uploadImage: {
      server: '#', // 配置图片上传地址
      maxFileSize: 2 * 1024 * 1024, // 10M  图片大小限制
      fieldName: 'multipartFile', // 上传名字
      allowedFileTypes: [], // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
      // 自定义上传参数，传递图片时需要带一些参数过去写在这。参数会被添加到 formData 中，一起上传到服务端。
      // meta: {
      //   image_class_id: "2",
      //   file_type: "1",
      // },
      // 自定义设置请求头，比如添加token之类的
      // headers: {
      //     Accept: 'text/x-json',
      //     otherKey: 'xxx'
      // },
      // 上传进度的回调函数，可以用来显示进度条
      onProgress(progress: any) {
        // progress 是 0-100 的数字
        console.log('progress', progress)
      },
      // // 单个文件上传成功之后
      // onSuccess(file, res) {
      //     console.log(`${file.name} 上传成功`, res)
      // },
 
      // 单个文件上传失败
      onFailed(file: any, res: any) {
        console.log(`${file.name} 上传失败`, res)
      },
 
      // 上传错误，或者触发 timeout 超时
      onError(file: any, err: any, res: any) {
        console.log(`${file.name} 上传出错`, err, res)
      },
 
      // 插入图片到富文本编辑器回显
      customInsert(res: any, insertFn: any) {
        console.log()
        // res 即服务端的返回结果
        getPhotoUrl(res.data[0]).then((res) => {
          const url = res.data
          const alt = ''
          const href = res.data
          // 从 res 中找到 url alt href ，然后插入图片
          insertFn(url, alt, href)
        })
      },
    },
    // 配置上传视频
    uploadVideo: {
      server: '#', // 配置视频上传地址
      maxFileSize: 5 * 1024 * 1024, // 5M  视频大小限制
      fieldName: 'multipartFile', // 上传名字
      // 最多可上传几个文件，默认为 5
      // maxNumberOfFiles: 1,
      allowedFileTypes: [], // 选择文件时的类型限制，默认为 ['video/*'] 。如不想限制，则设置为 []
      // 自定义上传参数，传递图片时需要带一些参数过去写在这。参数会被添加到 formData 中，一起上传到服务端。
      // meta: {
      //   type: 1,
      // },
      // 自定义设置请求头，比如添加token之类的
      // headers: {
      //     Accept: 'text/x-json',
      //     otherKey: 'xxx'
      // },
      // metaWithUrl: false, // 将 meta 拼接到 url 参数中，默认 false
      // withCredentials: true, // 跨域是否传递 cookie ，默认为 false
      // 上传之前触发
      onBeforeUpload(file: any) {
        // file 选中的文件，格式如 { key: file }
        return file
        // 可以 return
        // 1. return file 或者 new 一个 file ，接下来将上传
        // 2. return false ，不上传这个 file
      },
 
      // 上传进度的回调函数，可以用来显示进度条
      onProgress(progress: any) {
        // progress 是 0-100 的数字
        console.log('progress', progress)
      },
 
      // // 单个文件上传成功之后
      onSuccess(file: any, res: any) {
        console.log(`${file.name} 上传成功`, res)
      },
 
      // 单个文件上传失败
      onFailed(file: any, res: any) {
        console.log(`${file.name} 上传失败`, res)
      },
 
      // 上传错误，或者触发 timeout 超时
      onError(file: any, err: any, res: any) {
        console.log(`${file.name} 上传出错`, err, res)
      },
 
      // 插入图片到富文本编辑器回显
      customInsert(res: any, insertFn: any) {
        console.log(res, '视频插入')
        // res 即服务端的返回结果
        // let url = res.data.url;
        // let poster = res.data.poster;
        // 从 res 中找到 url poster ，然后插入
        // 参数url是视频地址，poster是视频封面图片，后端如果不返回，可以考虑写死一个固定的封面图
        getPhotoUrl(res.data[0]).then((res) => {
          const url = res.data
          // 从 res 中找到 url alt href ，然后插入图片
          insertFn(url, '')
        })
      },
    },
  },
})
const onCreated = (editor: any) => {
  editorRef.value = editor
  nextTick(() => {
    editorRef.value = editor // 一定要用 Object.seal() ，否则会报错
  })
}

效果图：

四、修改配置工具

如果你不需要这么多编辑工具，可以在菜单配置中修改也就是toolbarConfig （步骤3.3中）

全部工具配置信息：

const toolbarConfig = ref({
    "toolbarKeys": [
        "headerSelect",
        "blockquote",
        "|",
        "bold",
        "underline",
        "italic",
        {
            "key": "group-more-style",
            "title": "更多",
            "iconSvg": "<svg viewBox=\"0 0 1024 1024\"><path d=\"M204.8 505.6m-76.8 0a76.8 76.8 0 1 0 153.6 0 76.8 76.8 0 1 0-153.6 0Z\"></path><path d=\"M505.6 505.6m-76.8 0a76.8 76.8 0 1 0 153.6 0 76.8 76.8 0 1 0-153.6 0Z\"></path><path d=\"M806.4 505.6m-76.8 0a76.8 76.8 0 1 0 153.6 0 76.8 76.8 0 1 0-153.6 0Z\"></path></svg>",
            "menuKeys": [
                "through",
                "code",
                "sup",
                "sub",
                "clearStyle"
            ]
        },
        "color",
        "bgColor",
        "|",
        "fontSize",
        "fontFamily",
        "lineHeight",
        "|",
        "bulletedList",
        "numberedList",
        "todo",
        {
            "key": "group-justify",
            "title": "对齐",
            "iconSvg": "<svg viewBox=\"0 0 1024 1024\"><path d=\"M768 793.6v102.4H51.2v-102.4h716.8z m204.8-230.4v102.4H51.2v-102.4h921.6z m-204.8-230.4v102.4H51.2v-102.4h716.8zM972.8 102.4v102.4H51.2V102.4h921.6z\"></path></svg>",
            "menuKeys": [
                "justifyLeft",
                "justifyRight",
                "justifyCenter",
                "justifyJustify"
            ]
        },
        {
            "key": "group-indent",
            "title": "缩进",
            "iconSvg": "<svg viewBox=\"0 0 1024 1024\"><path d=\"M0 64h1024v128H0z m384 192h640v128H384z m0 192h640v128H384z m0 192h640v128H384zM0 832h1024v128H0z m0-128V320l256 192z\"></path></svg>",
            "menuKeys": [
                "indent",
                "delIndent"
            ]
        },
        "|",
        "emotion",
        "insertLink",
        {
            "key": "group-image",
            "title": "图片",
            "iconSvg": "<svg viewBox=\"0 0 1024 1024\"><path d=\"M959.877 128l0.123 0.123v767.775l-0.123 0.122H64.102l-0.122-0.122V128.123l0.122-0.123h895.775zM960 64H64C28.795 64 0 92.795 0 128v768c0 35.205 28.795 64 64 64h896c35.205 0 64-28.795 64-64V128c0-35.205-28.795-64-64-64zM832 288.01c0 53.023-42.988 96.01-96.01 96.01s-96.01-42.987-96.01-96.01S682.967 192 735.99 192 832 234.988 832 288.01zM896 832H128V704l224.01-384 256 320h64l224.01-192z\"></path></svg>",
            "menuKeys": [
                "insertImage",
                "uploadImage"
            ]
        },
        {
            "key": "group-video",
            "title": "视频",
            "iconSvg": "<svg viewBox=\"0 0 1024 1024\"><path d=\"M981.184 160.096C837.568 139.456 678.848 128 512 128S186.432 139.456 42.816 160.096C15.296 267.808 0 386.848 0 512s15.264 244.16 42.816 351.904C186.464 884.544 345.152 896 512 896s325.568-11.456 469.184-32.096C1008.704 756.192 1024 637.152 1024 512s-15.264-244.16-42.816-351.904zM384 704V320l320 192-320 192z\"></path></svg>",
            "menuKeys": [
                "insertVideo",
                "uploadVideo"
            ]
        },
        "insertTable",
        "codeBlock",
        "divider",
        "|",
        "undo",
        "redo",
        "|",
        "fullScreen"
    ],
    "excludeKeys": [],
    "insertKeys": {
        "index": 0,
        "keys": []
    },
    "modalAppendToBody": false
}
);

需要哪个工具你就保留toolbarKeys这个数组对应的元素，看着办就好了，修改好替换掉编辑器菜单配置

五、vue页面显示富文本内容

vue自带显示富文本v-html，例如:


<div v-html="htmlText"></div>


const htmlText=ref("富文本内容实例")