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