ball-applet/commpents/hg-editor/hg-editor.js

// 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: async function () {
            const that = this;
            that.createSelectorQuery().select('#editor').context(function (res) {
                that.editorCtx = res.context
                let html = that;
                if (html) {
                    that.editorCtx.setContents({
                        html: html,
                        success: (res) => {
                        },
                        fail: (res) => { console.log(res) }
                    })
                }
            }).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 }, {});
        }
    }
})