富文本

components/My_richText/content.js

@@ -0,0 +1,48 @@
+module.exports = `<title>富文本示例</title>
+<div>
+  <section style="text-align: center; margin: 0px auto;">
+    <section style="border-radius: 4px; border: 1px solid #757576; display: inline-block; padding: 5px 20px;">
+      <span style="font-size: 18px; color: #595959;">表格</span>
+    </section>
+  </section>
+  <section style="margin-top: 1.5em;">
+    <table width="100%" border="1" cellspacing="0" cellpadding="5" style="border-collapse: collapse;">
+      <thead>
+        <tr>
+          <th>标题 1</th>
+          <th>标题 2</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td align="center"></td>
+          <td align="center">内容 2</td>
+        </tr>
+        <tr>
+          <td align="center">内容 3</td>
+          <td align="center">内容 4</td>    
+        </tr>
+        <tr>
+          <td align="center">内容 5</td>
+          <td align="center">内容 6</td>
+        </tr>
+      </tbody>
+    </table>
+  </section>
+  <section style="text-align: center; margin: 0px auto; margin-top: 2em">
+    <section style="border-radius: 4px; border: 1px solid #757576; display: inline-block; padding: 5px 20px;">
+      <span style="font-size: 18px; color: #595959;">文本</span>
+    </section>
+  </section>
+  <section style="margin-top: 1.5em;">
+    &ldquo;富文本编辑器&rdquo;不同于文本编辑器，程序员可到网上下载免费的富文本编辑器内嵌于自己的网站或程序里（当然付费的功能会更强大些），方便用户编辑文章或信息。这是一条<a href="https://github.com/jin-yufeng/mp-html">链接</a>
+  </section>
+  <section style="text-align: center; margin: 0px auto; margin-top: 2em">
+    <section style="border-radius: 4px; border: 1px solid #757576; display: inline-block; padding: 5px 20px;">
+      <span style="font-size: 18px; color: #595959;">图片</span>
+    </section>
+  </section>
+  <section style="margin-top: 1.5em; text-align: center;">
+    <img src="/demo-thumb.jpg?sign=91b3e495d16f96a0df3d263c9ff95821&t=1609059235" original-src="/demo.jpg?sign=af7082bed28711177bd952dbab67373e&t=1609059255">
+  </section>
+</div>`

components/My_richText/index.js

