devbox
盐析白兔
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

vue3项目引入富文本编辑器_vue3 富文本编辑器

作者：盐析白兔 | 2024-05-28 01:13:18

赞

踩

vue3 富文本编辑器

一、wangEditor官网地址

https://www.wangeditor.com/

二、安装插件依赖

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

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

三、页面中使用

3.1、template中：

  1. 	<el-form-item label="文本内容:" prop="desc">
  2. 				<!-- 富文本 -->
  3. 		<div style="border: 1px solid #dcdfe6; width: 100%; border-radius: 4px; margin-bottom: 10px">
  4. 					<toolbar
  5. 						style="border-bottom: 1px solid #dcdfe6; width: 100%; border-radius: 4px"
  6. 						:editor="editorRef"
  7. 						:default-config="toolbarConfig"
  8. 						mode="default"
  9. 					/>
  10. 					<editor
  11. 						v-model="ruleForm.desc"
  12. 						style="height: 300px; overflow-y: hidden"
  13. 						:default-config="editorConfig"
  14. 						mode="default"
  15. 						@onCreated="onCreated"
  16. 					/>
  17. 				</div>
  18. 	</el-form-item>

3.2、script标签中引入：

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

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

  1. // 富文本实例对象
  2. const editorRef = shallowRef()
  3. // 菜单配置
  4. const toolbarConfig = ref({})
  5. // 编辑器配置
  6. const editorConfig = ref({
  7.   placeholder: '请输入文本内容...',
  8.   readOnly: false,  // 只读
  9.   MENU_CONF: {
  10.     // 配置上传图片
  11.     uploadImage: {
  12.       server: '#', // 配置图片上传地址
  13.       maxFileSize: 2 * 1024 * 1024, // 10M  图片大小限制
  14.       fieldName: 'multipartFile', // 上传名字
  15.       allowedFileTypes: [], // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
  16.       // 自定义上传参数，传递图片时需要带一些参数过去写在这。参数会被添加到 formData 中，一起上传到服务端。
  17.       // meta: {
  18.       //   image_class_id: "2",
  19.       //   file_type: "1",
  20.       // },
  21.       // 自定义设置请求头，比如添加token之类的
  22.       // headers: {
  23.       //     Accept: 'text/x-json',
  24.       //     otherKey: 'xxx'
  25.       // },
  26.       // 上传进度的回调函数，可以用来显示进度条
  27.       onProgress(progress: any) {
  28.         // progress 是 0-100 的数字
  29.         console.log('progress', progress)
  30.       },
  31.       // // 单个文件上传成功之后
  32.       // onSuccess(file, res) {
  33.       //     console.log(`${file.name} 上传成功`, res)
  34.       // },
  35.  
  36.       // 单个文件上传失败
  37.       onFailed(file: any, res: any) {
  38.         console.log(`${file.name} 上传失败`, res)
  39.       },
  40.  
  41.       // 上传错误，或者触发 timeout 超时
  42.       onError(file: any, err: any, res: any) {
  43.         console.log(`${file.name} 上传出错`, err, res)
  44.       },
  45.  
  46.       // 插入图片到富文本编辑器回显
  47.       customInsert(res: any, insertFn: any) {
  48.         console.log()
  49.         // res 即服务端的返回结果
  50.         getPhotoUrl(res.data[0]).then((res) => {
  51.           const url = res.data
  52.           const alt = ''
  53.           const href = res.data
  54.           // 从 res 中找到 url alt href ，然后插入图片
  55.           insertFn(url, alt, href)
  56.         })
  57.       },
  58.     },
  59.     // 配置上传视频
  60.     uploadVideo: {
  61.       server: '#', // 配置视频上传地址
  62.       maxFileSize: 5 * 1024 * 1024, // 5M  视频大小限制
  63.       fieldName: 'multipartFile', // 上传名字
  64.       // 最多可上传几个文件，默认为 5
  65.       // maxNumberOfFiles: 1,
  66.       allowedFileTypes: [], // 选择文件时的类型限制，默认为 ['video/*'] 。如不想限制，则设置为 []
  67.       // 自定义上传参数，传递图片时需要带一些参数过去写在这。参数会被添加到 formData 中，一起上传到服务端。
  68.       // meta: {
  69.       //   type: 1,
  70.       // },
  71.       // 自定义设置请求头，比如添加token之类的
  72.       // headers: {
  73.       //     Accept: 'text/x-json',
  74.       //     otherKey: 'xxx'
  75.       // },
  76.       // metaWithUrl: false, // 将 meta 拼接到 url 参数中，默认 false
  77.       // withCredentials: true, // 跨域是否传递 cookie ，默认为 false
  78.       // 上传之前触发
  79.       onBeforeUpload(file: any) {
  80.         // file 选中的文件，格式如 { key: file }
  81.         return file
  82.         // 可以 return
  83.         // 1. return file 或者 new 一个 file ，接下来将上传
  84.         // 2. return false ，不上传这个 file
  85.       },
  86.  
  87.       // 上传进度的回调函数，可以用来显示进度条
  88.       onProgress(progress: any) {
  89.         // progress 是 0-100 的数字
  90.         console.log('progress', progress)
  91.       },
  92.  
  93.       // // 单个文件上传成功之后
  94.       onSuccess(file: any, res: any) {
  95.         console.log(`${file.name} 上传成功`, res)
  96.       },
  97.  
  98.       // 单个文件上传失败
  99.       onFailed(file: any, res: any) {
  100.         console.log(`${file.name} 上传失败`, res)
  101.       },
  102.  
  103.       // 上传错误，或者触发 timeout 超时
  104.       onError(file: any, err: any, res: any) {
  105.         console.log(`${file.name} 上传出错`, err, res)
  106.       },
  107.  
  108.       // 插入图片到富文本编辑器回显
  109.       customInsert(res: any, insertFn: any) {
  110.         console.log(res, '视频插入')
  111.         // res 即服务端的返回结果
  112.         // let url = res.data.url;
  113.         // let poster = res.data.poster;
  114.         // 从 res 中找到 url poster ，然后插入
  115.         // 参数url是视频地址，poster是视频封面图片，后端如果不返回，可以考虑写死一个固定的封面图
  116.         getPhotoUrl(res.data[0]).then((res) => {
  117.           const url = res.data
  118.           // 从 res 中找到 url alt href ，然后插入图片
  119.           insertFn(url, '')
  120.         })
  121.       },
  122.     },
  123.   },
  124. })
  125. const onCreated = (editor: any) => {
  126.   editorRef.value = editor
  127.   nextTick(() => {
  128.     editorRef.value = editor // 一定要用 Object.seal() ，否则会报错
  129.   })
  130. }

