current position:Home>Using the modify toolbar of quill editor rich text editor in Vue

Using the modify toolbar of quill editor rich text editor in Vue

2022-01-26 21:38:41 Foreigners virtue

1. Usage in code

<template xmlns:v-quill="http://www.w3.org/1999/xhtml">
    <div class="wrapper release-tc">
        <div class="release-box">
            <h3> Make complaints about </h3>
            <div class="editor">
                <div class="quill-editor" @change="onEditorChange($event)" :content="content" v-quill:myQuillEditor="editorOption">
                </div>
                <div class="btns">
                    <button class="sui-btn btn-danger btn-release" @click="save"> Release </button>
                </div>
                <div class="clearfix"></div>
            </div>
        </div>
        <div class="clearfix"></div>
    </div>
</template>

<script> import "~/assets/css/page-sj-spit-submit.css"; import spitApi from "@/api/spit"; export default {
       data() {
       return {
       content: '', editorOption: {
       // some quill options modules: {
       toolbar: [ ['bold', 'italic', 'underline', 'strike'], ['blockquote', 'code-block'] ] } }, } }, methods: {
       onEditorChange({
        editor, html, text }) {
       this.content = html; }, save() {
       spitApi.save({
      content: this.content}).then((response) => {
       this.$message({
       showClose: true, message: response.data.message, type: (response.data.flag ? 'success' : 'error'), }); if (response.data.flag) {
       //  Submit successfully , Jump to make complaints about home page  this.$router.push("/spit"); } }); }, }, } </script>

<style scoped lang="stylus"> .quill-editor min-height 200px max-height 400px overflow-y auto </style>

2. The second way to use online

After testing, it is also OK

<template>
  <quill-editor v-model="content" ref="editorRef" :options="editorOption" @focus="onEditorFocus($event)" @blur="onEditorBlur($event)" @change="onEditorChange($event)" class="editor" />
</template>
<script> import {
       quillEditor } from "vue-quill-editor"; import "quill/dist/quill.core.css"; // import styles import "quill/dist/quill.snow.css"; // for snow theme import "quill/dist/quill.bubble.css"; // for bubble theme //  customized toolbar const toolbarOptions = [ ["bold", "italic", "underline", "strike"], //  In bold   Italics   Underline   Delete line  -----['bold', 'italic', 'underline', 'strike'] ["blockquote", "code-block"], //  quote   Code block -----['blockquote', 'code-block'] [{
       list: "ordered" }, {
       list: "bullet" }], //  Orderly 、 Unordered list -----[{ list: 'ordered' }, { list: 'bullet' }] [{
       header: 1 }, {
       header: 2 }], [{
       script: "sub" }, {
       script: "super" }], //  Superscript / Subscript -----[{ script: 'sub' }, { script: 'super' }] [{
       indent: "-1" }, {
       indent: "+1" }], [{
       size: [] }], //  Configure font size  [{
       header: [1, 2, 3, 4, 5, 6, false] }], //  title -----[{ header: [1, 2, 3, 4, 5, 6, false] }] [{
       color: [] }, {
       background: [] }], //  The font color 、 Font background color -----[{ color: [] }, { background: [] }] [{
       font: [] }], // Display font selection  [{
       align: [] }], //  Alignment mode -----[{ align: [] }] ["clean"], //  Clear text formatting -----['clean'] ["link"], //  link 、 picture 、 video -----['link', 'image', 'video'] ]; export default {
       name: "TestQuillEditor", components: {
       quillEditor }, data() {
       return {
       content: "", editorOption: {
       theme: "snow", modules: {
       toolbar: toolbarOptions, }, }, }; }, computed: {
       // Current rich text instance  editor() {
       return this.$refs.editorRef.quillEditor; }, }, methods: {
       //  Preparing the rich text editor  onEditorReady() {
      }, //  Rich text editor   Loss of focus event  onEditorBlur() {
      }, //  Rich text editor   Get focus event  onEditorFocus() {
      }, //  Rich text editor   Content change event  onEditorChange({
        html }) {
       // Content change event  // console.log(' Content change event '); }, }, }; </script>
<style> </style>

Reference link

copyright notice
author[Foreigners virtue],Please bring the original link to reprint, thank you.
https://en.cdmana.com/2022/01/202201262138355404.html

Random recommended