新增富文本录入组件

+<!--
+ * @Date: 2022-09-26 21:52:25
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2022-09-27 09:09:44
+ * @FilePath: /swx/src/components/activity-editor.vue
+ * @Description: 文件描述
+-->
+<template>
+  <view class="editor-box">
+    <view class="editor-box-header" v-if="showTabBar">
+      <view class="operate-box" :data-uploadImageURL="uploadImageURL" @tap="_addImage">
+        <text class="iconfont icon-image"></text>
+      </view>
+      <view class="operate-box" @tap="_addItalic">
+        <text class="iconfont icon-italic"></text>
+      </view>
+      <view class="operate-box" @tap="_addBold">
+        <text class="iconfont icon-bold"></text>
+      </view>
+      <view class="operate-box" data-header="h1" @tap="_addHeader">
+        <text class="iconfont icon-h1"></text>
+      </view>
+      <view class="operate-box" data-header="h2" @tap="_addHeader">
+        <text class="iconfont icon-h2"></text>
+      </view>
+      <view class="operate-box" data-header="h3" @tap="_addHeader">
+        <text class="iconfont icon-h3"></text>
+      </view>
+      <view class="operate-box" data-align="left" @tap="_addAlign">
+        <text class="iconfont icon-alignLeft"></text>
+      </view>
+      <view class="operate-box" data-align="right" @tap="_addAlign">
+        <text class="iconfont icon-alignRight"></text>
+      </view>
+      <view class="operate-box" data-list="ordered" @tap="_addList">
+        <text class="iconfont icon-orderedList"></text>
+      </view>
+      <view class="operate-box" data-list="bullet" @tap="_addList">
+        <text class="iconfont icon-unorderedList"></text>
+      </view>
+      <view class="operate-box" @tap="_undo">
+        <text class="iconfont icon-undo"></text>
+      </view>
+    </view>
+    <view class="editor-box-content">
+      <editor id="editor" :name="name" :placeholder="placeholder" @ready="_onEditorReady"
+        @input="_onInputting" :show-img-resize="true"></editor>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+</script>
+<script>
+import Taro from '@tarojs/taro'
+
+export default {
+  props: ['showTabBar', 'placeholder', 'name', 'uploadImageURL'],
+  data () {
+    return {
+
+    }
+  },
+  methods: {
+    _onEditorReady: function () {
+      const that = this;
+      Taro.createSelectorQuery().select('#editor').context(function (res) {
+        that.editorCtx = res.context
+      }).exec()
+    },
+    //插入图片
+    _addImage: function (event) {
+      let _this = this;
+      wx.chooseImage({
+        count: 1,
+        sizeType: ['compressed'],
+        sourceType: ['album'],
+        success: function (res) {
+          wx.showLoading({
+            title: '上传中',
+            mask: true
+          });
+          _this._uploadImage(res.tempFilePaths[0], event.currentTarget.dataset.uploadimageurl);
+        }
+      });
+    },
+    _uploadImage: function (tempFilePath, uploadImageURL) {
+      let _this = this;
+      wx.uploadFile({
+        filePath: tempFilePath,
+        name: 'image',
+        url: uploadImageURL,
+        success: function (res) {
+          res = JSON.parse(res.data);
+          wx.hideLoading({
+            success: () => {
+              if (res.code === 200) {
+                _this.editorCtx.insertImage({
+                  src: res.data
+                });
+              } else {
+                wx.showToast({
+                  icon: 'error',
+                  title: '服务器错误,稍后重试！',
+                  mask: true
+                })
+              }
+            },
+          });
+        }
+      });
+    },
+    //设置斜体
+    _addItalic: function () {
+      this.editorCtx.format("italic")
+    },
+    //添加粗体样式
+    _addBold: function () {
+      this.editorCtx.format("bold")
+    },
+    //设置标题
+    _addHeader: function (e) {
+      let headerType = e.currentTarget.dataset.header;
+      this.editorCtx.format("header", headerType)
+    },
+    //设置文字的排列方式
+    _addAlign: function (e) {
+      let alignType = e.currentTarget.dataset.align;
+      this.editorCtx.format("align", alignType);
+    },
+    //设置列表
+    _addList: function (e) {
+      let listType = e.currentTarget.dataset.list;
+      this.editorCtx.format("list", listType);
+    },
+    //撤销
+    _undo: function () {
+      this.editorCtx.undo();
+    },
+    //监控输入
+    _onInputting: function (e) {
+      let html = e.detail.html;
+      let text = e.detail.text;
+      // this.triggerEvent("input", { html: html, text: text }, {});
+      console.warn(html);
+      console.warn(text);
+    }
+  }
+}
+</script>
+
+
+<style lang="less">
+/* components/hg-editor/hg-editor.wxss */
+@import "./iconfont.less";
+
+.editor-box {
+  width: 100%;
+  padding: 0;
+  box-sizing: border-box;
+  background-color: #fff;
+  border: 2px solid #f6f6f6;
+}
+
+.editor-box-header,
+.editor-box-content {
+  width: 100%;
+}
+
+.editor-box-header {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 20rpx 20rpx;
+  box-sizing: border-box;
+  border-bottom: 2rpx solid #f6f6f6;
+  background-color: #f6f6f6;
+}
+
+.editor-box-header>.operate-box {
+  margin-right: 20rpx;
+  width: 40rpx;
+  height: 40rpx;
+  overflow: hidden;
+  color: gray;
+}
+
+.editor-box-content {
+  padding: 20rpx;
+  box-sizing: border-box;
+}
+</style>

