1.查看官方示例

uniapp的官方说明

https://uniapp.dcloud.io/component/editor.html

这里有个例子，看起来很棒。但是自己使用起来的时候，怎么也没有官方demo上面的工具栏！

2.关于富文本编辑器的工具栏

无论是uniapp的demo 还是微信官方的demo。editor组件都是没有工具栏的

微信官方的editor demo里面工具栏效果更好一点，是直接集成在键盘输入框上面的，体验更好。

研究之后发现 editor 只是一个编辑器内容控件而已。想要上图工具栏的效果还得自己封装。

其实这里官方也提到了需要使用api。但是如果稍微解释一下工具栏的效果需要结合api来实现的话会更好。

这里的api uniapp和原生的格式基本一样。

3.自己实践一下

页面如下：

主要尝试以下功能（其他的功能实现都相似的）

撤销的动作
图片的插入
editor内容的保存（这里的数据是Delta格式）
editor内容的赋值

关于具体editor的动作，都可以结合api来处理

文档 https://uniapp.dcloud.io/api/media/editor-context.html#editorcontext-format

页面 editor.vue 代码如下:

<template><view><editor id="editor" :placeholder="placeholder" @ready="onEditorReady"></editor><view style="display: flex;"><button type="primary" @tap="undo">撤销</button><button type="primary" @tap="insertDivider">插入分割线</button><button type="primary" @tap="insertImage">插入图片</button><button type="primary" @tap="saveEditor">保存editor页面</button><button type="primary" @tap="pasteEditor">镜像另一个editor页面</button></view><view><view>这里另外一个editor</view><view><editor id="editor2" class="ql-container" placeholder="这里另外一个editor" @ready="onEditorReady2"></editor></view></view></view>
</template><script>export default {data() {return {placeholder: '开始输入...',tempDelta: {}}},methods: {onEditorReady() {// #ifdef MP-BAIDUthis.editorCtx = requireDynamicLib('editorLib').createEditorContext('editorId');// #endif// #ifdef APP-PLUS || H5 ||MP-WEIXINuni.createSelectorQuery().select('#editor').context((res) => {this.editorCtx = res.context}).exec()// #endif},onEditorReady2() {// #ifdef APP-PLUS || H5 ||MP-WEIXINuni.createSelectorQuery().select('#editor2').context((res) => {this.editorCtx2 = res.context}).exec()// #endif},undo() {this.editorCtx.undo()},insertDivider() {this.editorCtx.insertDivider()},insertImage() {var that = thisuni.chooseImage({success(res) {console.log('选择图片成功')console.log(res)that.editorCtx.insertImage({width: '20%',height: '20%',src: res.tempFilePaths[0]})}})},saveEditor() {var that = thisthis.editorCtx.getContents({success(res) {// debuggerthat.tempDelta = res.deltaconsole.log(res)}})},pasteEditor() {debuggerthis.editorCtx2.setContents({delta: this.tempDelta,complete(res){debugger}})},}}
</script><style></style>

效果

uniapp 微信小程序 editor富文本编辑器 api 使用记录相关推荐

使用微信小程序editor富文本编辑器（爬坑要点）
编辑器wxml <view class="container" style="height:{{editorHeight}}px;"><edi ...
小程序editor 富文本编辑器组件
效果: 关于editor 富文本编辑器组件复制到组件common 里面.json 引用即可链接:https://pan.baidu.com/s/1_QIp28IOVuyVFfKfFZwxKQ 提取 ...
若依前后端分离发布富文本框内容 | uni-app微信小程序展示富文本框内容
微信小程序端引入富文本样式富文本提交图片json error 一.展示示例: 1.PC端前端发布界面可以设置文字大小,居中,可以插入图片,设置图片大小,居中. 2.小程序端展示二.基于若依框架踩 ...
云开发小程序editor富文本编辑器上传图片实现增删改
在做一个博客小程序,用的是云开发,用editor编辑器上传图片,一开始直接传图片会出现真机不显示的情况,排查原因后发现是因为传入的是本地路径,而小程序要求的是https或者云id,于是做了以下修改:先 ...
微信小程序教程-富文本编辑器editor
效果图: 1.首先进入官方文档的editor地址 https://developers.weixin.qq.com/miniprogram/dev/component/editor.html 2.可点 ...
微信小程序实现富文本编辑器
1.参考官方文档:editor | 微信开放文档在文档最下方有示例代码,如下图: 点击"在开发者工具中预览效果" 2.将示例代码保存至桌面,以便后期操作 3.文件夹中有一下文 ...
微信小程序接收富文本编辑器图片大小解决方法
一.先上案列: 1.图片没有尺寸影响整体布局二.改完之后: 三.上代码展示 1.wxml  <vi ...
微信小程序端富文本输入
有个需求是用户端也就是小程序端,需要可以富文本发布文章. 示例: 1. 下载组件-微信小程序editor富文本编辑器组件 2.放在小程序自定义组件文件夹下 3.需要用到的页面引入该组件 "u ...
小程序（二十六）微信小程序解析富文本的几种方式
微信小程序解析富文本html大概有两种方式(我发现的). 两种方法,各有各的优缺点. 一:使用小程序内置标签rich-text 这个标签解析的富文本会保留你在pc端编辑的样式,也就是说,你在pc端编辑 ...

uniapp 微信小程序 editor富文本编辑器 api 使用记录

文章目录

1.查看官方示例

2.关于富文本编辑器的工具栏

3.自己实践一下

效果

uniapp 微信小程序 editor富文本编辑器 api 使用记录相关推荐

最新文章

热门文章