微信小程序富文本编辑器editor+rich-text(附源码)

之前小程序一直都是使用自己写的接口，小程序远程获取使用富文本编辑器的内容，比如UEditor，wangEditor等。我们可以选择插件wxparse和自带的rich-text,但是这些并不能完全转义他们的便签。加上最近使用了云开发的技术（以前开发小程序需要买服务器、部署后端服务、搭建运维服务。云开发使开发者可以使用云开发开发微信小程序、小游戏,无需搭建服务器,即可使用云端能力。云开发提供了一站式开发服务,打通了小程序前端与云资源的链路,让开发者无需管理后端服务架构,即可轻松拥有各种后端能力,极大减轻开发过程中繁杂的后端），经过发现使用微信自带的editor结合rich-text很方便展示信息，刚开始查了一下官方文档发现写的也不是很明白;官方editor使用
结合官方editor内容解析，查了一下github上面代码总结了一套演示代码

<view class="page eidt-detail-images-container"><view class="ajc"><view class="title">编辑图文详情</view></view><view><view class='wrapper'><view class='toolbar' bindtap="format"><i class="iconfont icon-zitijiacu {{formats.bold ? 'ql-active' : ''}}" data-name="bold"></i><i class="iconfont icon-zitixieti {{formats.italic ? 'ql-active' : ''}}" data-name="italic"></i><i class="iconfont icon-zitixiahuaxian {{formats.underline ? 'ql-active' : ''}}" data-name="underline"></i><i class="iconfont icon-zitishanchuxian {{formats.strike ? 'ql-active' : ''}}" data-name="strike"></i><i class="iconfont icon-zuoduiqi {{formats.align === 'left' ? 'ql-active' : ''}}" data-name="align" data-value="left"></i><i class="iconfont icon-juzhongduiqi {{formats.align === 'center' ? 'ql-active' : ''}}" data-name="align" data-value="center"></i><i class="iconfont icon-youduiqi {{formats.align === 'right' ? 'ql-active' : ''}}" data-name="align" data-value="right"></i><i class="iconfont icon-zuoyouduiqi {{formats.align === 'justify' ? 'ql-active' : ''}}" data-name="align" data-value="justify"></i><i class="iconfont icon-line-height {{formats.lineHeight ? 'ql-active' : ''}}" data-name="lineHeight" data-value="2"></i><i class="iconfont icon-Character-Spacing {{formats.letterSpacing ? 'ql-active' : ''}}" data-name="letterSpacing" data-value="2em"></i><i class="iconfont icon-722bianjiqi_duanqianju {{formats.marginTop ? 'ql-active' : ''}}" data-name="marginTop" data-value="20px"></i><i class="iconfont icon-723bianjiqi_duanhouju {{formats.micon-previewarginBottom ? 'ql-active' : ''}}" data-name="marginBottom" data-value="20px"></i><i class="iconfont icon-clearedformat" bindtap="removeFormat"></i><i class="iconfont icon-font {{formats.fontFamily ? 'ql-active' : ''}}" data-name="fontFamily" data-value="Pacifico"></i><i class="iconfont icon-fontsize {{formats.fontSize === '24px' ? 'ql-active' : ''}}" data-name="fontSize" data-value="24px"></i><i class="iconfont icon-text_color {{formats.color === '#0000ff' ? 'ql-active' : ''}}" data-name="color" data-value="#0000ff"></i><i class="iconfont icon-fontbgcolor {{formats.backgroundColor === '#00ff00' ? 'ql-active' : ''}}" data-name="backgroundColor" data-value="#00ff00"></i><i class="iconfont icon-date" bindtap="insertDate"></i><i class="iconfont icon--checklist" data-name="list" data-value="check"></i><i class="iconfont icon-youxupailie {{formats.list === 'ordered' ? 'ql-active' : ''}}" data-name="list" data-value="ordered"></i><i class="iconfont icon-wuxupailie {{formats.list === 'bullet' ? 'ql-active' : ''}}" data-name="list" data-value="bullet"></i><i class="iconfont icon-undo" bindtap="undo"></i><i class="iconfont icon-redo" bindtap="redo"></i><i class="iconfont icon-outdent" data-name="indent" data-value="-1"></i><i class="iconfont icon-indent" data-name="indent" data-value="+1"></i><i class="iconfont icon-fengexian" bindtap="insertDivider"></i><i class="iconfont icon-charutupian" bindtap="insertImage"></i><i class="iconfont icon-format-header-1 {{formats.header === 1 ? 'ql-active' : ''}}" data-name="header" data-value="{{1}}"></i><i class="iconfont icon-format-header-2 {{formats.header === 2 ? 'ql-active' : ''}}" data-name="header" data-value="{{2}}"></i><i class="iconfont icon-format-header-3 {{formats.header === 3 ? 'ql-active' : ''}}" data-name="header" data-value="{{3}}"></i><i class="iconfont icon-format-header-4 {{formats.header === 4 ? 'ql-active' : ''}}" data-name="header" data-value="{{4}}"></i><i class="iconfont icon-zitixiabiao {{formats.script === 'sub' ? 'ql-active' : ''}}" data-name="script" data-value="sub"></i><i class="iconfont icon-zitishangbiao {{formats.script === 'super' ? 'ql-active' : ''}}" data-name="script" data-value="super"></i><i class="iconfont icon-quanping"></i><i class="iconfont icon-shanchu" bindtap="clear"></i><i class="iconfont icon-direction-rtl {{formats.direction === 'rtl' ? 'ql-active' : ''}}" data-name="direction" data-value="rtl"></i></view><editor id="editor" class="ql-container" placeholder="{{placeholder}}" showImgSize showImgToolbar showImgResize bindstatuschange="onStatusChange" read-only="{{readOnly}}" bindready="onEditorReady"></editor></view></view><view class="ajc" style="margin:10px;"><button type="primary" bindtap="toDeatil">查看生成页面</button></view>
</view>