@@ -0,0 +1,189 @@
+const _Http = getApp().globalData.http;
+
+Component({
+    /**
+     * 组件的属性列表
+     */
+    properties: {
+        //富文本内容
+        content: {
+            type: String,
+            value: ""
+        },
+        //是否开启编辑
+        editable: {
+            type: Boolean,
+            value: true
+        },
+        show: {
+            type: Boolean,
+            value: false
+        },
+        callback: {
+            type: Function
+        }
+    },
+
+    lifetimes: {
+        attached: function () {
+            this.ctx = this.selectComponent('#article');
+            this.ctx.getSrc = (type, value) => {
+                return new Promise((resolve, reject) => {
+                    if (type === 'img' || type === 'video') {
+                        // 本地选取
+                        if (type === 'img') {
+                            resolve(this.data.fileMsg.url)
+                        } else {
+                            resolve(this.data.fileMsg.url)
+                        }
+                    } else {
+                        this.callback = {
+                            resolve,
+                            reject
+                        }
+                        let title
+                        if (type === 'audio') {
+                            title = '音频链接'
+                        } else if (type === 'link') {
+                            title = '链接地址'
+                        }
+                        this.setData({
+                            modal: {
+                                title,
+                                value
+                            }
+                        })
+                    }
+                })
+            }
+        },
+        detached: function () {
+            // 在组件实例被从页面节点树移除时执行
+        },
+    },
+
+    /**
+     * 组件的初始数据
+     */
+    data: {},
+
+    /**
+     * 组件的方法列表
+     */
+    methods: {
+        insertImgEdit({
+            detail
+        }) {
+            this.binding('insertImg', detail)
+        },
+        insertVideoEdit({
+            detail
+        }) {
+            this.binding('insertVideo', detail)
+        },
+        binding(type, id) {
+            const that = this;
+            let pages = getCurrentPages();
+            let prevPage = pages[pages.length - 1];
+            _Http.basic({
+                "classname": "system.attachment.Attachment",
+                "method": "createFileLink",
+                "content": {
+                    "ownertable": "SAT_SHAREMATERIAL",
+                    "ownerid": prevPage.data.detailsData.sat_sharematerialid,
+                    "usetype": "richtext",
+                    "attachmentids": id
+                }
+            }).then(res => {
+                if (res.msg != '成功') return wx.showToast({
+                    title: res.data,
+                    icon: "none"
+                });
+                this.setData({
+                    fileMsg: res.data[0]
+                })
+                prevPage.setData({
+                    richTextFile: prevPage.data.richTextFile.concat(res.data[0])
+                })
+                that.ctx[type]();
+            })
+        },
+        // 删除图片/视频/音频标签事件
+        remove({
+            detail
+        }) {
+            let pages = getCurrentPages();
+            let prevPage = pages[pages.length - 1];
+            let richTextFile = prevPage.data.richTextFile;
+            let index = richTextFile.findIndex((value) => value.url == detail.src);
+            _Http.basic({
+                "classname": "system.attachment.Attachment",
+                "method": "deleteFileLink",
+                "content": {
+                    "linksids": [richTextFile[index].linksid]
+                }
+            }).then(res => {
+                richTextFile.splice(index, 1);
+                prevPage.setData({
+                    richTextFile
+                })
+            })
+        },
+        // 处理模态框
+        modalInput(e) {
+            this.value = e.detail.value
+        },
+        modalConfirm() {
+            this.callback.resolve(this.value || this.data.modal.value || '')
+            this.setData({
+                modal: null
+            })
+        },
+        modalCancel() {
+            this.callback.reject()
+            this.setData({
+                modal: null
+            })
+        },
+        // 调用编辑器接口
+        edit(e) {
+            this.ctx[e.currentTarget.dataset.method]()
+        },
+        // 清空编辑器内容
+        clear() {
+            wx.showModal({
+                title: '确认',
+                content: '确定清空内容吗？',
+                success: res => {
+                    if (res.confirm) this.ctx.clear()
+                }
+            })
+        },
+        // 保存编辑器内容
+        save() {
+            // 避免无法获取到正在编辑的文本内容
+            setTimeout(() => {
+                let content = this.ctx.getContent(),
+                    that = this;
+                wx.showModal({
+                    title: '保存',
+                    content: "是否确认保存",
+                    confirmText: '完成',
+                    success: res => {
+                        if (res.confirm) {
+                            that.triggerEvent("callback", content);
+                            that.closeShow();
+                        }
+                    }
+                })
+            }, 50)
+        },
+        closeShow() {
+            let pages = getCurrentPages();
+            let prevPage = pages[pages.length - 1];
+            prevPage.setData({
+                editRichText: false
+            })
+        }
+    }
+})

components/My_richText/index.json

@@ -0,0 +1,8 @@
+{
+    "component": true,
+    "usingComponents": {
+        "mp-html": "../mp-html/index",
+        "van-popup": "@vant/weapp/popup/index",
+        "My_upload": "/components/My_upload/index"
+    }
+}

components/My_richText/index.wxml

@@ -0,0 +1,36 @@
+<van-popup show="{{ show }}" position="bottom" round custom-style="height: 100%;" bind:close="onClose">
+    <view class="editor_toolbox">
+        <block wx:if="{{editable}}">
+            <text class="iconfont icon-save" bindtap="save" />
+            <text class="iconfont icon-undo" data-method="undo" bindtap="edit" />
+            <text class="iconfont icon-redo" data-method="redo" bindtap="edit" />
+            <My_upload class="iconfont" accept='image' binduploadCallback="insertImgEdit">
+                <text class="iconfont icon-img" />
+            </My_upload>
+            <My_upload class="iconfont" accept='video' binduploadCallback="insertVideoEdit">
+                <text class="iconfont icon-video" />
+            </My_upload>
+            <!-- <text class="iconfont icon-link" data-method="insertLink" bindtap="edit" /> -->
+            <text class="iconfont icon-text" data-method="insertText" bindtap="edit" />
+            <text class="iconfont icon-clear" bindtap="clear" />
+            <van-icon class="iconfont" name="close" bindtap="closeShow" />
+        </block>
+        <view class="back" wx:else bindtap="closeShow">
+            <van-icon name="arrow-left" /> 返回
+        </view>
+    </view>
+    <view style="padding-top: 50px;">
+        <mp-html id="article" container-style="padding:20px" content="{{content}}" editable="{{editable}}" bindremove="remove" />
+    </view>
+    <block wx:if="{{modal}}">
+        <view class="mask" />
+        <view class="modal">
+            <view class="modal_title">{{modal.title}}</view>
+            <input class="modal_input" value="{{modal.value}}" maxlength="-1" auto-focus bindinput="modalInput" />
+            <view class="modal_foot">
+                <view class="modal_button" bindtap="modalCancel">取消</view>
+                <view class="modal_button" style="color:#576b95;border-left:1px solid rgba(0,0,0,.1)" bindtap="modalConfirm">确定</view>
+            </view>
+        </view>
+    </block>
+</van-popup>

