uni微信小程序editor富文本组件如何插入图片

需求

在editor中插入图片,并对图片进行编辑,简略看一下组件的属性,官网editor 组件 | uni-app官网

解决方案

首先要使用到@ready这个属性,然后官网有给代码粘过来,简单解释一下这段代码的意思(作用是在不同平台下获取编辑器的上下文,以便后续对编辑器进行操作,比如插入图片、获取内容等

HTML

<editor id="editor" ref="editor" @ready="onEditorReady" >
</editor>

JS

onEditorReady() {// #ifdef MP-BAIDUthis.editorCtx = requireDynamicLib('editorLib').createEditorContext('editor');// #endif// #ifdef APP-PLUS || MP-WEIXIN || H5uni.createSelectorQuery().select('#editor').context((res) => {this.editorCtx = res.context}).exec()// #endif
},

然后添加一个按钮用来插入图片,这里直接上完整的代码

<template><view class="addForum_app"><!-- 编辑器组件 --><editor id="editor" ref="editor" placeholder="请输入内容..." @ready="onEditorReady"></editor><!-- 图片选择按钮 --><button type="primary" @click="selectPhoto">选择图片</button></view>
</template><script>
export default {data() {return {editorCtx: null, // 编辑器上下文对象};},methods: {// 编辑器准备完成onEditorReady() {uni.createSelectorQuery().select('#editor').context((res) => {this.editorCtx = res.context;}).exec();},// 选择图片selectPhoto() {uni.chooseImage({count: 9, // 最多可以选择的图片数量sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图sourceType: ['album'], // 从相册选择success: (res) => {const tempFilePaths = res.tempFilePaths;// 遍历选中的图片路径,并使用 insertImage 方法将它们插入到编辑器中tempFilePaths.forEach((path) => {this.editorCtx.insertImage({src: path,success: function() {console.log('图片插入成功');}});});},fail: (err) => {console.error('选择照片失败:', err);}});}}
};
</script>

最后对图片的操作非常简单,查看官网的editor组件的属性即可。。。。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/343224.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

坐实了!“神坛企业”也是草台班子

越接近真相&#xff0c;越觉得荒诞&#xff01;这次就算删稿也得说两句&#xff0c;KP基于BMC的“可信计算”&#xff0c;正在沦为业内笑柄。戳破那层保护色&#xff0c;施施然端坐神坛的某厂&#xff0c;内里可能也是个草台班子。 近期&#xff0c;网上流传着几页HW给客户洗脑…

k8s-pod参数详解

目录 概述创建Pod编写一个简单的Pod添加常用参数为Pod的容器分配资源网络相关Pod健康检查启动探针存活探针就绪探针 作用整个Pod参数配置创建docker-registry 卷挂载 结束 概述 k8s中的pod参数详解。官方文档   版本 k8s 1.27.x 、busybox:stable-musl、nginx:stable-alpine3…

EXCEL多sheet添加目录跳转

EXCEL多sheet添加目录跳转 背景 excel中有几十个sheet&#xff0c;点下方左右切换sheet太耗时&#xff0c;希望可以有根据sheet名超链接跳转相应sheet&#xff0c;处理完后再跳回原sheet。 方案一 新建目录sheet&#xff0c;在A1写sheet名&#xff0c;右键选择最下方超链接…

【免费】2021年数学建模国赛C题问题一--基于熵权法和TOPSIS法详细版附Word加代码

各位大佬好 &#xff0c;这里是阿川的博客&#xff0c;祝您变得更强 个人主页&#xff1a;在线OJ的阿川 大佬的支持和鼓励&#xff0c;将是我成长路上最大的动力 阿川水平有限&#xff0c;如有错误&#xff0c;欢迎大佬指正 Python 初阶 Python–语言基础与由来介绍 Python–…

Linux进程间通信之管道

进程间通信介绍&#xff1a; 进程间通信的概念&#xff1a; 进程间通信简称IPC&#xff08;Interprocess communication&#xff09;&#xff0c;进程间通信就是在不同进程之间传播或交换信息。 进程间通信的目的&#xff1a; 数据传输&#xff1a; 一个进程需要将它的数据…

血清素是怎么产生的,其过高和过低与我们情绪和胃肠健康有哪些关联?

谷禾健康 血清素&#xff0c;5-羟色氨(5-HT)不仅充当体内系统的神经递质和激素&#xff0c;而且还是胃肠系统中的旁分泌信使。 5-HT神经元系统起源于中脑中缝核&#xff0c;下面示意图强调了血清素(5-HT)神经元与释放不同神经递质的其他神经元以及神经胶质细胞之间的解剖相互作…

pxe自动装机

概念 pxe是c/s模式。允许客户端通过网络从远程服务器&#xff08;服务端&#xff09;下载引导镜像&#xff0c;加载安装文件&#xff0c;实现自动化安装操作系统。 无人值守&#xff1a;安装选项不需要人为干预&#xff0c;可以自动化实现。 pxe的优点&#xff1a;1.规模化&…

TqdmWarning: IProgress not found. Please update jupyter and ipywidgets.

jupyter notebook报错 在pycharm的terminal中 安装完成后就不会再报错了

经典神经网络(10)PixelCNN模型、Gated PixelCNN模型及其在MNIST数据集上的应用

经典神经网络(10)PixelCNN模型、Gated PixelCNN模型及其在MNIST数据集上的应用 1 PixelCNN PixelCNN是DeepMind团队在论文Pixel Recurrent Neural Networks (16.01)提出的一种生成模型&#xff0c;实际上这篇论文共提出了两种架构&#xff1a;PixelRNN和PixelCNN&#xff0c;两…

【排序算法】快速排序

文章目录 1.什么是快速排序2.快速排序的步骤3.时间复杂度 1.什么是快速排序 快速排序算法是一种高效的排序方法&#xff0c;它的基本思想是“分而治之”&#xff0c;通过一趟排序将待排记录分隔成独立的两部分&#xff0c;其中一部分记录的关键字均比另一部分的关键字小&#x…

从零开始手把手Vue3+TypeScript+ElementPlus管理后台项目实战五(引入vue-router,并给注册功能加上美丽的外衣el-form)

安装vue-router pnpm install vue-router创建router src下新增router目录&#xff0c;ruoter目录中新增index.ts import { createRouter, createWebHashHistory } from "vue-router"; const routes [{path: "/",name: "Home",component: () …

个人笔记-python生成gif

使用文件的修改时间戳进行排序 import os import re import imageio# 设置图片所在的文件夹路径 folder_path /home/czy/ACode/AMAW_20240219/9.3.x(Discrete_time_marching&#xff09;/9.3.17.11.1(Disc_concessive_CH_ZJ)/current_figures # 文件夹路径&#xff1b;linux…

网络编程: 高级IO与多路转接select,poll,epoll的使用与介绍

网络编程: 高级IO与多路转接select,poll,epoll的使用与介绍 前言一.五种IO模型1.IO的本质2.五种IO模型1.五种IO模型2.同步IO与异步IO3.IO效率 二.非阻塞IO1.系统调用介绍2.验证代码 三.select多路转接1.系统调用接口2.写代码 : 基于select的TCP服务器1.封装的Socket接口2.开始写…

前端 CSS 经典:水波进度样式

前言&#xff1a;简单实现水波进度样式&#xff0c;简单好看。 效果图&#xff1a; 代码实现&#xff1a; <!DOCTYPE html> <html lang"en"><head><meta charset"utf-8" /><meta http-equiv"X-UA-Compatible" cont…

《数学学习与研究》杂志是什么级别?知网收录吗?评职认可吗?

《数学学习与研究》杂志是什么级别&#xff1f;知网收录吗&#xff1f;评职认可吗&#xff1f; 《数学学习与研究》是由东北师范大学主管&#xff0c;吉林省数学会与东北师范大学出版社联合主办的省级优秀数学类期刊杂志。该杂志为半月刊&#xff0c;国际标准刊号为 ISSN1007-…

SkyWalking之P0业务场景输出调用链路应用

延伸扩展&#xff1a;XX业务场景 路由标签打标、传播、检索 链路标签染色与传播 SW: SkyWalking的简写 用户请求携带HTTP头信息X-sw8-correlation “X-sw8-correlation: key1value1,key2value2,key3value3” 网关侧读取解析HTTP头信息X-sw8-correlation&#xff0c;然后通过SW…

【Linux】系统优化:一键切换软件源与安装Docker

引言 在Linux系统安装完成后&#xff0c;进行一些必要的初始化设置是提升系统性能和用户体验的关键。本文将重点介绍两个实用的一键脚本&#xff1a;LinuxMirrors提供的软件源切换脚本和Docker安装脚本。这两个脚本将帮助我们简化配置安装过程。 一键切换软件源脚本 在Linux…

AI绘画如何打造高质量数据集?

遇到难题不要怕&#xff01;厚德提问大佬答&#xff01; 厚德提问大佬答11 你是否对AI绘画感兴趣却无从下手&#xff1f;是否有很多疑问却苦于没有大佬解答带你飞&#xff1f;从此刻开始这些问题都将迎刃而解&#xff01;你感兴趣的话题&#xff0c;厚德云替你问&#xff0c;你…

数据动态变化时实现多选及回显

<template><el-dialog title"设置权限" :visible.sync"showDialog" :close-on-click-modal"false" :append-to-body"true" width"800px"><div v-loading"loading"><el-radio-group v-model&…

【论文阅读】MODELING AND SOLVING THE TRAVELING SALESMAN PROBLEM WITH PRIORITY PRIZES

文章目录 论文基本信息摘要1.引言2. INTEGER QUADRATIC PROGRAM FOR TSPPP3. MIXED INTEGER LINEAR PROGRAMS FOR TSPPP4. TABU SEARCH ALGORITHM FOR TSPPP5. COMPUTATIONAL RESULTS6. CONCLUDING REMARKS补充 论文基本信息 《MODELING AND SOLVING THE TRAVELING SALESMAN P…