fixed #148

src/components/FormBuilderCustumComponents/FormBuilderInputEditor.vue

@@ -0,0 +1,187 @@
+<template>
+  <div class="form-builder-editor"
+       :class="customClass">
+    <p v-text="label" />
+    <q-editor v-if="!disable && !readonly"
+              ref="editor"
+              v-model="inputData"
+              :class="customClass"
+              :content-class="customClass"
+              :name="name"
+              :dense="$q.screen.lt.md"
+              :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="change($event)"
+              @click="onClick"
+              @paste="onPaste">
+      <template v-slot:colorpicker>
+        <q-btn-dropdown ref="token"
+                        dense
+                        no-caps
+                        no-wrap
+                        unelevated
+                        color="white"
+                        text-color="primary"
+                        label="رنگ"
+                        size="sm">
+          <q-list dense>
+            <q-item tag="label"
+                    clickable
+                    @click="color('backColor', highlight)">
+              <q-item-section side>
+                <q-icon name="highlight" />
+              </q-item-section>
+              <q-item-section>
+                <q-color v-model="highlight"
+                         default-view="palette"
+                         no-header
+                         no-footer
+                         :palette="[
+                           '#ffccccaa', '#ffe6ccaa', '#ffffccaa', '#ccffccaa',
+                           '#ccffe6aa', '#ccffffaa', '#cce6ffaa', '#ccccffaa', '#e6ccffaa', '#ffccffaa', '#ff0000aa', '#ff8000aa', '#ffff00aa', '#00ff00aa', '#00ff80aa', '#00ffffaa', '#0080ffaa', '#0000ffaa', '#8000ffaa', '#ff00ffaa'
+                         ]"
+                         class="my-picker" />
+              </q-item-section>
+            </q-item>
+            <q-item tag="label"
+                    clickable
+                    @click="color('foreColor', foreColor)">
+              <q-item-section side>
+                <q-icon name="format_paint" />
+              </q-item-section>
+              <q-item-section>
+                <q-color v-model="foreColor"
+                         no-header
+                         no-footer
+                         default-view="palette"
+                         :palette="[
+                           '#ff0000', '#ff8000', '#ffff00', '#00ff00', '#00ff80', '#00ffff', '#0080ff', '#0000ff', '#8000ff', '#ff00ff'
+                         ]"
+                         class="my-picker" />
+              </q-item-section>
+            </q-item>
+          </q-list>
+        </q-btn-dropdown>
+      </template>
+    </q-editor>
+    <!--eslint-disable-next-line-->
+    <div v-else v-html="inputData" />
+  </div>
+</template>
+
+<script>
+import { inputMixin } from 'quasar-form-builder'
+
+export default {
+  name: 'FormBuilderInputEditor',
+  mixins: [inputMixin],
+  props: {
+    name: {
+      default: '',
+      type: String
+    },
+    value: {
+      default: '',
+      type: [String, Number, Boolean]
+    }
+  },
+  data () {
+    return {
+      foreColor: '#000000',
+      highlight: '#ffff00aa'
+    }
+  },
+  watch: {
+    value(newValue) {
+      if (newValue === false) {
+        this.inputData = ''
+      }
+    }
+  },
+  created() {
+    if (this.inputData === false) {
+      this.inputData = ''
+    }
+  },
+  methods: {
+    onPaste () {
+      this.inputData = this.inputData.replaceAll(/<!--\[if .*endif\]-->/gms, 'ferret')
+    },
+    color (cmd, name) {
+      const edit = this.$refs.editor
+      this.$refs.token.hide()
+      edit.caret.restore()
+      edit.runCmd(cmd, name)
+      edit.focus()
+    }
+  }
+}
+</script>

src/components/Widgets/Classroom/AdminClassroomShow/components/ClassroomInfo.vue

@@ -25,11 +25,15 @@
 </template>
 
 <script>
+import { shallowRef } from 'vue'
 import { EntityEdit } from 'quasar-crud'
 import Enums from 'src/assets/Enums/Enums.js'
 import { APIGateway } from 'src/api/APIGateway.js'
 import { Classroom } from 'src/models/Classroom.js'
 import { FormBuilderAssist } from 'quasar-form-builder'