components/mp-html/editable/config.js

@@ -0,0 +1 @@
+"use strict";module.exports={node:["大小","斜体","粗体","下划线","居中","缩进","上移","下移","删除"],img:["换图","宽度","超链接","预览图","禁用预览","上移","下移","删除"],link:["更换链接","上移","下移","删除"],media:["封面","循环","自动播放","上移","下移","删除"]};

components/mp-html/index.json

@@ -0,0 +1 @@
+{"component":true,"usingComponents":{"node":"./node/node"}}

components/mp-html/index.wxml

@@ -0,0 +1 @@
+<view class="_root {{selectable?'_select':''}}" style="{{editable?'min-height:200px;':''}}{{containerStyle}}" bindtap="_containTap"><slot wx:if="{{!nodes[0]}}"/><node id="_root" childs="{{nodes}}" opts="{{[lazyLoad,loadingImg,errorImg,showImgMenu,selectable,editable,placeholder,'']}}" catchadd="_add"/><view wx:if="{{tooltip}}" class="_tooltip_contain" style="top:{{tooltip.top}}px"><view class="_tooltip"><view wx:for="{{tooltip.items}}" wx:key="index" class="_tooltip_item" data-i="{{index}}" bindtap="_tooltipTap">{{item}}</view></view></view><view wx:if="{{slider}}" class="_slider" style="top:{{slider.top}}px"><slider value="{{slider.value}}" min="{{slider.min}}" max="{{slider.max}}" block-size="14" show-value activeColor="white" bindchanging="_sliderChanging" bindchange="_sliderChange"/></view></view>

components/mp-html/index.wxss

@@ -0,0 +1 @@
+._root{padding:1px 0;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}._select{-webkit-user-select:text;user-select:text}._tooltip_contain{position:absolute;right:20px;left:20px;text-align:center}._tooltip{box-sizing:border-box;display:inline-block;width:auto;max-width:100%;height:30px;padding:0 3px;overflow:scroll;font-size:14px;line-height:30px;white-space:nowrap}._tooltip_item{display:inline-block;width:auto;padding:0 2vw;line-height:30px;background-color:#000;color:#fff}._slider{position:absolute;left:20px;width:220px}._slider,._tooltip{background-color:#000;border-radius:3px;opacity:.75}

components/mp-html/node/node.json

@@ -0,0 +1 @@
+{"component":true,"usingComponents":{"node":"./node"}}

components/mp-html/node/node.wxss

@@ -0,0 +1 @@
+._address,._article,._aside,._body,._caption,._center,._cite,._footer,._header,._html,._nav,._pre,._section{display:block}._a{padding:1.5px 0 1.5px 0;color:#366092;word-break:break-all}._hover{text-decoration:underline;opacity:.7}._img{max-width:100%;-webkit-touch-callout:none}._b,._strong{font-weight:700}._code{font-family:monospace}._del{text-decoration:line-through}._em,._i{font-style:italic}._h1{font-size:2em}._h2{font-size:1.5em}._h3{font-size:1.17em}._h5{font-size:.83em}._h6{font-size:.67em}._h1,._h2,._h3,._h4,._h5,._h6{display:block;font-weight:700}._ins{text-decoration:underline}._li{display:list-item}._ol{list-style-type:decimal}._ol,._ul{display:block;padding-left:40px;margin:1em 0}._q::before{content:'"'}._q::after{content:'"'}._sub{font-size:smaller;vertical-align:sub}._sup{font-size:smaller;vertical-align:super}._tbody,._tfoot,._thead{display:table-row-group}._tr{display:table-row}._td,._th{display:table-cell;vertical-align:middle}._th{font-weight:700;text-align:center}._ul{list-style-type:disc}._ul ._ul{margin:0;list-style-type:circle}._ul ._ul ._ul{list-style-type:square}._abbr,._b,._code,._del,._em,._i,._ins,._label,._q,._span,._strong,._sub,._sup{display:inline}._blockquote,._div,._p{display:block}