首页 > 其他分享 >uniapp富文本的使用

uniapp富文本的使用

时间:2022-12-22 17:12:59浏览次数:70  
标签:uniapp success res let 使用 uni 文本 editorCtx

<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() {}
                                })
                            }
                        });
                    },

                })
            },

}    

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

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

标签:uniapp,success,res,let,使用,uni,文本,editorCtx
From: https://www.cnblogs.com/moranjl/p/16999154.html

相关文章

  • 扫描开放端口基本使用
    nmap简单使用aptinstallnmap从控制台发出的以下命令确定哪些端口正在侦听来自网络的TCP连接:nmap-sT-p-10.10.8.8-sT告诉nmap扫描TCP端口。-p-扫描所有65......
  • uniapp自定义picker城市多级联动组件
    支持多端——h5、app、微信小程序、支付宝小程序...支持自定义配置picker插件级数支持无限级注意事项:插件传入数据格式为children树形格式,内部包含:id、name参数......
  • 使用WinSW将springboot jar项目安装为windows服务
    1、下载WinSW:https://github.com/winsw/winsw/releases,此处下载WinSWv2.11.0版,以下几个版本都行:  此处使用WinSW-x64.exe2、假如jar文件名称为:hello.jar,就将WinSW-x......
  • 使用WinSW将nacos安装为windows服务
    1、下载WinSW:https://github.com/winsw/winsw/releases,此处下载WinSWv2.11.0版,以下几个版本都行:  此处使用WinSW-x64.exe2、将WinSW-x64.exe重命名为nacos-service.......
  • 整理总结-.如何使用Jsp提供的变量保存数据?
    以下是我个人简单的总结,希望和大家互相补充交流,有错误也请指出,谢谢~~pageScope:无啥大用,可以放全局变量。话说与其用Java实现全局变量的功能倒不如使用JavaScriptrequestS......
  • Linux 中的 lsof 命令使用大全
    Linux计算机中的每个对象都被视为一个文件。这些文件组织在目录中。当您的计算机运行时,它会打开多个文件和目录,供不同的进程使用。您可以使用lsof命令列出这些打开的文件......
  • vue插槽使用
    插槽的分类插槽分为默认插槽、具名插槽、作用域插槽需要注意的点是,使用作用域插槽需要搭配template使用默认插槽默认插槽使用最为简单:父级<template><div>......
  • DDL使用
    CREATEDATABASE语句用于创建新的数据库MYSQL中的COLLATE是什么?(文章有详细介绍)https://cloud.tencent.com/developer/article/1366841?fromSource=waituiSQL> CREA......
  • SVNKit使用相关工具类
    SVNKit操作SVN仓库导入依赖<dependency><groupId>org.tmatesoft.svnkit</groupId><artifactId>svnkit</artifactId><version>1.8.5</version><scope......
  • VUE3状态管理Pinia使用介绍
    vue3中推荐使用的状态管理工具:pinia,真的很好用官方文档,中文文档一、安装piniayarnaddpinia#或者使用npmnpminstallpinia二、src文件夹下新建store文件夹,并新建......