npm install meep-draft-editor font-awesome --save
{
"presets": ["es2015", "react", "stage-0"],
"plugins": ["typecheck", "syntax-flow", "transform-flow-strip-types"]
}
module: {
loaders: [
{ test: /\.js$/, loader: "jsx-loader" },
{ test: /\.css$/, loader: "style-loader!css-loader" },
{ test: /\.js$/, exclude: /node_modules/, loader: "babel-loader"},
{
test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
loader: "url?limit=10000&mimetype=application/font-woff"
}, {
test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
loader: "url?limit=10000&mimetype=application/font-woff"
}, {
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
loader: "url?limit=10000&mimetype=application/octet-stream"
}, {
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
loader: "file"
}, {
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
loader: "url?limit=10000&mimetype=image/svg+xml"
}
]
}
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'
}
}
/* 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
}
}]
}
import React from 'react';
import ReactDom, { render } from 'react-dom';
import 'font-awesome/css/font-awesome.css';
import MeepDraftEditor from 'meep-draft-editor';
ReactDom.render(
<MeepDraftEditor />,
document.getElementById('app')
);
//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}
/>
import MeepDraftEditor from 'meep-draft-editor';
ReactDom.render(
<MeepDraftEditor
onEditorChange={(content) => {
console.log(content) //get convertToRaw it could useful when saving an editor state for storage
}}
/>,
document.getElementById('app')
);
import MeepDraftEditor from 'meep-draft-editor';
ReactDom.render(
<MeepDraftEditor
editorStyle={editorStyle}
/>,
document.getElementById('app')
);
import MeepDraftEditor from 'meep-draft-editor';
ReactDom.render(
<MeepDraftEditor
setting={editorSetting}
/>,
document.getElementById('app')
);
import MeepDraftEditor from 'meep-draft-editor';
ReactDom.render(
<MeepDraftEditor
placeholder="Write something ..."
/>,
document.getElementById('app')
);
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
import MeepDraftEditor from 'meep-draft-editor';
//plugin
import createHashtagPlugin from 'draft-js-hashtag-plugin';
import 'draft-js-hashtag-plugin/lib/plugin.css';
const hashtagPlugin = createHashtagPlugin();
const plugins = [hashtagPlugin.pluginProps, ..YourCustomPlugin];
ReactDom.render(
<MeepDraftEditor
plugins={plugins}
/>,
document.getElementById('app')
);
HOW TO MAKE CUSTOM EDITOR PLUGS ?
<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
-
- 重構物件分離
Published by Whien_Liou under a permissive MIT License