+@font-face {
+  font-family: 'iconfont';  /* Project id 2549449 */
+  src: url('//at.alicdn.com/t/font_2549449_hxmflg4qsr6.woff2?t=1621002720450') format('woff2'),
+       url('//at.alicdn.com/t/font_2549449_hxmflg4qsr6.woff?t=1621002720450') format('woff'),
+       url('//at.alicdn.com/t/font_2549449_hxmflg4qsr6.ttf?t=1621002720450') format('truetype');
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 38rpx;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-undo:before {
+  content: "\e609";
+}
+
+.icon-hr:before {
+  content: "\e60a";
+}
+
+.icon-h3:before {
+  content: "\e60b";
+}
+
+.icon-quote:before {
+  content: "\e60c";
+}
+
+.icon-bold:before {
+  content: "\e60e";
+}
+
+.icon-orderedList:before {
+  content: "\e612";
+}
+
+.icon-h2:before {
+  content: "\e61a";
+}
+
+.icon-italic:before {
+  content: "\e61c";
+}
+
+.icon-unorderedList:before {
+  content: "\e620";
+}
+
+.icon-alignLeft:before {
+  content: "\e621";
+}
+
+.icon-alignRight:before {
+  content: "\e622";
+}
+
+.icon-h1:before {
+  content: "\e623";
+}
+
+.icon-image:before {
+  content: "\e629";
+}

 <!--
  * @Date: 2022-09-21 16:04:10
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-09-26 14:25:45
+ * @LastEditTime: 2022-09-26 23:02:43
  * @FilePath: /swx/src/pages/createActivity/index.vue
  * @Description: 创建活动页面
 -->
@@ -31,9 +31,10 @@
       <view class="divide-line"></view>
       <view class="form-item">
         <view class="form-item-title border">活动详情</view>
-        <van-field :value="message" input-class="input-class" label="" inputAlign="" maxlength="" placeholderStyle=""
+        <!-- <van-field :value="message" input-class="input-class" label="" inputAlign="" maxlength="" placeholderStyle=""
           rightIcon="" type="textarea" placeholder="开始输入活动详情介绍" :autosize="{ maxHeight: 200, minHeight: 100 }"
-          custom-style="padding-left: 0;" />
+          custom-style="padding-left: 0;" /> -->
+        <activity-editor name="editor" :showTabBar="true" placeholder="开始输入活动详情介绍"></activity-editor>
       </view>
       <view class="divide-line"></view>
       <view class="form-item">
@@ -276,6 +277,7 @@ import icon_upload from '@/images/icon/upload@2x.png'
 import icon_vip from '@/images/icon/vip@2x.png'
 import icon_sel from '@/images/icon/sel@2x.png'
 import timePickerData from "@/components/time-picker-data/picker";
+import activityEditor from "@/components/activity-editor";
 
 const value1 = ref('');
 const message = ref('');