vue後臺管理系統富文本組件（三）quill

vue後臺管理系統富文本組件（三）quill

簡介

quill也是相當不錯的富文本。

優點：美觀，現代，功能強大。

缺點：兼容性不好，國際化語言支持缺失。

主要依賴說明 （先安裝，步驟略）

 {
    "axios": "^0.18.0",
    "element-ui": "2.11.1",  
    "vue": "^2.6.10",
    "vue-quill-editor": "^3.0.6"
 }

正文

1.組件

文件目錄

src/components/QuillEditor/index.vue

<template>
  <div class="custom-quill-editor-container">
    <quill-editor v-model="content" ref="myQuillEditor" :options="editorOptions"></quill-editor>
  </div>
</template>
<script>
import configMixins from "./config";  // 見下文
export default {
  props: {
    initValue: {
      type: String,
      default: ""
    }
  },
  mixins: [configMixins],
  data() {
    return { content: "" };
  },
  watch: {
    initValue(val) {
      this.content = val;
    },
    content() {
      this.$emit("subContent", this.content);
    }
  },
  created() {
    this.content = this.initValue;
  }
};
</script>
<style  lang='scss'>
.custom-quill-editor-container {
  .quill-editor {
    height: 300px;
  }
}
</style>

src/components/QuillEditor/config/index.js

//  styles
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
// components
import { quillEditor as QuillEditor } from 'vue-quill-editor';
// config
import toolOptions from './toolOptions';
import handlers from './handlers';

// 全部配置
const editorOptions = {
  placeholder: '請輸入內容',
  theme: 'snow', // 主題
  modules: {
    toolbar: {
      handlers, // 事件重寫
      container: toolOptions // 工具欄選項
    }
  }
};

export default {
  components: {
    QuillEditor
  },
  created() {},
  data() {
    return { editorOptions };
  }
};

src/components/QuillEditor/config/handlers.js

// 圖片上傳參數配置
const uploadConfig = {
  action: '',      // 必填參數 圖片上傳地址
  methods: 'POST', // 必填參數 圖片上傳方式
  token: '',       // 可選參數 如果需要token驗證
  name: 'img',     // 必填參數 文件的參數名
  size: 1024 * 3,  // 可選參數   圖片大小，單位爲Kb, 1M = 1024Kb
  accept: 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon' // 可選 可上傳的圖片格式
};
// handler重寫事件, 這裏只重寫圖片上傳事件
const handlers = {
  image: function image() {
    let fileInput = this.container.querySelector('input.ql-image[type=file]');
    if (fileInput === null) {
      fileInput = document.createElement('input');
      fileInput.setAttribute('type', 'file');
      // 設置圖片參數名
      if (uploadConfig.name) {
        fileInput.setAttribute('name', uploadConfig.name);
      }
      // 可設置上傳圖片的格式
      fileInput.setAttribute('accept', uploadConfig.accept);
      fileInput.classList.add('ql-image');
      // 監聽選擇文件
      fileInput.addEventListener('change', () => {
        // 如果圖片限制大小
        if (
          uploadConfig.size &&
          fileInput.files[0].size >= uploadConfig.size * 1024
        ) {
          fileInput.value = '';
          return;
        }
        
        // 上傳

        // console.log(fileInput.files);
        // 上傳成功後服務器返回的url
        // const url = '';

        // 把成功後的url插入組件
        // const length = this.quill.getSelection(true).index;
        // this.quill.insertEmbed(length, 'image', url);
        // this.quill.setSelection(length + 1);
      });
      this.container.appendChild(fileInput);
    }
    fileInput.click();
  }
};

export default handlers;

src/components/QuillEditor/config/toolOptions.js

// toolbar工具欄的工具選項（默認展示全部）
const toolOptions = [
  ['bold', 'italic', 'underline', 'strike'],
  ['blockquote', 'code-block'],
  [
    {
      header: 1
    },
    {
      header: 2
    }
  ],
  [
    {
      list: 'ordered'
    },
    {
      list: 'bullet'
    }
  ],

  [
    {
      size: ['small', false, 'large', 'huge']
    }
  ],
  [
    {
      header: [1, 2, 3, 4, 5, 6, false]
    }
  ],
  [
    {
      color: []
    },
    {
      background: []
    }
  ],
  [
    {
      font: []
    }
  ],
  [
    {
      align: []
    }
  ],
  ['clean'],
  ['link', 'image']
];

export default toolOptions;

2.使用

<template>
  <div id="app">
    <quill-editor :init-value="initValue" @subContent="handleGetContent" />
  </div>
</template>

<script>
import QuillEditor from "@/components/QuillEditor";

export default {
  name: "App",
  components: {
    QuillEditor
  },
  data() {
    return {
      initValue: "你好"
    };
  },
  methods: {
    handleGetContent(content) {
      console.log(content);
    }
  }
};
</script>

3.使用效果

參考鏈接

1.https://quilljs.com/

2.https://surmon-china.github.io/vue-quill-editor/