效果图：

四、修改配置工具

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

全部工具配置信息：

  1. const toolbarConfig = ref({
  2.     "toolbarKeys": [
  3.         "headerSelect",
  4.         "blockquote",
  5.         "|",
  6.         "bold",
  7.         "underline",
  8.         "italic",
  9.         {
  10.             "key": "group-more-style",
  11.             "title": "更多",
  12.             "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>",
  13.             "menuKeys": [
  14.                 "through",
  15.                 "code",
  16.                 "sup",
  17.                 "sub",
  18.                 "clearStyle"
  19.             ]
  20.         },
  21.         "color",
  22.         "bgColor",
  23.         "|",
  24.         "fontSize",
  25.         "fontFamily",
  26.         "lineHeight",
  27.         "|",
  28.         "bulletedList",
  29.         "numberedList",
  30.         "todo",
  31.         {
  32.             "key": "group-justify",
  33.             "title": "对齐",
  34.             "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>",
  35.             "menuKeys": [
  36.                 "justifyLeft",
  37.                 "justifyRight",
  38.                 "justifyCenter",
  39.                 "justifyJustify"
  40.             ]
  41.         },
  42.         {
  43.             "key": "group-indent",
  44.             "title": "缩进",
  45.             "iconSvg": "<svg viewBox=\"0 0 1024 1024\"><path d=\"M0 64h1024v128H0z m384 192h640v128H384z m0 192h640v128H384z m0 192h640v128H384zM0 832h1024v128H0z m0-128V320l256 192z\"></path></svg>",
  46.             "menuKeys": [
  47.                 "indent",
  48.                 "delIndent"
  49.             ]
  50.         },
  51.         "|",
  52.         "emotion",
  53.         "insertLink",
  54.         {
  55.             "key": "group-image",
  56.             "title": "图片",
  57.             "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>",
  58.             "menuKeys": [
  59.                 "insertImage",
  60.                 "uploadImage"
  61.             ]
  62.         },
  63.         {
  64.             "key": "group-video",
  65.             "title": "视频",
  66.             "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>",
  67.             "menuKeys": [
  68.                 "insertVideo",
  69.                 "uploadVideo"
  70.             ]
  71.         },
  72.         "insertTable",
  73.         "codeBlock",
  74.         "divider",
  75.         "|",
  76.         "undo",
  77.         "redo",
  78.         "|",
  79.         "fullScreen"
  80.     ],
  81.     "excludeKeys": [],
  82.     "insertKeys": {
  83.         "index": 0,
  84.         "keys": []
  85.     },
  86.     "modalAppendToBody": false
  87. }
  88. );

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

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

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

  1.  
  2. <div v-html="htmlText"></div>
  3.  
  4.  
  5. const htmlText=ref("富文本内容实例")

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/盐析白兔/article/detail/634960
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号