devbox
爱喝兽奶帝天荒
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

vue+element-ui 富文本编辑器_element 富文本编辑器

作者：爱喝兽奶帝天荒 | 2024-07-26 06:15:55

赞

踩

element 富文本编辑器
  1. npm install vue-quill-editor --save
  2. npm install quill-image-drop-module --save     
  3. npm install quill-image-resize-module --save

 2.在组件下面新增组件 QlEditor

3.index.vue

  1. <template>
  2.   <div>
  3.     <div id='quillEditorQiniu'>
  4.       <!-- 基于elementUi的上传组件 el-upload begin-->
  5.       <el-upload
  6.         class="avatar-uploader"
  7.         :action="uploadImgUrl"
  8.         :accept="'image/*,video/*'"
  9.         :show-file-list="false"
  10.         :on-success="uploadEditorSuccess"
  11.         :on-error="uploadEditorError"
  12.         :before-upload="beforeEditorUpload"
  13.         :headers="headers">
  14.       </el-upload>
  15.       <!-- 基于elementUi的上传组件 el-upload end-->
  16.       <quill-editor
  17.         class="editor"
  18.         v-model="content"
  19.         ref="customQuillEditor"
  20.         :options="editorOption"
  21.         @blur="onEditorBlur($event)"
  22.         @focus="onEditorFocus($event)"
  23.         @change="onEditorChange($event)"
  24.       >
  25.       </quill-editor>
  26.     </div>
  27.   </div>
  28. </template>
  29.  
  30. <script>
  31. import Vue from 'vue'
  32. import { Quill } from 'vue-quill-editor'
  33. import { ImageDrop } from 'quill-image-drop-module'
  34. import ImageResize from 'quill-image-resize-module'
  35. Quill.register('modules/imageDrop', ImageDrop)
  36. Quill.register('modules/imageResize', ImageResize)
  37.  
  38.  
  39. // //引入quill-editor编辑器
  40. // import VueQuillEditor from 'vue-quill-editor'
  41. // import 'quill/dist/quill.core.css'
  42. // import 'quill/dist/quill.snow.css'
  43. // import 'quill/dist/quill.bubble.css'
  44. // Vue.use(VueQuillEditor)
  45.  
  46. // //实现quill-editor编辑器拖拽上传图片
  47. // import Quill from 'quill'
  48. // import { ImageDrop } from 'quill-image-drop-module'
  49. // Quill.register('modules/imageDrop', ImageDrop)
  50.  
  51. // //实现quill-editor编辑器调整图片尺寸
  52. // import ImageResize from 'quill-image-resize-module'
  53. // Quill.register('modules/imageResize', ImageResize)
  54.  
  55. // 这里引入修改过的video模块并注册
  56. import Video from './video'
  57. Quill.register(Video, true)
  58.  
  59. //获取登录token，引入文件，如果只是简单测试，没有上传文件是否登录的限制的话，
  60. //这个token可以不用获取，文件可以不引入，把上面对应的上传文件携带请求头  :headers="headers" 这个代码删掉即可
  61. import {getToken} from "@/utils/auth";
  62.  
  63. const toolbarOptions = [
  64.   ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
  65.   ['blockquote', 'code-block'],
  66.   [{'header': 1}, {'header': 2}],               // custom button values
  67.   [{'list': 'ordered'}, {'list': 'bullet'}],
  68.   [{'script': 'sub'}, {'script': 'super'}],      // superscript/subscript
  69.   [{'indent': '-1'}, {'indent': '+1'}],          // outdent/indent
  70.   [{'direction': 'rtl'}],                         // text direction
  71.   [{'size': ['small', false, 'large', 'huge']}],  // custom dropdown
  72.   [{'header': [1, 2, 3, 4, 5, 6, false]}],
  73.   [{'color': []}, {'background': []}],          // dropdown with defaults from theme
  74.   [{'font': []}],
  75.   [{'align': []}],
  76.   ['link', 'image', 'video'],
  77.   ['clean']                                         // remove formatting button
  78. ];
  79. export default {
  80.   name:"QlEditor",
  81.   props: {
  82.     /* 编辑器的内容 */
  83.     value: {
  84.       type: String,
  85.       default: "",
  86.     },
  87.     /* 高度 */
  88.     height: {
  89.       type: Number,
  90.       default: null,
  91.     },
  92.     /* 最小高度 */
  93.     minHeight: {
  94.       type: Number,
  95.       default: null,
  96.     },
  97.     /* 只读 */
  98.     readOnly: {
  99.       type: Boolean,
  100.       default: false,
  101.     },
  102.     /* 上传文件大小限制(MB) */
  103.     fileSize: {
  104.       type: Number,
  105.       default: 5,
  106.     },
  107.   },
  108.   model: {
  109.     //v-model本质上是一个语法糖 这一步在父组件中可使用v-model
  110.     prop: "value",
  111.     event: "change",
  112.   },
  113.   data(){
  114.     return {
  115.       headers: {
  116.         Authorization: "Bearer " + getToken(),
  117. 		token: getToken()
  118.       },
  119.       uploadImgUrl:process.env.VUE_APP_BASE_API + "/admin/article/uploadFile",
  120.       uploadUrlPath:"没有文件上传",
  121.       quillUpdateImg:false,
  122.       content:'',    //最终保存的内容
  123.       editorOption:{
  124.         placeholder:'请输入内容',
  125.         modules: {
  126.           imageResize: {
  127.             displayStyles: {
  128.               backgroundColor: 'black',
  129.               border: 'none',
  130.               color: 'white'
  131.             },
  132.             modules: [ 'Resize', 'DisplaySize', 'Toolbar' ]
  133.           },
  134.           toolbar: {
  135.             container: toolbarOptions,  // 工具栏
  136.             handlers: {
  137.               'image': function (value) {
  138.                 if (value) {
  139.                   document.querySelector('#quillEditorQiniu .avatar-uploader input').click()
  140.                 } else {
  141.                   this.quill.format('image', false);
  142.                 }
  143.               },
  144.               'video': function (value) {
  145.                 if (value) {
  146.                   document.querySelector('#quillEditorQiniu .avatar-uploader input').click()
  147.                 } else {
  148.                   this.quill.format('video', false);
  149.                 }
  150.               },
  151.             }
  152.           }
  153.         }
  154.       },
  155.     }
  156.   },
  157.   methods:{
  158.     //上传图片之前async
  159.     beforeEditorUpload(res, file){
  160.       //显示上传动画
  161.       this.quillUpdateImg = true;
  162.       //  const res1 = await uploadImage()
  163.       // console.log(res1,'=====');
  164.       // this.$emit('before',res, file)
  165.       console.log(res);
  166.       console.log(file);
  167.     },
  168.     // 上传图片成功
  169.     uploadEditorSuccess(res, file) {
  170. 		console.log('res11',res);
  171.       console.log('file22',file);
  172.       //拼接出上传的图片在服务器的完整地址
  173.       let url=res.url;
  174.       let type=url.substring(url.lastIndexOf(".")+1);
  175.       // 获取富文本组件实例
  176.       let quill = this.$refs.customQuillEditor.quill;
  177.       // 获取光标所在位置
  178.       let length = quill.getSelection().index;
  179.       // 插入图片||视频  res.info为服务器返回的图片地址
  180.       if(type=='mp4' || type=='MP4'){
  181.         window.jsValue=url;
  182.         quill.insertEmbed(length, 'video', url)
  183.       }else{
  184.         quill.insertEmbed(length, 'image', url)
  185.       }
  186.       // 调整光标到最后
  187.       quill.setSelection(length + 1)
  188.       //取消上传动画
  189.       this.quillUpdateImg = false;
  190.     },
  191.     // 上传(文件)图片失败
  192.     uploadEditorError(res, file) {
  193.       //页面提示
  194.       this.$message.error('上传图片失败')
  195.       //取消上传动画
  196.       this.quillUpdateImg = false;
  197.     },
  198.     //上传组件返回的结果
  199.     uploadResult:function (res){
  200. 		console.log('jg',res)
  201.       this.uploadUrlPath=res;
  202.     },
  203.  
  204.     // 失去焦点事件
  205.     onEditorBlur(quill) {
  206.       console.log('editor blur!', quill)
  207.     },
  208.     // 获得焦点事件
  209.     onEditorFocus(quill) {
  210.       console.log('editor focus!', quill)
  211.     },
  212.     // 准备富文本编辑器
  213.     onEditorReady(quill) {
  214.       console.log('editor ready!', quill)
  215.     },
  216.     // 内容改变事件
  217.     onEditorChange({ quill, html, text }) {
  218.       console.log('editor change!', quill, html, text)
  219.       this.content = html
  220.     }
  221.  
  222.   },
  223.   created () {
  224.   },
  225.   //只执行一次，加载执行
  226.   mounted () {
  227.     console.log("开始加载")
  228.     // 初始给编辑器设置title
  229.   },
  230.   watch: {
  231.     value: {
  232.       handler(val) {
  233.         if (val !== this.content) {
  234.           this.content = val === null ? "" : val;
  235.         }
  236.       },
  237.       immediate: true,
  238.     },
  239.   },
  240. }
  241. </script>
  242.  
  243. <style>
  244. .editor {
  245.   line-height: normal !important;
  246.   height: 400px;
  247.   margin-bottom: 50px;
  248. }
  249. .ql-snow .ql-tooltip[data-mode="link"]::before {
  250.   content: "请输入链接地址:";
  251. }
  252. .ql-snow .ql-tooltip.ql-editing a.ql-action::after {
  253.   border-right: 0px;
  254.   content: "保存";
  255.   padding-right: 0px;
  256. }
  257.  
  258. .ql-snow .ql-tooltip[data-mode="video"]::before {
  259.   content: "请输入视频地址:";
  260. }
  261.  
  262. .ql-snow .ql-picker.ql-size .ql-picker-label::before,
  263. .ql-snow .ql-picker.ql-size .ql-picker-item::before {
  264.   content: "14px";
  265. }
  266. .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
  267. .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
  268.   content: "10px";
  269. }
  270. .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
  271. .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
  272.   content: "18px";
  273. }
  274. .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
  275. .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
  276.   content: "32px";
  277. }
  278.  
  279. .ql-snow .ql-picker.ql-header .ql-picker-label::before,
  280. .ql-snow .ql-picker.ql-header .ql-picker-item::before {
  281.   content: "文本";
  282. }
  283. .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
  284. .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
  285.   content: "标题1";
  286. }
  287. .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
  288. .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
  289.   content: "标题2";
  290. }
  291. .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
  292. .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
  293.   content: "标题3";
  294. }
  295. .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
  296. .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
  297.   content: "标题4";
  298. }
  299. .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
  300. .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
  301.   content: "标题5";
  302. }
  303. .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
  304. .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
  305.   content: "标题6";
  306. }
  307.  
  308. .ql-snow .ql-picker.ql-font .ql-picker-label::before,
  309. .ql-snow .ql-picker.ql-font .ql-picker-item::before {
  310.   content: "标准字体";
  311. }
  312. .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
  313. .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
  314.   content: "衬线字体";
  315. }
  316. .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
  317. .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
  318.   content: "等宽字体";
  319. }
  320. </style>
  321.

