请选择 进入手机版 | 继续访问电脑版
  • 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

bctos-rich-editor: bctos-rich-editor是tinymce最新的5.10版本基础开发,主要扩展实 ...

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称:

bctos-rich-editor

开源软件地址:

https://gitee.com/bctos_cn/bctos-rich-editor

开源软件介绍:


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-modelString-富文本内容
idString自动随机值编辑器ID
heightString 或 Number360高度
widthString 或 Numberauto宽度

参考资料

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

更多帮助

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


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
carousel: js 轮播组件发布时间:2022-02-13
下一篇:
spcss: 适用于简单的文本型网站的样式表发布时间:2022-02-13
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap