kkfor / for-editor Goto Github PK

View Code? Open in Web Editor NEW

401.0 6.0 78.0 303 KB

for-editor - A markdown editor based on React

Home Page: https://md.kkfor.com/

License: MIT License

JavaScript 14.42% HTML 0.98% CSS 10.19% TypeScript 57.06% SCSS 17.35%

react markdown editor javascript markdown-editor component

for-editor's Introduction

for-editor

for-editor 是一个基于 react 的 markdown 语法编辑器

English Documents

demo
github

安装

npm install for-editor -S

使用

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import Editor from 'for-editor'

class App extends Component {
  constructor() {
    super()
    this.state = {
      value: ''
    }
  }

  handleChange(value) {
    this.setState({
      value
    })
  }

  render() {
    const { value } = this.state
    return <Editor value={value} onChange={() => this.handleChange()} />
  }
}

ReactDOM.render(<App />, document.getElementById('root'))

Api

属性

name	type	default	description
value	String	-	输入框内容
placeholder	String	开始编辑...	占位文本
lineNum	Boolean	true	是否显示行号
style	Object	-	编辑器样式
height	String	600px	编辑器高度
preview	Boolean	false	预览模式
expand	Boolean	false	全屏模式
subfield	Boolean	false	双栏模式(预览模式激活下有效)
language	String	zh-CN	语言(支持 zh-CN:中文简体, en:英文)
toolbar	Object	如下	自定义工具栏

/*
  默认工具栏按钮全部开启, 传入自定义对象
  例如: {
    h1: true, // h1
    code: true, // 代码块
    preview: true, // 预览
  }
  此时, 仅仅显示此三个功能键
  注:传入空对象则不显示工具栏
 */

toolbar: {
  h1: true, // h1
  h2: true, // h2
  h3: true, // h3
  h4: true, // h4
  img: true, // 图片
  link: true, // 链接
  code: true, // 代码块
  preview: true, // 预览
  expand: true, // 全屏
  /* v0.0.9 */
  undo: true, // 撤销
  redo: true, // 重做
  save: true, // 保存
  /* v0.2.3 */
  subfield: true, // 单双栏模式
}

事件

name	params 参数	default	description
onChange	String: value	-	内容改变时回调
onSave	String: value	-	保存时回调
addImg	File: file	-	添加图片时回调

图片上传

class App extends Component {
  constructor() {
    super()
    this.state = {
      value: '',
    }
    this.$vm = React.createRef()
  }

  handleChange(value) {
    this.setState({
      value
    })
  }

  addImg($file) {
    this.$vm.current.$img2Url($file.name, 'file_url')
    console.log($file)
  }

  render() {
    const { value } = this.state

    return (
      <Editor
        ref={this.$vm}
        value={value}
        addImg={($file) => this.addImg($file)}
        onChange={value => this.handleChange(value)}
      />
    )
  }
}

快捷键

name	description
tab	两个空格缩进
ctrl+s	保存
ctrl+z	上一步
ctrl+y	下一步

更新

Update Log

Licence

for-editor is MIT Licence.

for-editor's People

Contributors

Stargazers

Watchers

for-editor's Issues

tab键缩进有问题

onSave 方法在什么时候会执行？

按道理来讲，onSave 的回调只有我在按下ctrl+s的时候，才会触发，但实际上，我发现只要是组件的状态发生变化，就回执行，如下图所示:

当我输入文章标题的时候，会不断的执行 onSave 中指定的回调，只要把 onSave 回调去除就正常了。

这是我自己代码有问题，还是有 BUG ？

使用TS，onChange的事件传入类型报错！

React Hook + TS。onChange事件无法传入，会有类型报错，我的解决方法在下图。不知您这边是怎么处理的。
看了下源码，onChange事件是可选，所以会出现这个问题是不是因为打包的时候出了什么意外状况？

建议添加一个api，可以对md文件数据html。

组件使用非常好用，但是最近有个想法。希望等做到对以前写入的文章进行预览，使用marked包解析出的html跟原来写文章时预览的样式并不一致

不支持导出html片段吗

不支持生成html片段吗

记录一个坑 handleChange方法需要传一个value参数

如何获取右侧的html的数据呢？

是否可以考虑在onSave时，用参数传出右侧的html数据呢？

如果只想显示预览，有没有这个api 呢？

我只想在页面中显示md预览，不显示源码，可以做到吗？谢谢

换行无效问题

如图输入回车无法正常换行
游览器采用谷歌游览器 73.0.3683.75

