NEZ-420 feat:新增text类型图表

2020-10-20 20:53:21 +08:00
parent cf933dbbd4
commit 0815df4222
9 changed files with 493 additions and 50 deletions
--- a/nezha-fronted/src/components/charts/richTextEditor.vue
+++ b/nezha-fronted/src/components/charts/richTextEditor.vue
@@ -0,0 +1,90 @@
+<template>
+    <div >
+      <div :id="id" class="editor-core" ref="editor" style="height:350px;"></div>
+    </div>
+</template>
+
+<script>
+  import 'quill/dist/quill.snow.css'
+  import Quill from 'quill'
+  export default {
+    name: "richTextEditor",
+    props:{
+      editData:String
+    },
+    data(){
+      return {
+        id:'editor-'+this.guid(),
+        quill:null,
+        options:{
+          theme: 'snow',
+          modules:{
+            toolbar:[
+              [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
+              ['bold', 'italic', 'underline', 'strike'],
+              ['link'],
+              [{ 'list': 'ordered'}, { 'list': 'bullet' }],
+              [{ 'color': [] }, { 'background': [] }],
+              [{ 'align': [] }],
+            ]
+          }
+        },
+      }
+    },
+    created() {
+    },
+    methods:{
+      initEditor:function(){
+        let $self=this;
+        if(!this.quill){
+          this.quill = new Quill(this.$refs.editor, this.options);
+          this.quill.on('selection-change',function(range, oldRange, source){
+            let tooltip=$self.$el.querySelector('.ql-tooltip')
+            if(tooltip){
+              let left=tooltip.style.left;
+              if(left&&/\-\d+\.?\d+?px/.test(left)){
+                tooltip.style.left = '10px';
+              }
+            }
+          })
+          this.$nextTick(()=>{
+            this.$emit('after-init')
+          })
+        }
+      },
+      getHtml:function(){
+        let html=this.quill.root.innerHTML;
+        return html;
+      },
+      guid() {
+        function S4() {
+          return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
+        }
+        return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
+      },
+    },
+    watch:{
+      editData:{
+        immediate:true,
+        handler(n,o){
+          this.$nextTick(()=>{
+            this.initEditor();
+            this.quill.clipboard.dangerouslyPasteHTML(null,this.editData,'api')
+          })
+        }
+      }
+    },
+    mounted() {
+      this.initEditor();
+    }
+  }
+</script>
+
+<style>
+  .ql-editor{
+    overflow: auto;
+  }
+  .ql-tooltip{
+
+  }
+</style>