Draft-js-plugins

Draft.js가 나올때 까지만 해도 TineMCE라던지, CKEditor라던지 등의 기존 에디터들이 있어서 뭐가 더 좋은게 있을지 몰랐는데, 이런게 오픈소스화의 힘이라고 보여집니다. 뭔가 중심을 잡아 주는 프로젝트를 만들고 plugin을 장착할 수 있는 구조가 만들어 지고 나니 사람들이 프로젝트를 확장하기 시작합니다.

2016/03/28 Editor’s choice

draft-js-plugins/draft-js-plugins
_draft-js-plugins - React Plugin Architecture for DraftJS including Slack-Like Emojis, FB-Like Mentions and Stickers_github.com

지금은 emoji, hash tag등의 플러그인 들이 만들어져 있습니다.

sticker 플러그 인을 한번 살펴 보겠습니다.

draft-js-plugins - High quality plugins for DraftJS with great UX
_Facebook’s rich-text editor framework DraftJS built on top of React allows you to create powerful editors. We built a…_www.draft-js-plugins.com

설치

npm install draft-js-sticker-plugin --save

소스

// It is important to import the Editor which accepts plugins.  
import Editor from 'draft-js-plugins-editor';  
import createStickerPlugin from 'draft-js-sticker-plugin';  
import React from 'react';  
import { fromJS } from 'immutable';  

// Creates an Instance. Passing in an Immutable.js List of stickers as an  
// argument.  
const stickers = fromJS({  
data: {  
'b3aa388f-b9f4-45b0-bba5-d92cf2caa48b': {  
id: 'b3aa388f-b9f4-45b0-bba5-d92cf2caa48b',  
url: '../images/unicorn-4.png',  
},  
'adec3f13-823c-47c3-b4d1-be4f68dd9d6d': {  
id: 'adec3f13-823c-47c3-b4d1-be4f68dd9d6d',  
url: '../images/unicorn-1.png',  
},  
},  
});  

const stickerPlugin = createStickerPlugin({ stickers });  

// The Editor accepts an array of plugins. In this case, only the stickerPlugin  
// is passed in, although it is possible to pass in multiple plugins.  
const MyEditor = ({ editorState, onChange }) =\> (  
<Editor  
editorState={ editorState }  
onChange={ onChange }  
plugins={ \[stickerPlugin\] }  
/\>  
);  

export default MyEditor;

아래와 같이 볼 수 있군요!