npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@tbjy/tbdx-braft-editor

v0.0.3

Published

基于braft,封装编辑器,包含编辑器和展示

Downloads

19

Readme

示意图

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"
  },