[vue.js] vue-quill-editor 사용법 및 옵션(options) 설정

서론

데이터를 입력하고 외부에서 해당 데이터를 view하기 위해 html에 style이나 tag를 직접 변경하는 에디터가 필요하여 찾던 중 html에 스타일이 적용되는 vue-quill-editor 에디터를 적용하였다.

설치

npm i vue-quill-editor

소스

vue

<template>
  <div class="example">
    <quill-editor
      class="editor"
      ref="myTextEditor"
      :disabled="false"
      :value="content"
      :options="editorOption"
      @change="onEditorChange"
      @blur="onEditorBlur($event)"
      @focus="onEditorFocus($event)"
      @ready="onEditorReady($event)"
    />

    <div class="output ql-snow">
      <div v-html="content"></div>
    </div>
  </div>
</template>

script

<script>
import hljs from "highlight.js";
import debounce from "lodash/debounce";
import { quillEditor } from "vue-quill-editor";

// highlight.js style
import "highlight.js/styles/tomorrow.css";

// import theme style
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";

export default {
  name: "quill-example-snow",
  title: "Theme: snow",
  components: {
    quillEditor,
  },
  data() {
    return {
      editorOption: {
        placeholder: "place holder test",
        modules: {
          toolbar: [
            ["bold", "italic", "underline", "strike"], // <strong>, <em>, <u>, <s>
            ["blockquote", "code-block"], // <blockquote>, <pre class="ql-syntax" spellcheck="false">
            [{ header: 1 }, { header: 2 }], // <h1>, <h2>
            [{ list: "ordered" }, { list: "bullet" }],
            [{ script: "sub" }, { script: "super" }], // <sub>, <sup>
            [{ indent: "-1" }, { indent: "+1" }], // class제어
            [{ direction: "rtl" }], //class 제어
            [{ size: ["small", false, "large", "huge"] }], //class 제어 - html로 되도록 확인
            [{ header: [1, 2, 3, 4, 5, 6, false] }], // <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, normal
            [{ font: [] }], // 글꼴 class로 제어
            [{ color: [] }, { background: [] }], //style="color: rgb(230, 0, 0);", style="background-color: rgb(230, 0, 0);"
            [{ align: [] }], // class
            // ["clean"],
            ["link", "image", "video"],
          ],
          syntax: {
            highlight: (text) => hljs.highlightAuto(text).value,
          },
        },
      },
      content: "",
    };
  },
  methods: {
    onEditorChange: debounce(function(value) {
      this.content = value.html;
    }, 466),
    onEditorBlur(editor) {
      console.log("editor blur!", editor);
    },
    onEditorFocus(editor) {
      console.log("editor focus!", editor);
    },
    onEditorReady(editor) {
      console.log("editor ready!", editor);
    },
  },
  computed: {
    editor() {
      return this.$refs.myTextEditor.quill;
    },
    contentCode() {
      return hljs.highlightAuto(this.content).value;
    },
  },
  mounted() {
    console.log("this is Quill instance:", this.editor);
  },
};
</script>

 

설명

editorOption : 에디터 옵션을 설정하는 data

 - placeholder : 에디터 안에 placeholder

 - modules - toolbar : 에디터 상단 툴바 옵션 설정

    ["bold", "italic", "underline", "strike"], // html : <strong>, <em>, <u>, <s>

    ["blockquote", "code-block"], // html : <blockquote>, <pre class="ql-syntax" spellcheck="false">

    [{ header: 1 }, { header: 2 }], // <h1>, <h2>

    [{ list: "ordered" }, { list: "bullet" }],

    [{ script: "sub" }, { script: "super" }], // <sub>, <sup>

    [{ indent: "-1" }, { indent: "+1" }], // class set

    [{ direction: "rtl" }], //class set

    [{ size: ["small", false, "large", "huge"] }], // class set

    [{ header: [1, 2, 3, 4, 5, 6, false] }], // <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, normal

    [{ font: [] }], // 글꼴 class로 제어

    [{ color: [] }, { background: [] }], //style="color: rgb(230, 0, 0);", style="background-color: rgb(230, 0, 0);"

    [{ align: [] }], // class

    // ["clean"],
    ["link", "image", "video"],