建议增加 options 对象，将一些配置移动到 options 对象中

TypeScript 定义有问题

你这个库不是使用 ts 写的吗？可以再 tsconfig.json 的 compiler options 里加一个 declaration，自动生成类型定义，而不是你这样定义啊。。。所有的 props 都是必选的吗？整个项目都挂了....

https://www.typescriptlang.org/docs/handbook/compiler-options.html

English translation, please

请问下我直接用你提供的demo代码运行，没有保存，但是不能正常使用。

我初始化一个 React 项目，然后将你 README.md 的代码直接复制过来运行，界面正常显示，但是出现下面截图的几个问题。请问如何解决~

我的代码：

开发环境：

Windows10 64位
npm : 6.4.1
nodejs : 10.15.1

麻烦您帮忙看下啦~~

无法设置placeholder

希望可以设置输入框中的placeholder，有时候会需要的

Vulnerable to XSS

Can I suggest sanitizing the input for security reasons?

Link title doesn't accept more than one word

Link title doesn't accept more than one word even between quotation marks.

Issue reproduction

Link para o artigo: [Quer Viajar para Argentina - Medium.com][1]

[1]: https://medium.com/bestamericas-travel/quer-viajar-para-argentina-a340ce764413 "Quer Viajar para Argentina"

Expected

Link para o artigo: Quer Viajar para Argentina - Medium.com

References

It should follow the most common Markdown guide lines:

组件unmount时报错

在组件被卸载时（例如路由），报如下错误
Uncaught TypeError: Cannot read property 'value' of null

暂时不敢用在生产环境

默认subfield模式不生效

感谢分享~

            <ForEditor
              height="300px"
              subfield={true}
              toolbar={{
                h1: true, // h1
                h2: true, // h2
                h3: true, // h3
                h4: true, // h4
                img: true, // 图片
                link: true, // 链接
                code: true, // 代码块
                undo: true, // 撤销
                redo: true, // 重做
                subfield: true,
              }}
            />

初始时，按钮显示已激活，但并没有开启；
取消后再次点击，恢复正常；

希望提供添加自定义工具按钮的功能

提供可以自定义工具按钮的功能。
并提供可以隐藏部分按钮的功能。

方便可以拓展插件功能。比如上传图片.

在typescript中引入有个提示?

onSave方法触发后，怎么取值？

如题，该方法返回的是undefined，希望作者可以再完善一下文档，支持了，谢谢！

Header buttons insert Chinese text even if language="en"

When I click a header button, the text # 一级标题 is inserted instead of # Heading 1

预览可以自定义样式吗？

RT，谢谢

重做按钮和快捷键都无效

重做按钮点击无效，ctrl+y也无效

不能同步滚动

两边的滚动不能同步

Where is bold, italic and underline option in toolbar?

可不可设置一个flag，让用户直接调用【显示】的功能，而不需要【编辑】的功能？

如题。觉得该编辑器的显示功能不错，有时候只需要显示，而不需要编辑。谢谢。

window is not defined

环境

node v10.15.0
npm v6.5.0
react ^16.7.0
next ^7.0.2

版本

0.0.11

问题

console打印window is not defined

console输出信息

      
ReferenceError: window is not defined
    at Object. (E:\WebstormProjects\personal-site\node_modules\for-editor\dist\index.js:1:286)
    at Module._compile (internal/modules/cjs/loader.js:689:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
    at Module.load (internal/modules/cjs/loader.js:599:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
    at Function.Module._load (internal/modules/cjs/loader.js:530:3)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:22:18)
    at Object.for-editor (E:\WebstormProjects\personal-site\.next\server\static\development\pages\manage.js:879:18)
    at __webpack_require__ (E:\WebstormProjects\personal-site\.next\server\static\development\pages\manage.js:23:31)
    at Module../pages/manage.js (E:\WebstormProjects\personal-site\.next\server\static\development\pages\manage.js:466:68)
    at __webpack_require__ (E:\WebstormProjects\personal-site\.next\server\static\development\pages\manage.js:23:31)
    at Object.3 (E:\WebstormProjects\personal-site\.next\server\static\development\pages\manage.js:735:18)
    at __webpack_require__ (E:\WebstormProjects\personal-site\.next\server\static\development\pages\manage.js:23:31)
    at E:\WebstormProjects\personal-site\.next\server\static\development\pages\manage.js:91:18
    at Object. (E:\WebstormProjects\personal-site\.next\server\static\development\pages\manage.js:94:10)