4.video.js

  1. import  { Quill }  from 'vue-quill-editor'
  2.  
  3. // 源码中是import直接倒入，这里要用Quill.import引入
  4. const BlockEmbed = Quill.import('blots/block/embed')
  5. // const Link = Quill.import('formats/link')
  6.  
  7. const ATTRIBUTES = ['height', 'width']
  8.  
  9. class Video extends BlockEmbed {
  10.   static create (value) {
  11.     const node = super.create(value)
  12.     // console.log("js文件"+ window.jsValue)
  13.     // 添加video标签所需的属性
  14.     node.setAttribute('controls', 'controls') // 控制播放器
  15.     //删除原生video的控制条的下载或者全屏按钮的方法
  16.     //<video controls controlsList='nofullscreen nodownload noremote footbar' ></video>
  17.     //不用哪个在下面加上哪个
  18.     node.setAttribute('controlsList', 'nofullscreen') // 控制删除
  19.     node.setAttribute('type', 'video/mp4')
  20.     node.setAttribute('style', 'object-fit:fill;width: 100%;')
  21.     node.setAttribute('preload', 'auto')    // auto - 当页面加载后载入整个视频  meta - 当页面加载后只载入元数据  none - 当页面加载后不载入视频
  22.     node.setAttribute('playsinline', 'true')
  23.     node.setAttribute('x-webkit-airplay', 'allow')
  24.     // node.setAttribute('x5-video-player-type', 'h5') // 启用H5播放器,是wechat安卓版特性
  25.     node.setAttribute('x5-video-orientation', 'portraint') // 竖屏播放 声明了h5才能使用  播放器支付的方向，landscape横屏，portraint竖屏，默认值为竖屏
  26.     node.setAttribute('x5-playsinline', 'true') // 兼容安卓 不全屏播放
  27.     node.setAttribute('x5-video-player-fullscreen', 'true')    // 全屏设置，设置为 true 是防止横屏
  28.     node.setAttribute('src', window.jsValue)
  29.     return node
  30.   }
  31.  
  32.   static formats (domNode) {
  33.     return ATTRIBUTES.reduce((formats, attribute) => {
  34.       if (domNode.hasAttribute(attribute)) {
  35.         formats[attribute] = domNode.getAttribute(attribute)
  36.       }
  37.       return formats
  38.     }, {})
  39.   }
  40.  
  41.   // static sanitize (url) {
  42.   //
  43.   //      // eslint-disable-line import/no-named-as-default-member
  44.   // }
  45.  
  46.   static value (domNode) {
  47.     return domNode.getAttribute('src')
  48.   }
  49.  
  50.   format (name, value) {
  51.     if (ATTRIBUTES.indexOf(name) > -1) {
  52.       if (value) {
  53.         this.domNode.setAttribute(name, value)
  54.       } else {
  55.         this.domNode.removeAttribute(name)
  56.       }
  57.     } else {
  58.       super.format(name, value)
  59.     }
  60.   }
  61.  
  62.   html () {
  63.     const { video } = this.value()
  64.     return `<a href="${video}" rel="external nofollow" >${video}</a>`
  65.   }
  66. }
  67. Video.blotName = 'video' // 这里不用改，楼主不用iframe，直接替换掉原来，如果需要也可以保留原来的，这里用个新的blot
  68. Video.className = 'ql-video'
  69. Video.tagName = 'video' // 用video标签替换iframe
  70.  
  71. export default Video

5.

1、在根目录下新建vue.config.js 文件 （不是在src 下）

var webpack = require('webpack');

module.exports = {

  // 在vue.config.js中configureWebpack中配置

// 要引入webpack

configureWebpack: {

    plugins: [

      new webpack.ProvidePlugin({

        'window.Quill': 'quill/dist/quill.js',

        'Quill': 'quill/dist/quill.js'

      }),

    ]

  }

}

6.main.js

import VueQuillEditor from 'vue-quill-editor'

import 'quill/dist/quill.core.css'

import 'quill/dist/quill.snow.css'

import 'quill/dist/quill.bubble.css'

Vue.use(VueQuillEditor);

7.页面使用

  1. <el-form-item label="内容">
  2.  <QlEditor v-model="temp.content" ref="qlEditorRef" :min-height="192"/>
  3. </el-form-item>
  4.  
  5. <script>
  6. /** 提交按钮 */
  7. submitForm() {
  8.   this.$refs["form"].validate(valid => {
  9.     this.temp.content=this.$refs.qlEditorRef.content;   //获取富文本的内容
  10.   });
  11. },
  12. </script>

8.需要重新运行一下,不然会报错

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

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

  

闽ICP备14008679号