线上营销

2025-07-28 13:14:45 +08:00
parent 91e17af463
commit fce7f0985c
4 changed files with 387 additions and 30 deletions
--- a/components/Quill/Quill.vue
+++ b/components/Quill/Quill.vue
@@ -0,0 +1,161 @@
+<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" />
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'QuillEditor',
+  props: {
+    value: {
+      type: String,
+      default: ''
+    },
+    readOnly: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      formats: {},
+      editorCtx: null,
+      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({
+      family: 'Pacifico',
+      source: 'url("https://sungd.github.io/Pacifico.ttf")'
+    })
+    // #endif
+  },
+  methods: {
+    onEditorReady() {
+      // #ifdef MP-BAIDU
+      this.editorCtx = requireDynamicLib('editorLib').createEditorContext('editor');
+      // #endif
+      // #ifdef APP-PLUS || MP-WEIXIN || H5
+      uni.createSelectorQuery().select('#editor').context((res) => {
+        this.editorCtx = res.context;
+        // 初始化内容
+        if (this.value) {
+          this.editorCtx.setContents({ html: this.value });
+        }
+      }).exec();
+      // #endif
+    },
+    onInput(e) {
+      // 触发v-model
+      this.$emit('input', e.detail.html);
+      this.$emit('update:value', e.detail.html);
+    },
+    undo() {
+      this.editorCtx && this.editorCtx.undo();
+    },
+    redo() {
+      this.editorCtx && this.editorCtx.redo();
+    },
+    // uni-icons点击格式化
+    formatIcon(name) {
+      if (!name) return;
+      this.editorCtx && this.editorCtx.format(name);
+    },
+    onStatusChange(e) {
+      this.formats = e.detail;
+    },
+    insertDivider() {
+      this.editorCtx && this.editorCtx.insertDivider({
+        success: function() {
+          // divider inserted
+        }
+      });
+    },
+    clear() {
+      uni.showModal({
+        title: '清空编辑器',
+        content: '确定清空编辑器全部内容？',
+        success: res => {
+          if (res.confirm) {
+            this.editorCtx && this.editorCtx.clear();
+          }
+        }
+      });
+    },
+    removeFormat() {
+      this.editorCtx && this.editorCtx.removeFormat();
+    },
+    insertDate() {
+      const date = new Date();
+      const formatDate = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
+      this.editorCtx && this.editorCtx.insertText({ text: formatDate });
+    },
+    insertImage() {
+      uni.chooseImage({
+        count: 1,
+        success: (res) => {
+          this.editorCtx && this.editorCtx.insertImage({
+            src: res.tempFilePaths[0],
+            alt: '图像'
+          });
+        }
+      });
+    }
+  }
+}
+</script>
+
+<style scoped>
+.container {
+  width: 100%;
+}
+.toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  background: #f7f7f7;
+  border-radius: 8rpx 8rpx 0 0;
+  padding: 8rpx 0;
+  font-size: 40rpx;
+}
+.ql-active {
+  color: #2979ff;
+}
+.editor-wrapper {
+  min-height: 300rpx;
+  background: #fff;
+  border-radius: 0 0 8rpx 8rpx;
+  border: 1rpx solid #eee;
+  padding: 12rpx;
+}
+</style>