base_ui/components/other/MyQuill.vue

<template>
  <div class="w-100">
    <!-- :editorToolbar="editorToolbar" -->
    <vue-editor dir="rtl" v-model="editorData" :editorOptions="editorOptions">
    </vue-editor>

    <div class="my-3" v-if="showSaveButton">
      <button-component
        @click="save()"
        type="button"
        classes="btn-primary"
        buttonText="ذخیره"
        title="ذخیره"
        :buttonLoading="buttonLoading"
      ></button-component>
    </div>
  </div>
</template>

<script>
// Basic Use - Covers most scenarios
import { VueEditor } from "vue2-editor";

// Advanced Use - Hook into Quill's API for Custom Functionality
// import { VueEditor, Quill } from "vue2-editor";

/**
 * @vue-prop {Boolean} [showSaveButton=true] - نمایش دکمه ذخیره
 * @vue-prop {String} [tinyText=""] - متن کوچک
 * @vue-prop {Boolean} [parentButtonLoading=false] - وضعیت بارگذاری دکمه والد
 *
 * @vue-data {String} [debug="info"] - سطح دیباگ
 * @vue-data {Object} [modules] - ماژول‌های ویرایشگر
 * @vue-data {String} [modules.toolbar="#toolbar"] - نوار ابزار ویرایشگر
 * @vue-data {Object} [editorOptions] - تنظیمات ویرایشگر
 * @vue-data {Object} [editorOptions.formats] - فرمت‌های ویرایشگر
 * @vue-data {String} [editorOptions.formats.direction="rtl"] - جهت متن
 * @vue-data {String} [editorOptions.formats.align="right"] - نحوه چیدمان متن
 * @vue-data {String} [editorOptions.placeholder="توضیحات..."] - متن پیش‌ فرض
 * @vue-data {Array} [editorToolbar] - ابزارهای نوار ویرایشگر
 * @vue-data {Array} [editorToolbar[]=["bold", "italic", "underline"]] - ابزارهای نوار ویرایشگر (بولد، ایتالیک، زیرخط)
 * @vue-data {Array} [editorToolbar[]=[{ list: "ordered" }, { list: "bullet" }]] - ابزارهای نوار ویرایشگر (لیست مرتب و لیست گلوله‌ای)
 * @vue-data {Array} [editorToolbar[]=["image", "code-block"]] - ابزارهای نوار ویرایشگر (تصویر، بلوک کد)
 * @vue-data {Boolean} [buttonLoading=this.parentButtonLoading] - وضعیت بارگذاری دکمه
 * @vue-data {String} [editorData=""] - داده‌های ویرایشگر
 *
 * @vue-computed {String} editorModel - مدل ویرایشگر
 * @vue-computed-get {String} editorModel - مقدار فعلی داده‌های ویرایشگر
 * @vue-computed-set {String} editorModel - تنظیم مقدار داده‌های ویرایشگر
 */

export default {
  props: {
    showSaveButton: {
      default: true,
    },
    tinyText: {
      default: "",
    },
    parentButtonLoading: {
      default: false,
    },
  },

  data() {
    return {
      debug: "info",
      modules: {
        toolbar: "#toolbar",
      },

      editorOptions: {
        formats: {
          direction: "rtl",
          align: "right",
        },
        placeholder: "توضیحات...",
        // readOnly: true,
        // theme: "snow",
      },

      editorToolbar: [
        ["bold", "italic", "underline"],
        [{ list: "ordered" }, { list: "bullet" }],
        ["image", "code-block"],
      ],

      buttonLoading: this.parentButtonLoading,
      editorData: "",
    };
  },
  computed: {
    editorModel: {
      get() {
        return this.editorData;
      },
      set(value) {
        this.editorData = value;
      },
    },
  },
  methods: {
    /**
     * ذخیره داده‌ها.
     * اگر دکمه در حال بارگذاری باشد، عملیات متوقف می‌شود. در غیر این صورت، عملیات ذخیره‌سازی انجام شده و داده‌ها از طریق یک رویداد ارسال می‌شود.
     * @returns {object} داده‌های ویرایشگر.
     */
    save() {
      if (this.buttonLoading) return;
      this.buttonLoading = true;

      this.$emit("on-save", this.editorData);
      return this.editorData;
    },
  },
  mounted() {
    this.editorData = this.tinyText;
  },
  watch: {
    tinyText(newVal) {
      this.editorData = newVal;
    },
    parentButtonLoading(newVal) {
      this.buttonLoading = newVal;
    },
  },
};
</script>

<style>
.ql-editor {
  text-align: inherit;
}
</style>