更新记录

1.0.0(2021-11-23)

������һ���汾


平台兼容性

Vue2 Vue3
×
App 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序 快应用
3.1.0 × × × × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari

bctos-rich-editor 介绍

bctos-rich-editor是tinymce最新的5.10版本基础开发,主要扩展实现图片和视频上传到uniCloud的云存储中。

特别是视频上传部分,官网和网上的方案都是通过虚拟一个input按钮然后通过表单的方式上传,并不适用于云存储的上传参数要求。

研究了很久最终发现其实uniCloud提供了chooseAndUploadFile接口可以简单而且完美解决tinymce的文件上传问题(不局限于视频)。

前端富文本组件说明

本编辑器编辑的内容,建议使用我另一个插件 bctos-rich-text 解析,它能解决rich-text组件不支持视频播放和图片宽度超出手机显示界面的问题。

它能在小程序里完美实现视频与图文混排展示

安装方式

本组件符合easycom规范,HBuilderX 2.5.5起,只需将本组件导入项目,在页面template中即可直接使用,无需在页面中import和注册components

基本用法

设置 v-model 属性后,组件会自动初始化内容并显示出编辑器界面

<template>
      <uni-forms-item name="content" label="产品介绍">
        <bctos-rich-editor v-model="content" />
      </uni-forms-item>
</template>

export default {
    data() { 
        return {
            content: `<p>这里是内容段落一,下面放置了第一个视频</p><br>
            <p><video controls="controls">
            <source src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-042c6b2e-63dd-4fe1-b729-b6327b68450a/d906ba15-9041-4137-bc3f-44a413c855e0.mp4" type="video/mp4" /></video></p><br>
            <p>这里是内容段落二,下面放置了第二个视频</p><br>
            <p><video controls="controls">
            <source src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-042c6b2e-63dd-4fe1-b729-b6327b68450a/ae4a89d7-5c7e-48d2-b6f9-0da5c848bbda.mp4" type="video/mp4" /></video></p><br>
            <p>后面其它更多内容...</p>`,
        }
    }
}

API

bctos-rich-text Props

属性名 类型 必填 默认值 说明
v-model String - 富文本内容
id String 自动随机值 编辑器ID
height String 或 Number 360 高度
width String 或 Number auto 宽度

参考资料

tinymce中文文档 tian-article-admin插件

更多帮助

如果还想扩展其它功能,欢迎联系定制开发:QQ: 203163051

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问