@tbjy/tbdx-braft-editor NPM

示意图

avatar

使用方式

import {Editor,Html} from '@ali/tbdx-braft-editor';

// ...
const [context,setContent] = useState('')
// 编辑
  <Editor
    value={context}
    placeholder="请输入"
    {/* uploadFile={async ({ file }) => {
      let formData = new FormData();
      formData.append('file', file);
      const res = await axios({
        url: '//idaxue.taobao.com/oss/single/upload.jhtml?type=class_pic',
        data: formData,
        headers: {
          'content-type': 'multipart/form-data',
          isAjax: true,
          'x-xsrf-token': '1f48c891-d7f8-4935-9231-4c71be6afcea',
        },
        method: 'post',
      });
      if (res.data && res.data.success) {
        return res.data.msgInfo;
      } else {
        console.error(res?.data?.desc || '上传失败');
      }
    }} */}
    uploadByToken={async ({ name, size, type = 'image' }) => {
      let code = 'content_img';
      if (type === 'video') {
        code = 'content_premedia';
      }
      const res: any = await axios({
        url: `//pre-idaxue.taobao.com/oss/single/getUploadToken.jhtml?code=${code}&fileName=${name}&size=${size}&v=${+new Date()}`,
        headers: {
          'content-type': 'multipart/form-data',
          isAjax: true,
          'x-xsrf-token': 'ad59a686-f3be-4b4f-a178-d9235a156c77',
        },
        method: 'post',
      });
      if (res && res?.data && res.data?.model) {
        return res.data.model;
      }
      return Promise.reject(
        new Error(res.msgInfo || '获取上传凭证失败！')
      );
    }}
    onChange={(e) => {
      this.setState({
        context: e,
      });
    }}
  />
  <div>________________________________________</div>
  // 展示
  <Html value={context}></Html>


// ...

文件（图片，视频）上传方法示例

<Editor /> 支持 3 种上传方式（3 选 1）。

uploadFile?: Function; // 直接上传到服务器，需返回预览地址 url
uploadByToken?: Function; // 上传 oss，获取 token，需返回 Promise 对象{accessId: "",description: "",encodedPolicy:"",expiration: "",host:'',maxSize:"",signature:"",suffixs:""}；(无 uploadFile 时生效)
uploadBySTSToken?: Function; // 上传 oss，获取临时凭证，需返回 Promise 对象{};(无 uploadFile、getToken 时生效)

联系方式

使用有疑问或 bug，请联系 ll36

进度

2022 年 11 月 03 日 20:36:09 feature/1.0.0 替换成 braft editor
2022 年 11 月 09 日 18:50:11 v0.0.6 支持 uploadByToken；（uploadBySTSToken 暂未支持）
2022 年 11 月 14 日 11:40:05 v0.0.7 支持降低 uuid 版本解决，老项目打包兼容问题；移除 ali-oss sdk 降低包大小
2022 年 11 月 15 日 16:37:34 v0.0.9 fix: 解决视频上传百分比异常的问题
2022 年 11 月 17 日 14:13:30 v0.0.10 add: Editor 增加 beforeUpload，可用于校验上传文件的合法性。用法参考 BraftEditor 中 media.validateFn return true 或 Promise.resolve() 继续上传；return false 或 Promise.reject() 阻止上传
2022 年 11 月 18 日 18:02:22 v0.0.11 1. add: Html 增加 useShadowDom 属性（默认：false）。设为 true 时，使用 web shadow Dom，屏蔽业务站点样式干扰。2. 默认 font-size:14px;color:#000;
2022 年 12 月 1 日 18:02:22 v0.0.12 1. video 增加最小宽度80% 并居中
2023年12月11日15:04:19 v0.0.2 1. 优化 UI 显示（主要是各种，换行）；2. react 升级到 v16

更多细节 http://braft.margox.cn/

@ali/tbdx-braft-editor 0.0.13

  "publishConfig": {
    "registry": "http://registry.npm.alibaba-inc.com"
  },

@tbjy/tbdx-braft-editor 0.0.2

  "publishConfig": {
    "access": "public",
    "registry":  "https://registry.npmjs.org"
  },

axios braft-editor shadow-view uuid

@everything-registry/sub-chunk-897 @tbjy/sypl-workshop-materials

3 months ago

5 months ago

6 months ago

6 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago