【uniapp】【微信小程序】富文本编辑器Editor之setContents初始化富文本内容失败(报错)

这篇具有很好参考价值的文章主要介绍了【uniapp】【微信小程序】富文本编辑器Editor之setContents初始化富文本内容失败(报错)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

项目场景:

进入页面初始化时,需要填入之前预填写的富文本内容,使用uniapp中editor组件setContents方法为富文本编辑器设置内容时,内容有时不时设置不成功,微信小程序同样适用


问题描述

使用uniapp中editor组件setContents方法为富文本编辑器设置内容时,在mounted时调用setContents方法,富文本内容有时设置不成功

样例代码:文章来源地址https://www.toymoban.com/news/detail-660399.html

<template>
	<editor id="editor"></editor>
</template>
<script>
export default {
   
	data() {
   
		html: '<p>富文本测试</p>',
		editorCtx : ''
	},
	mounted() {
   
		let _this = this
		// #ifdef APP-PLUS || H5 ||MP-WEIXIN
		uni.createSelectorQuery().select('#editor').context((res) => {
   
			_this.editorCtx = res.context //uni.createSelectorQuery获取editor 组件对应的 editorContext实例
		}).exec()
		_this.editorCtx.setContents({
   
			'html': _this.html,
			success:  (res)=> {
   
				console

到了这里,关于【uniapp】【微信小程序】富文本编辑器Editor之setContents初始化富文本内容失败(报错)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 小程序Editor富文本编辑器-封装使用用法

    本文章主要讲述editor中小程序的图片上传和pc端数据不同步的问题,建议多看下代码 完整代码在最下面 1、创建个用于组件封装的editor文件夹,存放三个文件  2、editor.vue文件是主要封装代码 3、editor-icon.css文件样式 5、如果上传图片失败或者是图片裂开,和pc端数据不同步的话

    2024年02月11日
    浏览(44)
  • uniapp中使用编辑器editor

    开发小程序时,想要在手机上添加编辑内容,使用u–textarea时,换行操作不显示,为此使用了uniapp自带的组件editor来实现: 具体可参考官网:https://uniapp.dcloud.net.cn/component/editor.html

    2024年02月07日
    浏览(43)
  • 富文本编辑器 ck-editor5 的使用

    最近在项目中需要用到富文本编辑器,据说ck-editor5很不错,于是就使用它了,不过在期间也遇到了很多问题,这里记录下。 一、引入ck-editor5 文档地址:Predefined builds - CKEditor 5 Documentation 这里有个坑,我最初是根据文档执行下面的npm命令下载的,最后捣腾了半天发现里面功能

    2024年01月20日
    浏览(47)
  • vue-quill-editor富文本编辑器使用步骤

    首先放上效果图 目录 1.安装 2.引入到项目中 3.在页面上写组件 4.配置option 5.给工具栏鼠标悬停加上中文释义 6.上传图片到七牛云 7.自定义控制图片大小 1.安装 2.引入到项目中         有两种挂载方式: 全局挂载 和 在组件中挂载,根据自己的项目需求选择,一般用到富文

    2024年02月06日
    浏览(45)
  • 富文本编辑器 VUE-QUILL-EDITOR 使用教程

    1、NPM 导入 VUE-QUILL-EDITOR 2、引入 VUE-QUILL-EDITOR 在全局中引入 在指定的 vue 文件中引入 3、在 VUE 中使用 到这里一个默认的富文本编辑器已经导入使用了,如下图所视! 一般的,我们在使用的时候并不需要这么多功能,可以适当的对编辑器配置项进行配置。 可以根据自己的实际

    2024年02月09日
    浏览(66)
  • vue使用富文本编辑器vue-quill-editor

    问题描述: 我们在开发过程中经常会遇到使用富文本编辑器进行操作,当前插件市场上关于富文本的编辑器挺多的,我们就不一一个介绍了,现在我们主要讲解一些vue-quill-editor富文本编辑器的使用操作和注意事项。 效果图 具体操作使用 1. 安装 2. 引入到项目中 有两种挂载方

    2024年02月02日
    浏览(52)
  • 富文本编辑器 VUE-QUILL-EDITOR 使用教程 (最全)

    VUE-QUILL-EDITOR 基于 QUILL、适用于 VUE 的富文本编辑器,支持服务端渲染和单页应用,非常高效简洁。 在全局中引入 在指定的 vue 文件中引入 到这里一个默认的富文本编辑器已经导入使用了,如下图所视! 一般的,我们在使用的时候并不需要这么多功能,可以适当的对编辑器配

    2024年02月04日
    浏览(47)
  • 简版的富文本编辑器、VUE+ElementUI 富文本编辑器 element ui富文本编辑器的使用(quill-editor) 不好用你来打我!全网醉简单!要复杂的别来!

    实现效果   1.安装插件 npm install vue-quill-editor --save 2.安装成功后在package.json中查看 3.在main.js中全局引入插件 4.页面实现 感谢老哥: ElementUI生成富文本编辑器 https://blog.csdn.net/keplerm/article/details/123379511?spm=1001.2101.3001.6650.9utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCom

    2024年02月16日
    浏览(72)
  • element ui富文本编辑器的使用(quill-editor)

    可以拖拽图片大小及其位置 为了便于大家直接使用,直接把script以及css放在一个页面里,之际copy就可以使用 注意: 1、我是在elementUi使用的,上传图片以及页面的访问需要有登录权限,所以我的上传图片视频的组件里有:headers=“headers”,携带登录权限 2、需要更改自己的上

    2024年02月03日
    浏览(43)
  • vue-quill-editor富文本编辑器-扩展表格、图片调整大小

    上篇文章已经讲到、vue-quill-editor的基本配置和图片转成url 这篇文章主要使用插件来完成 图片调整大小 和 表格的插件使用( 这两个目前quill 版本并不兼容 如果有大神解决了还望指点 ) 参考文章: vue-quill-editor 富文本编辑器支持图片拖拽和放大缩小_*且听风吟的博客-CSDN博

    2024年02月04日
    浏览(62)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包