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

需求

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

解决方案

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

HTML

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

JS

onEditorReady() {
				// #ifdef MP-BAIDU
				this.editorCtx = requireDynamicLib('editorLib').createEditorContext('editor');
				// #endif

				// #ifdef APP-PLUS || MP-WEIXIN || H5
				uni.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.mfbz.cn/a/676366.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

带大家做一个,易上手的家常猪肉炖白菜

今天 带大家做一个 猪肉炖白菜 一块猪肉 切片 一块生姜 两边

20240603在飞凌的OK3588-C开发板上跑原厂IPC方案时确认OV5645

v4l2-ctl --list-devices media-ctl -p -d /dev/media2 20240603在飞凌的OK3588-C开发板上跑原厂IPC方案时确认OV5645 2024/6/3 16:39 确认OV5645已经正常挂载了&#xff1a; Microsoft Windows [版本 10.0.22621.3296] (c) Microsoft Corporation。保留所有权利。 C:\Users\Q…

音频pop音的数学与物理解释

音频数据跳变太大的时候通常会有pop音&#xff0c;此时频谱上看pop音位置能量较高 音频中的“pop”音通常是由于信号的不连续性或瞬态变化造成的。这种不连续性的数学和物理原因可以从以下几个方面解释&#xff1a; 数学解释 信号不连续性 当音频信号发生突变时&#xff0c;…

从 0 到 1 带你认识 Git 在个人和企业开发中的原理及应用

文章目录 学习目标Git 初识提出问题如何解决&#xff1f;—— 版本控制器注意事项 Git 安装Linux CentOSLinux UbuntuWindows Git 基本操作创建 Git 本地仓库配置 Git 认识工作区、暂存区、版本库添加文件——场景一查看 .git 文件 添加文件——场景二 修改文件版本回退 学习目…

一文读懂GDPR

GDPR将对人们的网络足迹、使用的APP和服务如何保护或利用这些数据产生重大影响。 下面我们将对有关GDPR人们最关心的问题进行解读。 GDPR是什么&#xff1f; 一般数据保护条例&#xff08;General Data Protection Regulation&#xff09;是一项全面的法律&#xff0c;赋予了…

SaaS增长| 联盟营销经理必须要知道的十个关键指标!

你对你的联盟合作伙伴计划了解多少&#xff1f;这个问题的答案将取决于你的数据有多好&#xff0c;以及你跟踪数据的效率如何。 如果你还在整合各种资源&#xff0c;不必担心。合作伙伴计划需要时间和努力来建立&#xff0c;而且很难立即实施适当的报告制度&#xff0c;尤其是…

Python私教张大鹏万字长文讲解Tailwindcss Flex 和 Grid 布局相关的样式,附完整源码和效果截图

flex-basics 样式类 Utilities for controlling the initial size of flex items. 用于控制伸缩项的初始大小的实用程序。 基础样式 ClassPropertiesbasis-0flex-basis: 0px;basis-1flex-basis: 0.25rem; /* 4px */basis-2flex-basis: 0.5rem; /* 8px */basis-3flex-basis:…

程序员的五大职业素养,你知道吗?

程序员职业生涯的挑战与机遇 在当今这个科技日新月异的时代&#xff0c;程序员作为技术行业的中坚力量&#xff0c;其职业生涯无疑充满了无数挑战与机遇。技术的快速迭代要求他们必须不断学习新知识、掌握新技能&#xff0c;以跟上时代的步伐。同时&#xff0c;云计算、人工智…

python常见数据分析函数

apply DataFrame.apply(func, axis0, broadcastFalse, rawFalse, reduceNone, args(), **kwds) 第一个参数是函数 可以在Series或DataFrame上执行一个函数 支持对行、列或单个值进行处理 import numpy as np import pandas as pdf lambda x: x.max()-x.min()df pd.DataFrame(…

Spring Cloud学习笔记(Nacos):Nacos持久化(未完成)

这是本人学习的总结&#xff0c;主要学习资料如下 - 马士兵教育 1、Overview2、单机使用MySQL 1、Overview 我们关闭单机下的Nacos后&#xff0c;再重新启动会发现之前配置的内容没有被删除。这时因为Nacos有内嵌的数据库derby&#xff0c;会自己持久化。 但是在集群的情况下…

【用户画像】用户偏好购物模型BP

一、前言 用户购物偏好模型BP&#xff08;Buyer Preferences Model&#xff09;旨在通过对用户购物行为的深入分析和建模&#xff0c;以量化用户对不同商品或服务的偏好程度。该模型对于电商平台、零售商以及其他涉及消费者决策的商业实体来说&#xff0c;具有重要的应用价值。…

尝试编译 AMD ROCm 的 llvm-project

0&#xff0c;环境 ubuntu 22.04 gcc-11 x86_64 18cores/36threads 256GB RAM rocm 6.0.2 Radeon VII 1&#xff0c;第一次尝试 构建命令&#xff1a; cmake -G "Unix Makefiles" ../llvm \ -DLLVM_ENABLE_PROJECTS"clang;lld;lldb;mlir;openmp" \…

TCP报头

TCP报头 一:TCP报头1.1: 16位源端口号 && 16位目的端口号1.2: 选项1.3: 4位首部长度1.4: 保留位1.5 :标志位1.6: 16位窗口大小1.7: 16位紧急指针1.8: 32位序号 && 32位确认序号1.9: 16位校验和二级目录 一级目录二级目录二级目录二级目录 一级目录一级目录一级…

[GeoServer系列]Shapefile数据发布

【GeoServer系列】——安装与发布shapefile数据-CSDN博客 将待发布数据放置指定目录下 webapps\geoserver\data\data 创建存储仓库 新建矢量数据源 发布图层 设置边框 设置样式 使用 方式1 let highRoad new Cesium.WebMapServiceImageryProvider({url: http://local…

一维时间序列信号的奇异小波时频分析方法(Python)

最初的时频分析技术就是短时窗傅里叶变换STFT&#xff0c;由于时窗变短&#xff0c;可供分析的信号量减少&#xff0c;采用经典的谱估算方法引起的误差所占比重会增加。且该短时窗一旦选定&#xff0e;则在整个变换过程中其时窗长度是固定的。变换后的时频分辨率也即固定&#…

分享两种论文降重最有效的方法(论文降重网站)

论文降重最有效的方法可以分为手动方法和使用降重网站两种方法。以下是详细的分析和归纳&#xff1a; 手动方法 删减冗余内容&#xff1a;对于论文中的某些内容&#xff0c;特别是信息冗余或不必要的描述&#xff0c;可以通过删减和简化来减少篇幅。确保每一段落和每一个例子都…

UI 自动化测试(Selenuim + Java )

关于 UI 自动化测试工具 selenuim Java 的环境搭建推荐看SeleniumJava 环境搭建 什么是自动化测试&#xff1f; 自动化测试指软件测试的自动化&#xff0c;在预设状态下运行应用程序或者系统&#xff0c;预设条件包括正常和异常&#xff0c;最后评估运行结果。将人为驱动的测…

AI大数据处理与分析实战--体育问卷分析

AI大数据处理与分析实战–体育问卷分析 前言&#xff1a;前一段时间接了一个需求&#xff0c;使用AI进行数据分析与处理&#xff0c;遂整理了一下大致过程和大致简要结果&#xff08;更详细就不方便放了&#xff09;。 文章目录 AI大数据处理与分析实战--体育问卷分析一、数据…

三十五、openlayers官网示例Dynamic Data——在地图上加载动态数据形成动画效果

官网demo地址&#xff1a; Dynamic Data 初始化地图 const tileLayer new TileLayer({source: new OSM(),});const map new Map({layers: [tileLayer],target: "map",view: new View({center: [0, 0],zoom: 2,}),}); 创建了三个样式 const imageStyle new Style(…

glibc backtrace backtrace_symbols 的应用示例

作用&#xff1a; 在一个函数调用栈中&#xff0c;输出 backtrace()函数返回时需要执行的下一条指令的地址&#xff0c;以及返回主调函数后的下一条指令的地址&#xff0c;递归上一步&#xff0c;直到从系统中链接进来的 _start() 为止。 1&#xff0c;示例先行 hello_glibc.…