Giter Club home page Giter Club logo

re-editor's Issues

图片尺寸设置有问题

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

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

我的操作环境:MACOS + CHROME

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}
        />
    )
}

期望工具补充

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

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 方法暴露为一个接口。这样可以比较灵活的实现定制的上传过程。

引入报错

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'
});

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.