+import FormBuilderInputEditor from 'src/components/FormBuilderCustumComponents/FormBuilderInputEditor.vue'
+
+const FormBuilderInputEditorComp = shallowRef(FormBuilderInputEditor)
 
 export default {
   name: 'ClassroomInfo',
@@ -59,7 +63,7 @@ export default {
         { type: 'select', name: 'holding_type', responseKey: 'holding_type', options: Enums.classroomHoldingTypes, value: null, placeholder: ' ', label: 'نوع برگزاری', col: 'col-md-3 col-12' },
         { type: 'input', name: 'price', responseKey: 'price', placeholder: ' ', label: 'هزینه برگزاری', col: 'col-md-3 col-12' },
         { type: 'input', name: 'live_streaming_url', responseKey: 'live_streaming_url', placeholder: ' ', label: 'لینک مکان مجازی دوره', col: 'col-12' },
-        { type: 'inputEditor', name: 'classroom_address', responseKey: 'classroom_address', placeholder: ' ', label: 'آدرس مکان فیزیکی دوره', col: 'col-12' },
+        { type: FormBuilderInputEditorComp, name: 'classroom_address', responseKey: 'classroom_address', placeholder: ' ', label: 'آدرس مکان فیزیکی دوره', col: 'col-12' },
         {
           type: 'select',
           name: 'holding_year',
@@ -133,11 +137,11 @@ export default {
         { type: 'dateTime', name: 'publish_time', responseKey: 'publish_time', placeholder: ' ', label: 'تاریخ انتشار', col: 'col-md-6 col-12' },
 
         { type: 'separator', name: 'space', label: 'قوانین', className: 'custom-separator', col: 'col-12' },
-        { type: 'inputEditor', name: 'rules', responseKey: 'rules', label: 'قوانین دوره آموزشی', col: 'col-12' },
+        { type: FormBuilderInputEditorComp, name: 'rules', responseKey: 'rules', label: 'قوانین دوره آموزشی', col: 'col-12' },
 
-        { type: 'inputEditor', name: 'description', responseKey: 'description', label: 'توضیحات', col: 'col-12' },
-        { type: 'inputEditor', name: 'specification', responseKey: 'specification', label: 'مشخصات', col: 'col-12' },
-        { type: 'inputEditor', name: 'bulletin', responseKey: 'bulletin', label: 'تابلو اعلانات', col: 'col-12' },
+        { type: FormBuilderInputEditorComp, name: 'description', responseKey: 'description', label: 'توضیحات', col: 'col-12' },
+        { type: FormBuilderInputEditorComp, name: 'specification', responseKey: 'specification', label: 'مشخصات', col: 'col-12' },
+        { type: FormBuilderInputEditorComp, name: 'bulletin', responseKey: 'bulletin', label: 'تابلو اعلانات', col: 'col-12' },
 
         // -----------------------------------------------------------------------------------------------------------
 

src/pages/Admin/Classroom/create.vue

@@ -36,10 +36,14 @@
 </template>
 
 <script>
+import { shallowRef } from 'vue'
 import { EntityCreate } from 'quasar-crud'
 import Enums from 'src/assets/Enums/Enums.js'
 import { APIGateway } from 'src/api/APIGateway.js'
 import { FormBuilderAssist } from 'quasar-form-builder'
+import FormBuilderInputEditor from 'src/components/FormBuilderCustumComponents/FormBuilderInputEditor.vue'
+
+const FormBuilderInputEditorComp = shallowRef(FormBuilderInputEditor)
 
 export default {
   name: 'Admin.Classroom.Create',
@@ -68,7 +72,7 @@ export default {
         { type: 'select', name: 'holding_type', responseKey: 'holding_type', options: Enums.classroomHoldingTypes, value: null, placeholder: ' ', label: 'نوع برگزاری', col: 'col-md-3 col-12' },
         { type: 'input', name: 'price', responseKey: 'price', placeholder: ' ', label: 'هزینه برگزاری', col: 'col-md-3 col-12' },
         { type: 'input', name: 'live_streaming_url', responseKey: 'live_streaming_url', placeholder: ' ', label: 'لینک مکان مجازی دوره', col: 'col-12' },
-        { type: 'inputEditor', name: 'classroom_address', responseKey: 'classroom_address', placeholder: ' ', label: 'آدرس مکان فیزیکی دوره', col: 'col-12' },
+        { type: FormBuilderInputEditorComp, name: 'classroom_address', responseKey: 'classroom_address', placeholder: ' ', label: 'آدرس مکان فیزیکی دوره', col: 'col-12' },
         {
           type: 'select',
           name: 'holding_year',
@@ -142,11 +146,11 @@ export default {
         { type: 'dateTime', name: 'publish_time', responseKey: 'publish_time', placeholder: ' ', label: 'تاریخ انتشار', col: 'col-md-6 col-12' },
 
         { type: 'separator', name: 'space', label: 'قوانین', className: 'custom-separator', col: 'col-12' },
-        { type: 'inputEditor', name: 'rules', responseKey: 'rules', label: 'قوانین دوره آموزشی', col: 'col-12' },
+        { type: FormBuilderInputEditorComp, name: 'rules', responseKey: 'rules', label: 'قوانین دوره آموزشی', col: 'col-12' },
 
-        { type: 'inputEditor', name: 'description', responseKey: 'description', label: 'توضیحات', col: 'col-12' },
-        { type: 'inputEditor', name: 'specification', responseKey: 'specification', label: 'مشخصات', col: 'col-12' },
-        { type: 'inputEditor', name: 'bulletin', responseKey: 'bulletin', label: 'تابلو اعلانات', col: 'col-12' },
+        { type: FormBuilderInputEditorComp, name: 'description', responseKey: 'description', label: 'توضیحات', col: 'col-12' },
+        { type: FormBuilderInputEditorComp, name: 'specification', responseKey: 'specification', label: 'مشخصات', col: 'col-12' },
+        { type: FormBuilderInputEditorComp, name: 'bulletin', responseKey: 'bulletin', label: 'تابلو اعلانات', col: 'col-12' },
 
         // -----------------------------------------------------------------------------------------------------------