Meep-Draft-Editor draft.js rich text basic editor
https://github.com/madeinfree/meep-draft-editor
Github:https://www.npmjs.com/package/meep-draft-editor
Npm:Installation
npm install meep-draft-editor font-awesome --save
Webpack
.bablerc
"presets": "es2015" "react" "stage-0" "plugins": "typecheck" "syntax-flow" "transform-flow-strip-types"
webpack.config.js
module: loaders: test: /\.js$/ loader: "jsx-loader" test: /\.css$/ loader: "style-loader!css-loader" test: /\.js$/ exclude: /node_modules/ loader: "babel-loader" test: /\.woff?$/ loader: "url?limit=10000&mimetype=application/font-woff" test: /\.woff2?$/ loader: "url?limit=10000&mimetype=application/font-woff" test: /\.ttf?$/ loader: "url?limit=10000&mimetype=application/octet-stream" test: /\.eot?$/ loader: "file" test: /\.svg?$/ loader: "url?limit=10000&mimetype=image/svg+xml"
Editor component custom style config
const editorStyle = "root": padding: '20px' border: '1px solid #ccc' width: '670px' "root-control": color: '#000' fontSize: '40px' "root-input": minHeight: '150px' color: '#ccc' border: '3px solid #ccc' width: '620px'
Editor default controls config
/* you can choose the default meep-draft-editor controls, it can helpful expansion the controls in the future.*/const editorSetting = toolBar: 'basic' //default customControls: fontFamily: true fontSize: true text: BOLD: true ITALIC: true UNDERLINE: true STRIKETHROUGH: true link: set: true unset: true block: headerTwo: true unorderedListItem: true orderedListItem: true alignLeft: true alignCenter: true alignRight: true color: true background: true content: undo: true redo: true
Props API
defaultValue
placeholder
editorStyle
plugins
EVENT
onEditorChange(content)
Editor Settings
toolBar
- 'basic' -> default
- 'float'
customControls
dependencies
;;;
Examples
; ReactDom;
default editor block value
//defaultValue must be Draft ConvertToRaw JSON(Object)const defaultValue = "entityMap":{}"blocks":"key":"demmk""text":"Hello, Default Value !""type":"align-left""depth":0"inlineStyleRanges":"entityRanges":<MeepDraftEditor defaultValue=defaultValue/>
get the content when you want to saving an editor state to storage
; ReactDom;
custom editor css style
; ReactDom;
Editor Default Controls Settings
; ReactDom;
custom placeholder
; ReactDom;
use plugins
Congratulations !! Now 1.3.0 you can use the draft-js-plugins whithin meep-draft-editor and thanks for draft-js-plugins, or you can just use your custom plugins.
npm install draft-js-hashtag-plugin --save
;//plugin;;const hashtagPlugin = ;const plugins = hashtagPluginpluginProps YourCustomPlugin; ReactDom;
HOW TO MAKE CUSTOM EDITOR PLUGS ?
CHANGE-LOG
<2016 - 02 - ..>
- 將 Quill 文字編輯器改為 Draft 文字編輯器
<2016 - 03 - 02>
-
完成元件雛型並上傳至 github repo
- 命名 meep-draft-editor
-
完成玩間雛型並上傳至 node npm
- 打包成 package
<2016 - 03 - 03>
-
物件資訊取得方法
- onEditorChange( function(state :Object) :function )
-
使用者能取得預設給予的 EditorState 物件資訊
-
使用者能取得 CurrentContent
-
使用者能取得 Text
-
-
使用者能取得自訂的 EditorState 物件資訊
<2016 - 03 - 04>
-
增加
-
使用者能自訂尚未輸入任何字時的顯示提示
-
使用者能取得預設輸入框顯示提示
-
使用者能自訂輸入框顯示提示
-
使用者能改變編輯器外觀長、寬高
-
編輯器分為三部份拆解樣式外觀(root, root-control, root-input)
-
root 樣式更改
-
root-control 樣式更改
-
root-input 樣式更改
-
-
-
-
-
去除
-
點選時瀏覽器預設的選擇提醒外框
-
去除多餘元件(ButtomSelect)
-
<2016 - 03 - 05>
-
重構拆除元件
-
將元件拆除
- 讓使用者可以自訂需要使用的元件
-
<2016 - 03 - 07>
- 修正元件 editor input 點選時重複 focus 閃爍問題
<2016 - 03 - 09>
- 修正未加入輸入自訂樣式表會錯誤問題
<2016 - 03 - 014>
-
增加
-
修正 convertToRaw 無法取得正確自訂樣式資訊
-
新增 getConvertToRaw 取得元件 storage 物件
-
使用者可設定預設文字
-
<2016 - 03 - 15>
-
修正
-
assign {…this.props}
-
event 事件 onChange 改為 onBlur
-
修正沒有 onEditorChange,defaultValue 傳入錯誤資訊
<2016 - 03 - 21>
-
remove the draft-js@fix what was used to improvement
InlineBlockStyle
bug -
fixed some little but
<2016 - 03 - 22>
-
add the example page
-
fixed the static font 404 error
<2016 - 03 - 23>
- upgrade the draft-js to 0.3.0 version release
<2016 - 03 - 27>
- fixed the readOnly placeholder bug
<2016 - 03 - 28>
- version 1.2.3 release
<2016 - 03 - 29>
-
refactor all
-
added settings config
-
version 1.3.0rc-1 release
<2016 - 04 - 03>
-
refactor a little
-
compatibility with draft-js-plugins
-
allow to added custom plugins
-
version 1.3.0 release
-
Changed README, throw out the extra state
<2016 - 04 - 05>
- changed the default style way
<2016 - 04 - 10>
-
upgrade draft-js to 0.4.0
-
added editor toolbar mode
-
added dnd beta plugin
<2016 - 04 - xx>
-
upgrade draft-js to 0.5.0
-
upgrade react to 15.0.0
<2016 - 04 - 25>
- fixed some issue
-
ISSUE
WANTFIX
- 重構物件分離
License
Published by Whien_Liou under a permissive MIT License