kkfor / For Editor
Licence: mit
for-editor - A markdown editor based on React
Stars: ✭ 358
Programming Languages
javascript
184084 projects - #8 most used programming language
typescript
32286 projects
Projects that are alternatives of or similar to For Editor
Pine
A modern, native macOS markdown editor
Stars: ✭ 2,818 (+687.15%)
Mutual labels: markdown, editor, markdown-editor
Phodit
Phodal's markdown/ebook editor with MicroFrontend & Web Components
Stars: ✭ 301 (-15.92%)
Mutual labels: markdown, editor, markdown-editor
Thiefmd
The markdown editor worth stealing. Inspired by Ulysses, based on code from Quilter
Stars: ✭ 48 (-86.59%)
Mutual labels: markdown, editor, markdown-editor
React Md Editor
A simple markdown editor with preview, implemented with React.js and TypeScript.
Stars: ✭ 374 (+4.47%)
Mutual labels: markdown, editor, markdown-editor
Md
✍ 一款高度简洁的微信 Markdown 编辑器:支持 Markdown 所有基础语法、色盘取色、一键复制并粘贴到公众号后台、多图上传、一键下载文档、自定义 CSS 样式、一键重置等特性
Stars: ✭ 2,242 (+526.26%)
Mutual labels: markdown, editor, markdown-editor
Stackedit.js
Add StackEdit to any website
Stars: ✭ 724 (+102.23%)
Mutual labels: markdown, editor, markdown-editor
Hypermd
A WYSIWYG Markdown Editor for browsers. Break the Wall between writing and previewing.
Stars: ✭ 1,258 (+251.4%)
Mutual labels: markdown, editor, markdown-editor
React Markdown Editor Lite
a light-weight Markdown editor based on React. 一款轻量的基于React的markdown编辑器
Stars: ✭ 553 (+54.47%)
Mutual labels: markdown, editor, component
Retext
ReText: Simple but powerful editor for Markdown and reStructuredText
Stars: ✭ 1,500 (+318.99%)
Mutual labels: markdown, editor, markdown-editor
Markor
Text editor - Notes & ToDo (for Android) - Markdown, todo.txt, plaintext, math, ..
Stars: ✭ 1,394 (+289.39%)
Mutual labels: markdown, editor, markdown-editor
React Mde
📝 React Markdown Editor
Stars: ✭ 1,196 (+234.08%)
Mutual labels: markdown, component, markdown-editor
React Markdown
Markdown editor (input) based on React
Stars: ✭ 98 (-72.63%)
Mutual labels: markdown, editor, component
Editor.md
The open source embeddable online markdown editor (component).
Stars: ✭ 11,741 (+3179.61%)
Mutual labels: markdown, editor, markdown-editor
Pervane
Plain text file based note taking and knowledge base building tool, markdown editor, simple browser IDE.
Stars: ✭ 159 (-55.59%)
Mutual labels: markdown, editor, markdown-editor
Markdownediting
Powerful Markdown package for Sublime Text with better syntax understanding and good color schemes.
Stars: ✭ 2,976 (+731.28%)
Mutual labels: markdown, markdown-editor
Codeexpander
A cross-platform cloud synchronization development tool for developers that includes input enhancement, code snippet management, and Markdown. (专为开发者开发的一个集输入增强、代码片段管理(支持 Markdown)为一体跨平台云同步的开发工具。)
Stars: ✭ 285 (-20.39%)
Mutual labels: markdown, markdown-editor
Text
📑 Collaborative document editing using Markdown
Stars: ✭ 282 (-21.23%)
Mutual labels: markdown, editor
for-editor
for-editor 是一个基于 react 的 markdown 语法编辑器
English Documents
安装
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 | 下一步 |
更新
Licence
for-editor is MIT Licence.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].