[]クイルエディタVueのカスタムコンポーネント

最近、リッチテキストエディタでケースをやっ小扁は、ここでは多くの時間を費やしたが、幸いフロントエンド兄が助けにあり、雲はこの来月見にクリアされます。
グラフィック情報、エディタの様々なために、私はクイルエディタを使用しています。ここで遭遇したリッチテキストエディタの問題に熟練していないVUEの使用は主に写真をアップロードされ、我々は1Mを超えるなし、800ピクセル幅最大絵を制限するためにされて求めています。
：私たちの下には、リッチテキストエディタの導入と利用言う
：コマンドを実行し、1 npm install vue-quill-editor --save
、2、導入クイルエディタをカスタム画像をアップロード

<!-- 图片上传组件辅助-->
<el-upload
  class="avatar-uploader-ui"
  :action="serverUrl"
  :headers="headers"
  name="file"
  accept="image/png,image/jpg,image/jpeg"
  :show-file-list="false"
  :on-success="uploadSuccess"
  :on-error="uploadError"
  :before-upload="beforeUpload">
</el-upload>
<el-form-item label="图文信息录入" v-loading="quillUpdateImg">
      <div class="edit_container">
        <span>建议上传图片宽度=800 px，图片大小不能大于1M</span>
        <quill-editor
                    v-model="dataForm.content"
                    ref="myQuillEditor"
                    class="editor"
                    :options="editorOption"
                    @ready="onEditorReady($event)">
        </quill-editor>
      </div>
 </el-form-item>

3、エディタに導入

import Vue from 'vue'
import { quillEditor } from 'vue-quill-editor' //调用编辑器
import "quill/dist/quill.snow.css"

editorOption: {
          placeholder: "请在这里输入",
          modules:{
                toolbar: {
                  // ['image']
                  container:[['image']],
                  handlers: {
                    'image': function (value) {
                      if (value) {
                        // 触发input框选择图片文件
                        document.querySelector('.avatar-uploader-ui input').click()
                      } else {
                        this.quill.format('image', false);
                      }
                    }
                  }
                }
                }
        }

4、beforeUploadメソッド定義された画像のサイズと寸法：

// 富文本图片上传前
beforeUpload(file) {
  const is1M = file.size / 1024 / 1024 < 1; // 限制小于1M
  if (!is1M) {
    this.$message.error('图片大小不可超过1MB')
    return Promise.reject(new throwError('图片大小不能超过1MB'));
  }

  return new Promise((resolve, reject) => {
    let width = 800; // 限制图片尺寸为800
    let _URL = window.URL || window.webkitURL;
    let img = new Image();
    img.onload =  () => {
      const valid = img.width === width;
      if (!valid) {
        this.$message.error('图片尺寸限制宽度为800px，大小不可超过1MB');
        return reject();
      }
      return resolve();
    }
    img.src = _URL.createObjectURL(file);
  });
}

5、グラフィックメッセージの編集者、私たちは写真の保存処理をしない場合、ターンへのデフォルトのBase64バイナリ倉庫、バイナリ広いデータベーステーブルにつながった、クエリはので、一般的に、我々はこの絵を保持しない、遅い、絵は、私たちには、サーバーを置きます：

uploadSuccess(res,file) {
        // res为图片服务器返回的数据
        // 获取富文本组件实例
        let quill = this.$refs.myQuillEditor.quill
        // 如果上传成功
        if (res.status === 'success' && res.uri !== null) {
          // 获取光标所在位置
          let length = quill.getSelection().index;
          // 插入图片  res.info为服务器返回的图片地址
          quill.insertEmbed(length, 'image', res.uri)
          // 调整光标到最后
          quill.setSelection(length + 1)
        } else {
          this.$message.error('图片插入失败')
        }
        // loading动画消失
        this.quillUpdateImg = false
      },

      // 富文本图片上传失败
      uploadError() {
        // loading动画消失
        this.quillUpdateImg = false
        this.$message.error('图片插入失败')
      }

データベースには、このHTMLは次のとおりです。

<p>hbhbbnkjj</p><p><img src="https://test.oss-cn-beijing.aliyuncs.com/987eedff-b978-4c83-b94d-80a9b50e7cc0.png"></p><p>sdfsf</p>

要約：
コードに似たオンライン検索、たくさんのからカスタム画像サイズが、直接使用することはできませんが、このコードは単純ではありませんフロントエンド、（を参照するために使用することができます^O）/〜