uniapp富文本的使用

<editor class="richInputContent" id="editor" @input="getEditorContent" @ready="onEditorReady" v-model="html"></editor>


methods:{
      //初始化富文本编辑器
            onEditorReady() {
                    uni.createSelectorQuery().select('#editor').context((res) => {
                    var contentVal_1 = this.content;
                    //将内容写入编辑器
                    this.editorCtx = res.context;
                    let EContent = {
                        html: contentVal_1
                    }
                    this.editorCtx.setContents(EContent);
                }).exec()
            },

            getEditorContent(e) {
                this.content = e.detail.html;
                this.contentText = e.detail.text;
            },

            //上传图片
            uploadImg(index) {
                let that = this
                uni.chooseImage({
                    count: 1,
                    success: function(res) {
                        let url = res.tempFilePaths[0]
                        console.log(res)
                        uni.uploadFile({
                            url: 'https://nmssafety.51yunmai.com/FileUpload/FileUploadMobile',
                            filePath: url,
                            name: 'Data',
                            formData: {
                                token: uni.getStorageSync("token")
                            },
                            success: (res) => {
                                console.log(res)
                                that.editorCtx.insertImage({
                                    src: JSON.parse(res.data).ImageUrl,
                                    alt: '图像',
                                    success: function() {}
                                })
                            }
                        });
                    },

                })
            },

}    

富文本的其他api

 

editorContext.format(name, value)  修改富文本样式

editorContext.insertDivider(OBJECT)  插入分割线

editorContext.clear(OBJECT)  清理富文本

更多查看该链接https://uniapp.dcloud.io/api/media/editor-context?id=editorcontextformat

 

 

原文地址:https://www.cnblogs.com/sisxxw/p/14991436.html