在这里插入图片描述可进行图片大小调整

这是使用rich-text显示的

获取github源码

微信小程序富文本编辑器editor+rich-text(附源码)相关推荐

微信小程序富文本编辑器editor初体验-图片上传
https://developers.weixin.qq.com/miniprogram/dev/component/editor.html 以前没有小程序富文本编辑器,只能输入文字,图片上传后,在服 ...
小程序（二十五）微信小程序富文本编辑器editor上传图片
官方给出的示例代码中图片上传功能是将图片上传至小程序的缓存中,代码如下所示: insertImage(e) {console.log(e);const that = thiswx.chooseImag ...
小程序开发笔记（二）：微信小程序富文本编辑器editor的使用
小程序在去年5月的 v2.7.0 版本新增了组件editor富文本编辑器,但对于像我这种开发新手,要熟练使用还是有一定难度.所以记录一下我的学习过程,希望对大家有帮助. 小程序有详细的微信开发 ...
微信小程序富文本编辑器组件 editor
微信小程序富文本编辑器组件 editor <view class="container"><view class="titlebox"> ...
小程序 html编辑器,小程序富文本编辑器editor初体验
终于,微信在5月9号的v2.7.0版本中新增了 editor富文本编辑器组件,今天有时间了准备体验一下在5月6日的时候写了一篇小程序富文本解析的「伪需求」,从wxParse到towxml的坑,当时还 ...
微信小程序富文本编辑器获取内容
1.新建wxParse文件夹里面的结构是这样:wxParse :{ emojis (文件夹) html2json.js (文件) htmlparser.js(文件) showdown.js (文件) ...
layui获取select 文本_小程序富文本编辑器editor初体验
终于,微信在5月9号的v2.7.0版本中新增了 editor富文本编辑器组件,今天有时间了准备体验一下在5月6日的时候写了一篇小程序富文本解析的「伪需求」,从wxParse到towxml的坑,当时还 ...
关于微信小程序富文本编辑器回显数据初始化editor的时候，页面滑动到最底部了
** 一个页面高度超出一屏时,底部使用了富文本编辑器组件editor之后,如果在进入页面时对editor进行了赋值,页面会滚动到底部控制页面不滚动到底部?** 这个问题的关键是进入页面给富文本赋值造 ...
使用微信小程序富文本编辑器组件 editor
先看下官方文档 https://developers.weixin.qq.com/miniprogram/dev/component/editor.html 富文本组件文档文档上的代码比较少建议在开 ...

微信小程序富文本编辑器editor+rich-text(附源码)

微信小程序富文本编辑器editor+rich-text(附源码)相关推荐

最新文章

热门文章