vue-quill-editor + iview 实现富文本编辑器及图片上传

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

1、npm 安装 vue-quill-editor 

npm install vue-quill-editor

2、再main.js中引入

import  VueQuillEditor from 'vue-quill-editor'
// require styles 引入样式
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
Vue.use(VueQuillEditor)

3、创建子组件UE.vue

<template>
  <div>
    <Upload
      :show-upload-list="false"
      class="editor_upload"
      :format="['jpg','jpeg','png']"
      :max-size="2048"
      multiple
      :before-upload="handleUpload"
      action="//jsonplaceholder.typicode.com/posts/"
    >
      <Button icon="ios-cloud-upload-outline" ></Button>
    </Upload>
    <quill-editor
      v-model="msg"
      :options="editorOption"
      ref="QuillEditor">
    </quill-editor>
  </div>
</template>
<script>
  import {PostBase64Upload} from '../../../services/pages/market'
  //工具
  const toolbarOptions = [
    ['bold', 'italic', 'underline', 'strike','blockquote', 'code-block',{'indent': '-1'}, {'indent': '+1'},{'color': []}, {'background': []},{'align': []},'image','clean'],        // toggled buttonssuperscript/subscript
  ];
  //工具名称
  const titleConfig = {
    'ql-bold':'加粗',
    'ql-color':'颜色',
    'ql-font':'字体',
    'ql-code':'插入代码',
    'ql-italic':'斜体',
    'ql-link':'添加链接',
    'ql-background':'背景颜色',
    'ql-size':'字体大小',
    'ql-strike':'删除线',
    'ql-script':'上标/下标',
    'ql-underline':'下划线',
    'ql-blockquote':'引用',
    'ql-header':'标题',
    'ql-indent':'缩进',
    'ql-align':'文本对齐',
    'ql-direction':'文本方向',
    'ql-code-block':'代码块',
    'ql-image':'图片',
    'ql-video':'视频',
    'ql-clean':'清除字体样式',
  };
  export default {
    name: 'UE',
    data () {
      return {
        IMAGE_URL: global.IMG_URL,
        QuillEditor: null,
        editorOption: {
          modules: {
            toolbar: {
              container: toolbarOptions,  // 工具栏
              handlers: {
                'image': function (value) {
                  if (value) {
                    document.querySelector('.ivu-upload .ivu-btn').click()
                  } else {
                    this.quill.format('image', false);
                  }
                }
              }
            }
          }
        },
        file_url: '',
        importFile: '',
        msg: ''
      }
    },
    props: ["defaultMsg",],
    mounted() {
      this.msg = this.defaultMsg;
      this.addQuillTitle()
    },
    methods: {
      // 提交文件并阻断自动上传
      handleUpload(file) {
        let that = this;
        let time = setTimeout(function () {
          that.upload(file);
          clearTimeout(time);
        }, 0);
        return false
      },
      //上传图片
      upload(file) {
        let index = file.name.lastIndexOf("\.");
        let file_url = file.name.substring(index + 1, file.name.length);
        if (file_url == 'jpg' || file_url == 'jpeg' || file_url == 'png' ) {
          let that = this;
          let reader = new FileReader();
          reader.readAsDataURL(file);
          reader.onload = function (e) {
            PostBase64Upload({
              base64_content: e.target.result,
              module_name: 'topic'
            })
              .then(data => {
                that.file_url = data.file_url;
                that.handleSuccess(that.file_url)
              })
              .catch(err => {
                that.$Message.error(err);
              });
            return false;
          };
        } else {
          this.$Message.error("请上传'jpg','jpeg', png'格式的图片");
          return false;
        }
      },
      //图片加入到富文本框中
      handleSuccess (res) {
        let quill = this.$refs.QuillEditor.quill;
        let length = quill.getSelection().index;
        quill.insertEmbed(length, 'image', res)
        quill.setSelection(length + 1);
        this.msg = this.getImgSrc(this.msg);
      },
      //加入路径的IP
      getImgSrc(content) {
        // 正则替换img的路径
        let that = this;
        content.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, function (match, capture) {
          content = content.replace(new RegExp(capture, 'g'), that.IMAGE_URL + capture);//这里也可以替换成需要的路径
        });
        content = content.replace(/<img/g, '<img style="width: 100%;"');
        return content;
      },
      //富文本工具添加名称
      addQuillTitle () {
        const oToolBar = document.querySelector('.ql-toolbar'),
          aButton = oToolBar.querySelectorAll('button'),
          aSelect =  oToolBar.querySelectorAll('select');
        aButton.forEach(function(item){
          if(item.className === 'ql-script'){
            item.value === 'sub' ? item.title = '下标': item.title = '上标';
          }else if(item.className === 'ql-indent'){
            item.value === '+1' ? item.title ='向右缩进': item.title ='向左缩进';
          }else{
            item.title = titleConfig[item.classList[0]];
          }
        });
        aSelect.forEach(function(item){
          item.parentNode.title = titleConfig[item.classList[0]];
        });
      },
    },
  }
</script>
<style>
  .editor_upload {
    display: none;
  }
</style>

4、引入该组件页面

 <UE :defaultMsg=defaultMsg ref="ue"></UE>
<script>
    import UE from "./UE"
    //因子组件不能修改父组件的参数，所以父组件提交时，直接调取子组件的参数
    this.$refs.ue.msg
</script>

上述的工具栏是根据我司的要求来选择的，如果你想需求的更多，我也是查看别的大神的，你也可以看看https://blog.csdn.net/div_ma/article/details/79536634，

以上是 vue-quill-editor + iview 实现富文本编辑器及图片上传 的全部内容， 来源链接： utcz.com/z/376785.html

回到顶部