Quill Editor Build By Vuejs

vue-quill-editor

Instructions

yarn add @gefangshuai/vue-quill-editor
    import QuillEditor from '@gefangshuai/vue-quill-editor'
    import QuillEditor from '@gefangshuai/vue-quill-editor/lib/vueQuillEditor.css'
<quill-editor :read-only="readOnly"
              ref="editor"
              :image="imageConfig"
              height="300"
              :auto-height="false"
              v-model="content">
    <h1>标题1</h1>
    <h1>标题2</h1>
    <h1>标题3</h1>
</quill-editor>

parameter

1. value (v-model): bound text content
2. placeholder: text prompt when there is no content
3. toolbar: Toolbar, the default is:

[
   [{'header': [1, 2, 3, 4, 5, false]}],
   [{'color': []}, {'background': []}],          // dropdown with defaults from theme
   ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
   ['link', 'image'],
   [{'list': 'ordered'}, {'list': 'bullet'}],
   ['blockquote', 'code-block'],
   [{'indent': '-1'}, {'indent': '+1'}],          // outdent/indent
   [{'align': []}],
   ['clean']
]

1. image: Image upload configuration information, as follows:

{
     " serverUrl " : " Backend receiving address for uploading pictures " ,
     " fileName " : " Request parameters, default'file ' " ,
     " withCredentials " : " Whether cross-domain, default true " ,
     " multiple " : " Whether one upload is allowed Multiple pictures, default true " 
}

1. If not configured, the default is base64 image inserted into the editor
2. readOnly: Whether it is read-only, the default is false.
3. autoHeight: The editor height adapts to the content, the default is true.
4. height: The height of the editor when it is initialized, the default is ‘200px’.

event

1. textChange: monitor content changes
2. selectionChange: monitor content selection changes
3. editorChange: listen to all changes in the editor

method

1. getHtml(): String returns the editor content
2. setHtml(content): Assign a value to the editor
3. getText(): Get plain text
4. getContents(): Get content object
5. getLength(): Get the content length
6. blur(): make the editor lose focus
7. focus(): Make the editor focus
8. hasFocus(): Determine whether the editor has the focus

Download Details:

Author: gefangshuai

Source Code: https://github.com/gefangshuai/vue-quill-editor

#vuejs #vue #javascript