add Quill Editor Component

src/components/noTemplateComponents/richInput.js

@@ -1,2 +1,65 @@
+import Quill from "quill"
+import 'quill/dist/quill.snow.css'
+
 // 富文本组件
-export default {}
+export default {
+  name: 'QuillRichInput',
+  props: ['readonly', 'placeholder', 'scroll']
+  ,
+  data() {
+    return {
+      ReadOnlyMode: false,
+      Placeholder: '',
+      ScrollingContainer: null
+    }
+  },
+  watch: {
+    readonly(val) {
+      this.ReadOnlyMode = val
+    },
+    placeholder(val) {
+      this.Placeholder = val
+    },
+    scroll(val) {
+      this.ScrollingContainer = val
+    }
+  },
+  mounted() {
+    console.log('[Quill Editor] ref:', this.$refs['quill-editor'])
+    /** https://blog.csdn.net/qq_36947168/article/details/119486710 */
+    /** https://quilljs.com/docs/modules/toolbar/ */
+    const toolbarOptions = [
+      [{ 'font': [] }],
+      [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
+      ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
+      ['blockquote', 'code-block'],
+    
+      [{ 'header': 1 }, { 'header': 2 }],               // custom button values
+      [{ 'list': 'ordered'}, { 'list': 'bullet' }],
+      [{ 'script': 'sub'}, { 'script': 'super' }],      // superscript/subscript
+      [{ 'indent': '-1'}, { 'indent': '+1' }],          // outdent/indent
+      [{ 'direction': 'rtl' }],                         // text direction
+    
+      [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
+    
+      [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
+      [{ 'align': [] }],
+    
+      ['clean']                                         // remove formatting button
+    ];
+    // const editor = new Quill(this.$refs['quill-editor'], this.defaultConfig)
+    const editor = new Quill(this.$refs['quill-editor'], {
+      modules: {
+        toolbar: toolbarOptions
+      },
+      theme: 'snow',
+      readOnly: this.ReadOnlyMode,
+      placeholder: this.Placeholder,
+      scrollingContainer: this.ScrollingContainer
+    })
+  },
+  methods: {},
+  render: function (h) {
+    return h('div', { ref: 'quill-editor', domProps: { id: 'quill-editor' } })
+  }
+}