تغییر آپشن های ادیتور

src/components/Utils/Editor2.vue

@@ -0,0 +1,144 @@
+<template>
+  <q-editor ref="editor"
+            v-model="editorValue"
+            min-height="10rem"
+            :toolbar="[
+              [
+                {
+                  label: $q.lang.editor.align,
+                  icon: $q.iconSet.editor.align,
+                  fixedLabel: true,
+                  options: ['left', 'center', 'right', 'justify']
+                }
+              ],
+              ['bold', 'italic', 'strike', 'underline', 'subscript', 'superscript', 'colorpicker'],
+              ['token', 'hr', 'link', 'custom_btn'],
+              ['print', 'fullscreen'],
+              [
+                {
+                  label: $q.lang.editor.formatting,
+                  icon: $q.iconSet.editor.formatting,
+                  list: 'no-icons',
+                  options: ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'code']
+                },
+                {
+                  label: $q.lang.editor.fontSize,
+                  icon: $q.iconSet.editor.fontSize,
+                  fixedLabel: true,
+                  fixedIcon: true,
+                  list: 'no-icons',
+                  options: [
+                    'size-1',
+                    'size-2',
+                    'size-3',
+                    'size-4',
+                    'size-5',
+                    'size-6',
+                    'size-7'
+                  ]
+                },
+                {
+                  label: $q.lang.editor.defaultFont,
+                  icon: $q.iconSet.editor.font,
+                  fixedIcon: true,
+                  list: 'no-icons',
+                  options: [
+                    'default_font',
+                    'arial',
+                    'arial_black',
+                    'comic_sans',
+                    'courier_new',
+                    'impact',
+                    'lucida_grande',
+                    'times_new_roman',
+                    'verdana'
+                  ]
+                },
+                'removeFormat'
+              ],
+              ['quote', 'unordered', 'ordered', 'outdent', 'indent'],
+
+              ['undo', 'redo'],
+              ['viewsource']
+            ]"
+            :fonts="{
+              IRANSans: 'IRANSans',
+              arial: 'Arial',
+              arial_black: 'Arial Black',
+              comic_sans: 'Comic Sans MS',
+              courier_new: 'Courier New',
+              impact: 'Impact',
+              lucida_grande: 'Lucida Grande',
+              times_new_roman: 'Times New Roman',
+              verdana: 'Verdana',
+            }"
+            @update:model-value="onChangeText"
+            @paste="onPaste">
+    <template v-slot:token>
+      <q-btn-dropdown ref="colorPicker"
+                      dense
+                      unelevated
+                      icon="colorize"
+                      size="sm">
+        <q-list dense>
+          <q-item tag="label"
+                  clickable>
+            <q-item-section>
+              <q-btn icon="check"
+                     @click="color('foreColor', foreColor)" />
+              <q-color v-model="foreColor"
+                       class="my-picker" />
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-btn-dropdown>
+    </template>
+  </q-editor>
+</template>
+
+<script>
+export default {
+  name: 'Editor',
+  props: {
+    value: {
+      type: String,
+      default() {
+        return null
+      }
+    }
+  },
+  data() {
+    return {
+      foreColor: '#000000'
+    }
+  },
+  computed: {
+    editorValue: {
+      get() {
+        return this.value
+      },
+      set(newValue) {
+        this.$emit('update:value', newValue)
+      }
+    }
+  },
+  methods: {
+    onPaste(evt) {
+      const str = evt.clipboardData.getData('text')
+      const replace = str.replace(/(<([^>]+)>)/ig, '')
+      this.editorValue = replace
+    },
+    color(cmd, name) {
+      const edit = this.$refs.editor
+      this.$refs.colorPicker.hide()
+      edit.caret.restore()
+      edit.runCmd(cmd, name)
+      edit.focus()
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/Widgets/TextWidget/OptionPanel.vue

@@ -17,7 +17,7 @@
 import { defineComponent } from 'vue'
 import { mixinOptionPanel } from 'quasar-ui-q-page-builder'
 import OptionPanelTabs from 'quasar-ui-q-page-builder/src/components/OptionPanelComponents/OptionPanelTabs.vue'
-import Editor from 'components/Utils/Editor.vue'
+import Editor from 'components/Utils/Editor2.vue'
 import EditorOptions from 'components/EditorOptions.vue'
 
 export default defineComponent({