surmon-china / vue-quill-editor

@quilljs editor component for @vuejs(2)
https://github.surmon.me/vue-quill-editor
MIT License
7.38k stars 1.03k forks source link

how to use in html page #427

Open den233 opened 4 years ago

den233 commented 4 years ago

how to use in html page when use vue.

not use cdn

kingsthwaiteJ commented 3 years ago

1) Install the npm package in the root directory of your project.

npm i --save vue-quill-editor

2) Create a plugin that imports Vue Quill Editor.

import Vue from "vue";
import VueQuillEditor from "vue-quill-editor";

Vue.use(VueQuillEditor);
  1. Define the Quill Editor options in the data component.

    data: function () {
    return {
        quillEditorOptions: {
            ...  // Quill editor options available at https://github.surmon.me/vue-quill-editor/
        }
    }
    }
  2. Create a Quill Editor component, including the options you've just specified, and the variable containing the content that will be bound to the Editor.

    <quill-editor
    v-model="<your-model-here>"
    :options="quillEditorOptions">
    </quill-editor>

If you just want to view the content generated by the editor, you can simply bind the variable that contains the content to an HTML element. See below.

<div v-html="<your-model-here>"></div>

Hope that helps!