当前阅读教程:Uni-app入门到精通教程 > 6.4.3 editor 富文本编辑器 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
阅读(22555525) 收藏 赞(5685) 分享 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
上一篇: 6.4.2 checkbox-group多项选择器 | 下一篇: 6.4.4 form 表单 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
6.4.3 editor 富文本编辑器富文本编辑器,可以对图片、文字格式进行编辑和混排。 编辑器导出内容支持带标签的 html和纯文本的 text,编辑器内部采用 delta 格式进行存储。 通过setContents接口设置内容时,解析插入的 html 可能会由于一些非法标签导致解析错误,建议开发者在应用内使用时通过 delta 进行插入。 富文本组件内部引入了一些基本的样式使得内容可以正确的展示,开发时可以进行覆盖。需要注意的是,在其它组件或环境中使用富文本组件导出的html时,需要额外引入这段样式,并维护<ql-container><ql-editor></ql-editor></ql-container>的结构,参考:使用 editor 组件导出的 html。 图片控件仅初始化时设置有效。 平台差异说明
本功能自HBuilderX2.0起支持。运行到微信小程序工具时,注意在微信工具里选择最新的基础库。 editor组件目前只有H5、App的vue页面和微信支持,其他端的富文本编辑解决方案,可使用web-view加载web页面,也可搜索插件市场 获取简单的markdown富文本编辑器
编辑器内支持部分 HTML 标签和内连样式,不支持class和id 支持的标签 不满足的标签会被忽略,<div>会被转行为<p>储存。
支持的内连样式 内联样式仅能设置在行内元素或块级元素上,不能同时设置。例如 font-size` 归类为行内元素属性,在 p 标签上设置是无效的。
注意事项 1. 插入的 html 中事件绑定会被移除 2. formats 中的 color 属性会统一以 hex 格式返回 3. 粘贴时仅纯文本内容会被拷贝进编辑器 4. 插入 html 到编辑器内时,编辑器会删除一些不必要的标签,以保证内容的统一。例如<p><span>xxx</span></p>会改写为<p>xxx</p> 5. 编辑器聚焦时页面会被上推,系统行为以保证编辑区可见
【uniapp参考资料】 (1)uni-app跨平台开发 入门到实战 https://ke.qq.com/course/package/26512 (2)uni-app 完整商城界面设计实战 https://ke.qq.com/course/2381059 (3)基于vue的uniapp商城完整项目源代码 https://ke.qq.com/course/3064977 (4)毕业设计网 (5)小程序编程网 (6)计算机编程网 |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
上一篇: 6.4.2 checkbox-group多项选择器 | 下一篇: 6.4.4 form 表单 |