更新富文本编辑器

components/Quill/Quill.vue

@@ -1,29 +1,72 @@
 <template>
-  <view class="container">
-    <view class="page-body">
       <view class='wrapper'>
-        <view class='toolbar'>
-          <uni-icons type="bars" size="26" :color="formats.bold ? activeColor : ''" @tap.native="formatIcon('bold')" />
-          <uni-icons type="font" size="26" :color="formats.italic ? activeColor : ''" @tap.native="formatIcon('italic')" />
-          <uni-icons type="down" size="26" :color="formats.underline ? activeColor : ''" @tap.native="formatIcon('underline')" />
-          <uni-icons type="close" size="26" :color="formats.strike ? activeColor : ''" @tap.native="formatIcon('strike')" />
-          <uni-icons type="trash" size="26" @tap.native="clear" />
-          <uni-icons type="undo" size="26" @tap.native="undo" />
-          <uni-icons type="redo" size="26" @tap.native="redo" />
-          <uni-icons type="clear" size="26" @tap.native="removeFormat" />
-        </view>
         <view class="editor-wrapper">
-          <editor id="editor" class="ql-container" placeholder="开始输入..." show-img-size show-img-toolbar show-img-resize
-            :read-only="readOnly" @statuschange="onStatusChange" @input="onInput" @ready="onEditorReady" />
+          <sv-editor 
+						eid="editor" 
+						class="ql-container" 
+						placeholder="开始输入..." 
+						show-img-size show-img-toolbar show-img-resize
+            :read-only="readOnly" 
+						@statuschange="onStatusChange" 
+						pasteMode="origin" @ready="onEditorReady" @input="onInput"
+					/>
         </view>
+				<view class="page-editor-toolbar-container" v-if="toolbar">
+				  <sv-editor-toolbar
+				    ref="toolbarRef"
+				    :style-tools="[
+				      'header',
+				      'divider',
+				      'bold',
+				      'italic',
+				      'underline',
+				      'strike',
+				      'align',
+				      'color',
+				      'backgroundColor',
+				      'removeformat'
+				    ]"
+				    @changeTool="changeTool"
+				    @toolMoreItem="onToolMoreItem"
+				  >
+				    <template #at>
+				      <view class="panel-at">
+				        <view v-for="item in atList" :key="item.id" class="panel-at-item" @click="onAt(item)">
+				          {{ item.name }}
+				        </view>
+				      </view>
+				    </template>
+				    <template #topic>
+				      <view class="panel-topic">
+				        <view v-for="item in topicList" :key="item.id" class="panel-topic-item" @click="onTopic(item)">
+				          {{ item.name }}
+				        </view>
+				      </view>
+				    </template>
+				    <template #setting>
+				      <button size="mini" @click="onExport">导出</button>
+				    </template>
+				  </sv-editor-toolbar>
+				</view>
       </view>
-    </view>
-  </view>
 </template>
 
 <script>
+import SvEditorToolbar from '@/uni_modules/sv-editor/components/sv-editor/sv-editor-toolbar.vue'
+import {
+  addAt,
+  addTopic,
+  addAttachment,
+  addImage,
+  addLink,
+  addVideo
+} from '@/uni_modules/sv-editor/components/common/utils.js'	
+
 export default {
   name: 'QuillEditor',
+	components: {
+		SvEditorToolbar
+	},
   props: {
     value: {
       type: String,
@@ -32,7 +75,11 @@ export default {
     readOnly: {
       type: Boolean,
       default: false
-    }
+    },
+		toolbar: {
+			type: Boolean,
+			default: true
+		}
   },
   data() {
     return {
@@ -41,17 +88,6 @@ export default {
       activeColor: '#2979ff'
     }
   },
-  components: {
-    'uni-icons': () => import('@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue')
-  },
-  // watch: {
-  //   value(val) {
-  //     // 外部v-model变化时同步内容
-  //     if (this.editorCtx) {
-  //       this.editorCtx.setContents({ html: val });
-  //     }
-  //   }
-  // },
   mounted() {
     // #ifndef MP-BAIDU
     uni.loadFontFace({
@@ -75,11 +111,43 @@ export default {
       }).exec();
       // #endif
     },
+		changeTool(e) {
+		  console.log('changeTool ==>', e)
+		},
+		onToolMoreItem(e) {
+		  console.log('onToolMoreItem ==>', e)
+		
+		  if (e.name == 'clear') {
+		    uni.showModal({
+		      title: '提示',
+		      content: '确定要清空内容吗？',
+		      success: ({ confirm }) => {
+		        if (confirm) {
+		          this.editorCtx.clear()
+		        }
+		      }
+		    })
+		  }
+		},
     onInput(e) {
       // 触发v-model
       this.$emit('input', e.detail.html);
       this.$emit('update:value', e.detail.html);
     },
+		onAt(e) {
+		  addAt({ username: e.name, userid: e.id }, () => {
+		    uni.showToast({ title: '艾特成功' })
+		  })
+		  // 关闭弹窗
+		  this.$refs.toolbarRef.closeMorePop()
+		},
+		onTopic(e) {
+		  addTopic({ topic: e.name, link: e.id }, () => {
+		    uni.showToast({ title: '添加话题成功' })
+		  })
+		  // 关闭弹窗
+		  this.$refs.toolbarRef.closeMorePop()
+		},
     undo() {
       this.editorCtx && this.editorCtx.undo();
     },
@@ -152,10 +220,16 @@ export default {
   color: #2979ff;
 }
 .editor-wrapper {
-  min-height: 300rpx;
   background: #fff;
   border-radius: 0 0 8rpx 8rpx;
   border: 1rpx solid #eee;
   padding: 12rpx;
 }
+
+.page-editor-container {
+    flex: 1;
+    overflow-y: auto;
+    border: 10px solid #66ccff;
+    box-sizing: border-box;
+  }
 </style>