• vue中使用vue-quill-editor及上传图片到自己服务器


    第一步,下载依赖

    cnpm install vue-quill-editor --save

    第二步,再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)

    第三步,如果要上传图片到自己服务器的话如下

    cnpm install vue-quill-editor-upload --save

    接下来再组件中使用

    //js布冯
    import {quillRedefine} from 'vue-quill-editor-upload'
    data(){
      return{
          editorOption: {
                modules:{
                    toolbar:[
                        ['image'],
                        [{ 'color': [] }, { 'background': [] }]
                    ]
                }
            },  
        }  
    },
    components: {quillRedefine},
      computed: {
          editor() {
            return this.$refs.myQuillEditor.quill;
        }
      },
    methods: {
          onEditorReady(editor) { // 准备编辑器
            },
        onEditorBlur(){}, // 失去焦点事件
        onEditorFocus(){}, // 获得焦点事件
        onEditorChange(event){
            console.log(event.html)
            this.htmls = event.html
        }, // 内容改变事件
     },
    created: function() {      
        let that = this;
        that.upLoadUrl=upLoadUrl+'/?width=300';
        that.editorOption = quillRedefine(
            {
              // 图片上传的设置
              uploadConfig: {
                action: that.upLoadUrl,  // 必填参数 图片上传地址
                // 必选参数  res是一个函数,函数接收的response为上传成功时服务器返回的数据
                // 你必须把返回的数据中所包含的图片地址 return 回去
                res: (respnse) => {
                    console.log(respnse)
                    var path = respnse.path//这里return你的图片地址即可
                  return path
                },
                name: 'img'  // 图片上传参数名
              },
              toolOptions: [
                  [{'color': []}, {'background': []}],
                  [ 'image']
              ]
            }
          )
      }

    temple里的代码是

    <quill-editor 
                                    v-model="dataInfo.description" 
                                    ref="myQuillEditor" 
                                    :options="editorOption" 
                                    @blur="onEditorBlur($event)" 
                                    @focus="onEditorFocus($event)"
                                    @change="onEditorChange($event)">
                                </quill-editor>

    这样就可以正常操作了,注:上方的 upLoadUrl 需要根据你们的上传地址修改

  • 相关阅读:
    Docker For Windows | Setting Up Docker On Windows
    10款游戏的设计分析
    游戏中的沉浸(Flow in Games)
    游戏中运用了人工智能、机器学习等智能算法的思考
    虚幻4的智能指针
    linux下查看已安装的软件与卸载
    Centos7.2下安装mysql5.7,使用rpm包安装
    VMware 安装 CentOS7
    并发之痛 Thread,Goroutine,Actor
    Creating and using a blendspace in c++
  • 原文地址:https://www.cnblogs.com/ldlx-mars/p/10767447.html
Copyright © 2020-2023  润新知