Gore Wang , 2017 @ F2E Taiwan
Email：sunrise91.t3@gmail.com
GitHub : @GoreStarry
// 簡述
import { EditorState, Editor } from 'draft-js';
constructor() {
this.state = {
editorState: EditorState.createEmpty()
};
}
render() {
return (
<Editor editorState={ this.state.editorState }/>
)
}
// 實際上是immutable的形式，以下只是方便解說羅列
EditorState: {
currentContent: ...
selection: ...
decorator: ...
lastChangeType:"insert-characters"
directionMap: ...
allowUndo: true
redoStack: ...
undoStack: ...
...
}
// 實際上是immutable的形式，以下只是方便解說羅列
ContentState: {
blockMap: ...
entityMap: ...
...
}所以才需要 immutable
const styleMap = {
HEIGH_LIGHT: {
backgroundColor: 'green'
}
}
<Editor customStyleMap={ styleMap }/>
const newEditorState = RichUtils.toggleInlineStyle(editorState, 'HEIGH_LIGHT')
currentContent:{
blockMap:{
blockId: {
characterList:[
{
entity:null,
style:[]
},
{
entity:null,
style:["HEIGH_LIGHT"]
}
]
}
}
}
會在characterList替所選的每一個字註記style type
註冊Block Type:
import Immutable from 'immutable';
const BlockRenderMap = Immutable.Map({
'superTitleBlock': {
element: 'h1',
wrapper: <BlockWapperTest/>
}
})
function myBlockStyleFn(contentBlock) {
const type = contentBlock.getType();
switch (type) {
case 'superTitleBlock':
return 'super__title' // => <h1 class="super__title"...
}
}
<Editor
blockRenderMap={ extendedBlockRenderMap }
blockStyleFn={ myBlockStyleFn } />
contentBlock: {
blocks:[
{
text: "block styling測試",
type: "superTitleBlock",
...
}
]
}
class BlockWapperTest extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div className='MyCustomBlock'>
{ this.props.children }
</div>
);
}
}Strategy：
倚靠指定「匹配範圍」傳入component實踐styling
const compositeDecorator = new CompositeDecorator([
{
strategy: function(contentBlock, callback, contentState) {
const text = contentBlock.getText();
const hashReg = /\#[\w\u0590-\u05ff]+/g;
let matchArr,
start;
while ((matchArr = hashReg.exec(text)) !== null) {
start = matchArr.index;
callback(start, start + matchArr[0].length);
}
},
component: HashtagSpan,
}
]);
this.state = {
editorState: EditorState.createEmpty(compositeDecorator)
};
const contentStateWithEntity = contentState.createEntity(
'LINK',
'MUTABLE',
{href: 'http://www.zombo.com'}
);
const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
const contentStateWithLink = Modifier.applyEntity(
contentState,
selectionState,
entityKey
);主要用在創建有帶異動性資料的區塊
(e.g. link url, image url ...)
currentContent:{
blockMap:{
blockId: {
characterList:[
{
entity:null,
style:[]
},
{
entity:1, // entity id
style:[]
},
...
]
}
}
}
const compositeDecorator = new CompositeDecorator([
{
strategy: function(contentBlock, callback, contentState) {
contentBlock.findEntityRanges(
(character) => {
const entityKey = character.getEntity();
return (entityKey !== null
&&
contentState.getEntity(entityKey).getType() == 'LINK')
},
callback)
},
component: TestDecoratorWapper
},
]);
<Editor
keyBindingFn={ KeyBindingMap }
handleKeyCommand={ this.handleKeyCommand }/>
import { getDefaultKeyBinding, KeyBindingUtil } from 'draft-js';
const {hasCommandModifier} = KeyBindingUtil;
function keyBindingFn(e) {
const hasCommand = hasCommandModifier(e);
switch (e.keyCode) {
case ( hasCommand && 83):
return 'myeditor-save';
default:
return getDefaultKeyBinding(e);
}
}
function handleKeyCommand(command) => {
switch (command) {
case 'myeditor-save':
console.log('saved');
return 'handled'
default:
return 'not-handled'
}
};