1

app.wxss

@@ -14,7 +14,6 @@
 }
 
 @import "/icon/icon.wxss";
-@import "/icon/icon-editor.wxss";
 
 /* 系统颜色字体配置 */
 page {

commpents/editor/index.js

@@ -0,0 +1,97 @@
+// components/editor/index.js
+const app = getApp()
+Component({
+    /**
+     * 组件的属性列表
+     */
+    properties: {
+        content: { type: String, value: '' },
+        name: { type: String, value: '' }
+    },
+    // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
+    attached: function () { }, // 此处attached的声明会被lifetimes字段中的声明覆盖
+    ready: function () { },
+    pageLifetimes: {
+        // 组件所在页面的生命周期函数
+        show: function () { const that = this; that.search() },
+        hide: function () { },
+        resize: function () { },
+    },
+
+    /**
+     * 组件的初始数据
+     */
+    data: {
+        formats: {},
+        // 客户端平台，是否为苹果
+        isIOS: false
+    },
+
+    /**
+     * 组件的方法列表
+     */
+    methods: {
+        search() {
+            const that = this;
+            // 获取当前小程序版本
+            const platform = wx.getSystemInfoSync().platform;
+            // 客户端平台
+            const isIOS = platform === 'ios'
+            that.setData({ isIOS });
+        },
+        // 编辑初始化完成时触发
+        bindready: function () {
+            const that = this;
+            const query = wx.createSelectorQuery()
+            query.in(this).select('#editor').context(function (res) {
+                that.editorCtx = res.context;
+                let { content } = that.data;
+                let html = content;
+                if (html) that.editorCtx.setContents({ html })
+            }).exec()
+        },
+        // 编辑器值改变时触发
+        bindInput: function (e) {
+            const that = this;
+            const { html, text } = e.detail;
+            this.triggerEvent("bindInput", { html, text, name: that.properties.name });
+        },
+        // 样式设置
+        format(e) {
+            let { name, value, tips } = e.target.dataset
+            if (!name) return;
+            this.editorCtx.format(name, value);
+            wx.showToast({ title: `${tips}`, icon: 'none', duration: 2000 });
+        },
+        // 上传图片
+        insertImage() {
+            const that = this
+            wx.chooseImage({
+                count: 1,
+                sizeType: ['compressed'],
+                sourceType: ['album'],
+                success: function (res) {
+                    that._uploadImage(res.tempFilePaths[0]);
+                }
+            });
+        },
+        // 提交图片
+        _uploadImage: function (tempFilePath) {
+            let that = this;
+            wx.uploadFile({
+                url: `${app.globalData.serverUrl}/files/court/elimg/upload`,
+                filePath: tempFilePath,
+                name: 'file',
+                formData: {},
+                success: (res) => {
+                    let arr = JSON.parse(res.data);
+                    if (arr.errcode == '0') {
+                        that.editorCtx.insertImage({ src: app.globalData.serverUrl + arr.uri });
+                    } else {
+                        wx.showToast({ title: `${arr.errmsg}`, icon: 'fail', duration: 2000 })
+                    }
+                },
+            })
+        },
+    }
+})

commpents/editor/index.json

@@ -0,0 +1,4 @@
+{
+    "component": true,
+    "usingComponents": {}
+}

commpents/editor/index.less

@@ -0,0 +1,26 @@
+@import (css) "/icon/editoricon.wxss";
+
+.main {
+    padding: 2vw;
+    border: 1px solid #0000ff;
+
+
+
+    .two {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-around;
+        margin: 0 0 2vw 0;
+
+        .two_1 {
+            text-align: center;
+            border: 1px solid #cccccc;
+            padding: 1vw 2vw;
+            border-radius: 4px;
+
+            .iconfont {
+                font-size: 18px;
+            }
+        }
+    }
+}

commpents/editor/index.wxml

@@ -0,0 +1,39 @@
+<!-- <view class="container" style="height:{{editorHeight}}px;">
+    <editor id="editor" class="ql-container" placeholder="{{placeholder}}" bindstatuschange="onStatusChange" bindready="onEditorReady">
+    </editor>
+</view>
+
+<view class="toolbar" catchtouchend="format" hidden="{{keyboardHeight > 0 ? false : true}}" style="bottom: {{isIOS ? keyboardHeight : 0}}px">
+    <i class="iconfont icon-charutupian" catchtouchend="insertImage"></i>
+    <i class="iconfont icon-format-header-2 {{formats.header === 2 ? 'ql-active' : ''}}" data-name="header" data-value="{{2}}"></i>
+    <i class="iconfont icon-format-header-3 {{formats.header === 3 ? 'ql-active' : ''}}" data-name="header" data-value="{{3}}"></i>
+    <i class="iconfont icon-zitijiacu {{formats.bold ? 'ql-active' : ''}}" data-name="bold"></i>
+    <i class="iconfont icon-zitixieti {{formats.italic ? 'ql-active' : ''}}" data-name="italic"></i>
+    <i class="iconfont icon-zitixiahuaxian {{formats.underline ? 'ql-active' : ''}}" data-name="underline"></i>
+    <i class="iconfont icon--checklist" data-name="list" data-value="check"></i>
+    <i class="iconfont icon-youxupailie {{formats.list === 'ordered' ? 'ql-active' : ''}}" data-name="list" data-value="ordered"></i>
+    <i class="iconfont icon-wuxupailie {{formats.list === 'bullet' ? 'ql-active' : ''}}" data-name="list" data-value="bullet"></i>
+</view> -->
+<view class="main">
+    <view class="two" catchtouchend="format">
+        <view class="two_1">
+            <text class="iconfont icon-tupian" catchtouchend="insertImage"></text>
+        </view>
+        <view class="two_1">
+            <text class="iconfont icon-bold" data-name="bold" data-tips="加粗"></text>
+        </view>
+        <view class="two_1">
+            <text class="iconfont icon-zitixieti" data-name="italic" data-tips="斜体"></text>
+        </view>
+        <view class="two_1">
+            <text class="iconfont icon-orderedList" data-name="list" data-value="ordered" data-tips="有序列表"></text>
+        </view>
+        <view class="two_1">
+            <text class="iconfont icon-unorderedList" data-name="list" data-value="bullet" data-tips="无序列表"></text>
+        </view>
+    </view>
+    <view class="one">
+        <editor id="editor" placeholder="请输入信息内容" bindready="bindready" bind:input="bindInput">
+        </editor>
+    </view>
+</view>

commpents/editor/index.wxss

@@ -0,0 +1,20 @@
+@import "/icon/editoricon.wxss";
+.main {
+  padding: 2vw;
+  border: 1px solid #0000ff;
+}
+.main .two {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  margin: 0 0 2vw 0;
+}
+.main .two .two_1 {
+  text-align: center;
+  border: 1px solid #cccccc;
+  padding: 1vw 2vw;
+  border-radius: 4px;
+}
+.main .two .two_1 .iconfont {
+  font-size: 18px;
+}

commpents/hg-editor/hg-editor.js

@@ -1,115 +0,0 @@
-// components/hg-editor/hg-editor.js
-const app = getApp()
-Component({
-    /**
-     * 组件的属性列表
-     */
-    properties: {
-        /**是否显示工具栏 */
-        showTabBar: {
-            type: 'Boolean',
-            value: true
-        },
-        placeholder: {
-            type: 'String',
-            value: '请输入相关内容'
-        },
-        name: {
-            type: 'String',
-            value: ''
-        },
-    },
-    // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
-    attached: function () { }, // 此处attached的声明会被lifetimes字段中的声明覆盖
-    ready: function () { },
-    pageLifetimes: {
-        // 组件所在页面的生命周期函数
-        show: function () { },
-        hide: function () { },
-        resize: function () { },
-    },
-
-    /**
-     * 组件的初始数据
-     */
-    data: {
-
-    },
-
-    /**
-     * 组件的方法列表
-     */
-    methods: {
-        _onEditorReady: function () {
-            const that = this;
-            that.createSelectorQuery().select('#editor').context(function (res) {
-                that.editorCtx = res.context;
-                let { name } = that.data;
-                let html = name;
-                if (html) that.editorCtx.setContents({ html })
-            }).exec()
-        },
-        //插入图片
-        _addImage: function (event) {
-            let _this = this;
-            wx.chooseImage({
-                count: 1,
-                sizeType: ['compressed'],
-                sourceType: ['album'],
-                success: function (res) {
-                    _this._uploadImage(res.tempFilePaths[0]);
-                }
-            });
-        },
-        _uploadImage: function (tempFilePath) {
-            let _this = this;
-            wx.uploadFile({
-                url: `${app.globalData.fileUrl}/files/court/elimg/upload`,
-                filePath: tempFilePath,
-                name: 'file',
-                formData: {},
-                success: (res) => {
-                    let arr = JSON.parse(res.data);
-                    if (arr.errcode == '0') {
-                        _this.editorCtx.insertImage({ src: app.globalData.fileUrl + arr.uri });
-                    } else {
-                        wx.showToast({ title: `${arr.errmsg}`, icon: 'fail', duration: 2000 })
-                    }
-                },
-            })
-        },
-        //设置斜体
-        _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 }, {});
-        }
-    }
-})

