@yungu-fed/static-richeditor
v0.0.28
Published
云谷富文本组件
Downloads
8
Readme
@yungu-fed/static-richeditor
安装:
npm i @yungu-fed/static-richeditor --save
引入:
import RichEditor from '@yungu-fed/static-richeditor';
对外参数
initContent: 初始化内容 string
height: 编辑器高度 number
placeholder: 默认文本 string
language: 国际化 zh_CN en
statusbar: 是否隐藏底部dom信息 boolean
skin: 主题包,默认是oxide,可以选择oxide, oxide-dark, border,还可以自己自定义
pasteWordFormatting: 粘贴是否保留word文档格式 boolean
toolbar: 自定义工具栏,如果不传,则默认全部 string
对外函数
自定义上传图片
uploadImage: function(file, success) {}
success填充的返回数据格式:[{url: ***}, {url: ***}]
自定义上传文件
uploadFolder: function(file, success) {}
file:文件列表
success:成功之后的回调函数,返回数据格式:[{name: ***, url: ***}, {name: ***, url: ***}]
自定义上传多媒体
uploadMedia: function(file, success) {}
file:文件列表
success:成功之后的回调函数,返回数据格式:[{url: ***, attr: {自定义video属性}}, {url: ***, attr: {自定义video属性}}]
输入文本
handleEditorChange: function(content) {}
Demo
import React from 'react';
import ReactDOM from 'react-dom';
import App from './app';
import Test from './test';
function uploadImage(file, callback) {
var imageList = [
{url: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3104194953,617480653&fm=26&gp=0.jpg'},
{url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201510%2F07%2F20151007093324_8GndS.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1623201246&t=5937e9e631bc06a93fa2bd76e1ce3bfa'}
];
typeof callback == "function" && callback.call(this, imageList);
}
function uploadFolder(file, callback) {
var fileList = [
{name: '上传文档测试测试测试.doc', url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcdn.duitang.com%2Fuploads%2Fitem%2F201410%2F20%2F20141020162058_UrMNe.jpeg&refer=http%3A%2F%2Fcdn.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1622016034&t=f8390714ac38ffa065eafb145d4471b7'},
{name: '验收测试.pdf', url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcdn.duitang.com%2Fuploads%2Fitem%2F201407%2F16%2F20140716212515_TvYEA.jpeg&refer=http%3A%2F%2Fcdn.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1622016047&t=f5fc1152aee2732e602a5426864e1084'},
{name: '文档23232.doc', url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcdn.duitang.com%2Fuploads%2Fitem%2F201301%2F13%2F20130113011604_SRNyP.thumb.700_0.jpeg&refer=http%3A%2F%2Fcdn.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1622016047&t=0e5ca459c6ad0f7e6178351d39ebd355'}
];
typeof callback == "function" && callback.call(this, fileList);
}
function uploadMedia(file, callback) {
var videoList = [
{url: 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4', attr: { poster:"https://img0.baidu.com/it/u=2956693081,2041186315&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=889", playsinline:true}},
{url: 'https://media.w3.org/2010/05/sintel/trailer.mp4'}
];
typeof callback == "function" && callback.call(this, videoList);
}
ReactDOM.render(
<div>
<App
height={600}
placeholder="在这里请输入"
language="en"
uploadImage={uploadImage}
initContent="任务列表新建任务—默认为空。从教学步骤中的发任务-默认将教学步骤中的内容带回,所属课程和关联到课不可修改。"
uploadImage={uploadImage}
uploadFolder={uploadFolder}
uploadMedia={uploadMedia}
/>
<Test />
</div>, document.getElementById("root"));