react markdown 编辑器插件 for-editor

printempw 发布于2019-08-30 15:55 / 3214人阅读

摘要：介绍由于需要用到下的编辑器功能，网上开源的编辑器不多，没有找到合适的，索性自己写一个。编辑器主要功能就是预览，是一款下的编辑器，拥有预览，快捷添加标签，上一步，下一步功能，行号等功能，后续逐步完善更多功能。预览预览源码地址欢迎，欢迎。

介绍

由于需要用到react下的markdown编辑器功能，网上开源的react markdown编辑器不多，没有找到合适的，索性自己写一个。markdown编辑器主要功能就是预览，for-editor是一款react下的markdown编辑器，拥有预览，快捷添加标签，上一步，下一步功能，行号等功能，后续逐步完善更多功能。

预览

for-editor预览

for-editor源码地址欢迎issue，欢迎star。

界面

安装

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

ReactDOM.render(
  ,
  document.getElementById("container")
)

Api props

name	type	default	description
placeholder	String	请输入内容...	占位文本
value	String	-	输入框内容
lineNum	Boolean	true	是否显示行号

events

name	type	default	description
onChange	function(e)	-	内容改变时回调
onSave	function(e)	-	保存时回调

hot key

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

更新日志

2019-01-07 v0.0.9

新增上一步，下一步，tab快捷键功能

新增保存功能

优化图标状态

优化页面样式

2018-12-29 v0.0.8

添加行号显示功能

优化快捷插入标签时，光标选中文本内容

修复异步加载数据时编辑框回显问题

优化编辑区域行间距

2018-12-27 v0.0.6

优化图标按钮

修改组件UnMount时错误bug

新增组件placeholder属性

2018-12-26 v0.0.5

添加上一步，下一步按钮及功能

2018-12-25 v0.0.4

修复firefox下显示bug

2018-12-24 v0.0.3

增加全屏功能

修改onChange参数为输入框内容

优化编辑框输入字体

修复快捷插入标签时，滚动条位置bug

修复firefox下显示问题

2018-12-23 v0.0.0

编辑器基础功能，快捷插入markdown标签，预览功能

服务器托管云服务器 markdown在线编辑器编辑器插件 html编辑器插件 js标记编辑器插件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/117218.html

react markdown 编辑器插件 for-editor

摘要：介绍由于需要用到下的编辑器功能，网上开源的编辑器不多，没有找到合适的，索性自己写一个。编辑器主要功能就是预览，是一款下的编辑器，拥有预览，快捷添加标签，上一步，下一步功能，行号等功能，后续逐步完善更多功能。预览预览源码地址欢迎，欢迎。介绍由于需要用到react下的markdown编辑器功能，网上开源的react markdown编辑器不多，没有找到合适的，索性自己写一个。markd...

Karuru 2019-08-23 14:37 评论0 收藏0
react 搭建博客---支持markdown的富文本编辑器

摘要：最近在学，准备配合搭个博客，找了很多富文本编辑器，都不是很适合用，后来看到一篇搭建博客的文章，里面使用的地址，完全就符合我的想法啊，界面简洁大方还有预览功能。最近在学nodejs，准备配合react+mongodb搭个博客，找了很多富文本编辑器，都不是很适合react用，后来看到一篇vue+node搭建博客的文章，里面使用的simplemde(github地址)，完全就符合我的想法啊...

tylin 2019-08-21 11:52 评论0 收藏0
VSCODE常用插件使用记录

摘要：常用必备让资源树目录加上图标，必备良品自动路劲补全，默认不带这个功能的格式化代码使用指南按然后输入选择你要格式的文件类型格式后丰富的日志插件让括号拥有独立的颜色，易于区分。可以配合任意主题使用。常用必备： 1.vscode-icon 让 vscode 资源树目录加上图标，必备良品！ showImg(https://segmentfault.com/img/bV22ed?w=295...

winterdawn 2019-08-30 13:54 评论0 收藏0
VSCODE常用插件使用记录

摘要：常用必备让资源树目录加上图标，必备良品自动路劲补全，默认不带这个功能的格式化代码使用指南按然后输入选择你要格式的文件类型格式后丰富的日志插件让括号拥有独立的颜色，易于区分。可以配合任意主题使用。常用必备： 1.vscode-icon 让 vscode 资源树目录加上图标，必备良品！ showImg(https://segmentfault.com/img/bV22ed?w=295...

zhunjiee 2019-08-26 11:34 评论0 收藏0
VSCODE常用插件使用记录

摘要：常用必备让资源树目录加上图标，必备良品自动路劲补全，默认不带这个功能的格式化代码使用指南按然后输入选择你要格式的文件类型格式后丰富的日志插件让括号拥有独立的颜色，易于区分。可以配合任意主题使用。常用必备： 1.vscode-icon 让 vscode 资源树目录加上图标，必备良品！ showImg(https://segmentfault.com/img/bV22ed?w=295...

kyanag 2019-08-05 12:54 评论0 收藏0