更新记录

1.0.0（2021-11-23）

������һ���汾

平台兼容性

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

参考资料

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

更多帮助

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