commpents/hg-editor/hg-editor.json

@@ -1,4 +0,0 @@
-{
-  "component": true,
-  "usingComponents": {}
-}

commpents/hg-editor/hg-editor.wxml

@@ -1,43 +0,0 @@
-<view class="editor-box">
-    <view class="editor-box-header" wx:if="{{showTabBar}}">
-        <view class="operate-box" data-uploadImageURL="{{uploadImageURL}}" bind:tap="_addImage">
-            <text class="iconfont icon-tupian"></text>
-        </view>
-        <view class="operate-box" bind:tap="_addItalic">
-            <text class="iconfont icon-zitixieti"></text>
-        </view>
-        <view class="operate-box" bind:tap="_addBold">
-            <text class="iconfont icon-bold"></text>
-        </view>
-        <view class="operate-box" data-header="h1" bind:tap="_addHeader">
-            <text class="iconfont icon-h1"></text>
-        </view>
-        <view class="operate-box" data-header="h2" bind:tap="_addHeader">
-            <text class="iconfont icon-h2"></text>
-        </view>
-        <view class="operate-box" data-header="h3" bind:tap="_addHeader">
-            <text class="iconfont icon-h3"></text>
-        </view>
-        <view class="operate-box" data-align="left" bind:tap="_addAlign">
-            <text class="iconfont icon-alignLeft"></text>
-        </view>
-        <view class="operate-box" data-align="center" bind:tap="_addAlign">
-            <text class="iconfont icon-center"></text>
-        </view>
-        <view class="operate-box" data-align="right" bind:tap="_addAlign">
-            <text class="iconfont icon-alignRight"></text>
-        </view>
-        <view class="operate-box" data-list="ordered" bind:tap="_addList">
-            <text class="iconfont icon-orderedList"></text>
-        </view>
-        <view class="operate-box" data-list="bullet" bind:tap="_addList">
-            <text class="iconfont icon-unorderedList"></text>
-        </view>
-        <view class="operate-box" bind:tap="_undo">
-            <text class="iconfont icon-undo"></text>
-        </view>
-    </view>
-    <view class="editor-box-content">
-        <editor id="editor" name="{{name}}" placeholder="{{placeholder}}" bindready="_onEditorReady" bind:input="_onInputting" show-img-resize="{{true}}"></editor>
-    </view>
-</view>

