GithubHelp home page GithubHelp logo

wowlusitong / re-editor Goto Github PK

View Code? Open in Web Editor NEW
417.0 7.0 39.0 748 KB

一个开箱即用的React富文本编辑器 🚀re-editor

Home Page: https://re-editor.netlify.com

License: MIT License

JavaScript 90.17% CSS 9.53% HTML 0.31%
react slate slate-editor editor ant ant-design re-editor rich rich-text-editor wysiwyg

re-editor's Introduction

Hi there 👋

Languages and Tools:

Anurag's github stats

re-editor's People

Contributors

dependabot-preview[bot] avatar wowlusitong avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

re-editor's Issues

REACT HOOKS下从后端获取文本后没办法渲染?

异步从后端获取文本后不能够成功渲染,文本框始终是空的

export const Editor = () => {
    const [value, setValue] = useState(null);
   
    useEffect(() => {
        httpRequest("get", api.NoticeManage).then(response=>{
            setValue(JSON.parse(response.data.text))
        })
    }, [])
    
    const handleChange = (value) => {
        setValue(JSON.stringify(value.toJS()))
    }
    return (
        <ReEditor
            value={value}
            onChange={handleChange}
            placeholder="请输入内容"
            // onImageUpload={this.handleImageUpload}
        />
    )
}

引入报错

TypeError: _icon.default.createFromIconfontCN is not a function

var _icon = _interopRequireDefault(require("antd/es/icon"));

var _default = _icon.default.createFromIconfontCN({
scriptUrl: '//at.alicdn.com/t/font_1089062_pnt5z551qz.js'
});

new features request

图片:
1 建议图片初始按原图长宽比显示
2 图片用鼠标拉动缩放时,不要用角标拉(做得不够好),可以改成单纯拉高度和单纯拉宽度结合的方式
3 甚至进一步,用第三方 ‘react-image-crop’ 来弹出框,可以裁剪和旋转原图,截取选中部分来做结果图

保存和显示:
用json格式保存内容挺好,需要加一个显示结果的css或者独立react小组件,用来在需要显示结果的地方用来显示这个json内容。(用re-editor的只读模式可以做到,是不是可以更小巧些?)

建议将 ImageUploader 组件的 handleFileUpload 方法 暴露为一个接口

现在处理 image-local 的方式是直接把图片转为Base64插入到内容里,这样会导致数据很大。

实际使用中我们可能会希望把图片上传到一个图片服务器,然后再通过一个地址来引用。
但是我看了一下源码,发现好像并没有提供相应的接口来定制上传文件的过程。

虽然我可以自己封装一个组件实现upload 的过程,然后把返回的地址通过command(editor)('image',src)的方式插入到内容里。但是图片的替换功能依然写死了是调用 image-local 的。

我觉得比较好的方式,是将 ImageUploader 组件的 handleFileUpload 方法暴露为一个接口。这样可以比较灵活的实现定制的上传过程。

图片尺寸设置有问题

目前在DEMO里上传一个图片,尺寸变形(宽度全宽高度不是按比例缩放),手工设置高宽时,高宽的输入框似乎不能获得焦点。

另外看看是否可能鼠标拉动缩放图片?

我的操作环境:MACOS + CHROME

期望工具补充

1.支持超链接
2.支持附件上传
3.支持自定义图标及对应的回调,比如添加保存图标后自定义函数响应中做持久化

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.