react markdown 編輯器插件 for-editor

printempw 發布于2019-08-30 15:55 / 3448人閱讀

摘要：介紹由于需要用到下的編輯器功能，網上開源的編輯器不多，沒有找到合適的，索性自己寫一個。編輯器主要功能就是預覽，是一款下的編輯器，擁有預覽，快捷添加標簽，上一步，下一步功能，行號等功能，后續逐步完善更多功能。預覽預覽源碼地址歡迎，歡迎。

介紹

由于需要用到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標簽，預覽功能

GPU云服務器云服務器 markdown在線編輯器編輯器插件 html編輯器插件 js標記編輯器插件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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