commpents/hg-editor/hg-editor.wxss

@@ -1,48 +0,0 @@
-/* components/hg-editor/hg-editor.wxss */
-@import "/icon/icon-editor.wxss";
-
-.editor-box {
-    width: 94%;
-    padding: 0;
-    height: 70vh;
-    box-sizing: border-box;
-    background-color: #fff;
-    border: 2px solid #f6f6f6;
-}
-
-.editor-box-header {
-    width: 100%;
-
-}
-
-.editor-box-content {
-    width: 100%;
-    height: 63vh;
-}
-
-.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;
-}

icon/editoricon.wxss

@@ -0,0 +1,63 @@
+@font-face {
+    font-family: "iconfont";
+    /* Project id 3618777 */
+    src: url('//at.alicdn.com/t/c/font_3618777_jt1c9kwnge.woff2?t=1661840869173') format('woff2'),
+        url('//at.alicdn.com/t/c/font_3618777_jt1c9kwnge.woff?t=1661840869173') format('woff'),
+        url('//at.alicdn.com/t/c/font_3618777_jt1c9kwnge.ttf?t=1661840869173') format('truetype');
+}
+
+.iconfont {
+    font-family: "iconfont" !important;
+    font-size: 16px;
+    font-style: normal;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-unorderedList:before {
+    content: "\e620";
+}
+
+.icon-h1:before {
+    content: "\e623";
+}
+
+.icon-undo:before {
+    content: "\e609";
+}
+
+.icon-orderedList:before {
+    content: "\e612";
+}
+
+.icon-alignLeft:before {
+    content: "\e621";
+}
+
+.icon-alignRight:before {
+    content: "\e622";
+}
+
+.icon-center:before {
+    content: "\e62e";
+}
+
+.icon-zitixieti:before {
+    content: "\ec85";
+}
+
+.icon-tupian:before {
+    content: "\e730";
+}
+
+.icon-h3:before {
+    content: "\e60b";
+}
+
+.icon-h2:before {
+    content: "\e61b";
+}
+
+.icon-bold:before {
+    content: "\eaef";
+}

icon/icon-editor.wxss

@@ -1,63 +0,0 @@
-@font-face {
-    font-family: "iconfont"; /* Project id 3618777 */
-    src: url('//at.alicdn.com/t/c/font_3618777_jt1c9kwnge.woff2?t=1661840869173') format('woff2'),
-         url('//at.alicdn.com/t/c/font_3618777_jt1c9kwnge.woff?t=1661840869173') format('woff'),
-         url('//at.alicdn.com/t/c/font_3618777_jt1c9kwnge.ttf?t=1661840869173') format('truetype');
-  }
-  
-  .iconfont {
-    font-family: "iconfont" !important;
-    font-size: 16px;
-    font-style: normal;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-  }
-  
-  .icon-unorderedList:before {
-    content: "\e620";
-  }
-  
-  .icon-h1:before {
-    content: "\e623";
-  }
-  
-  .icon-undo:before {
-    content: "\e609";
-  }
-  
-  .icon-orderedList:before {
-    content: "\e612";
-  }
-  
-  .icon-alignLeft:before {
-    content: "\e621";
-  }
-  
-  .icon-alignRight:before {
-    content: "\e622";
-  }
-  
-  .icon-center:before {
-    content: "\e62e";
-  }
-  
-  .icon-zitixieti:before {
-    content: "\ec85";
-  }
-  
-  .icon-tupian:before {
-    content: "\e730";
-  }
-  
-  .icon-h3:before {
-    content: "\e60b";
-  }
-  
-  .icon-h2:before {
-    content: "\e61b";
-  }
-  
-  .icon-bold:before {
-    content: "\eaef";
-  }
-  

pagesMatch/matchAdmin/match/add.js

@@ -70,10 +70,10 @@ Page({
         if (data) { that.setData({ 'form.format': data.value, 'form.zhFormat': data.label }); }
     },
     //赛事规程
-    inputChange: function (e) {
+    bindInput: function (e) {
         const that = this;
-        let html = e.detail.html;
-        that.setData({ "form.regular": html });
+        const { html, text, name } = e.detail;
+        that.setData({ [`form.${name}`]: html })
     },
     toSubmit: async function (e) {
         const that = this;
@@ -138,6 +138,7 @@ Page({
                         // 赛事赛制
                         let format = that.data.formatList.find(i => i.value == arr.data.format)
                         if (format) arr.data.zhFormat = format.label;
+                        console.log(arr.data);
                         that.setData({ form: arr.data });
                     }
                 }

pagesMatch/matchAdmin/match/add.json

@@ -1,9 +1,9 @@
 {
     "component": true,
     "usingComponents": {
-      "mobile-main": "/commpents/mobile-frame/index",
-      "upload": "/commpents/upload/index",
-      "hg-editor": "/commpents/hg-editor/hg-editor",
-      "datatime-picker": "/commpents/datetime-picker/index"
+        "mobile-main": "/commpents/mobile-frame/index",
+        "upload": "/commpents/upload/index",
+        "e-editor": "/commpents/editor/index",
+        "datatime-picker": "/commpents/datetime-picker/index"
     }
-  }
+}

pagesMatch/matchAdmin/match/add.wxml

@@ -86,7 +86,7 @@
                 </view>
                 <view class="content">
                     <view class="value">
-                        <hg-editor placeholder="请输入赛事规程" name="{{form.regular}}" bind:input="inputChange" bind:ready="onEditorReady"> </hg-editor>
+                        <e-editor content="{{form.regular}}" name="regular" bind:bindInput="bindInput"></e-editor>
                     </view>
                 </view>
                 <view class="content">