Meep-draft-editor NPM

Meep-Draft-Editor draft.js rich text basic editor

Github: https://github.com/madeinfree/meep-draft-editor

Npm: https://www.npmjs.com/package/meep-draft-editor

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(\?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"
      }
    ]
  }

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

import React from 'react';
import ReactDom, { render } from 'react-dom';
import 'font-awesome/css/font-awesome.css';

Examples

import MeepDraftEditor from 'meep-draft-editor';

ReactDom.render(
  <MeepDraftEditor />,
  document.getElementById('app')
);

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

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')
);

custom editor css style

import MeepDraftEditor from 'meep-draft-editor';

ReactDom.render(
  <MeepDraftEditor
    editorStyle={editorStyle}
  />,
  document.getElementById('app')
);

Editor Default Controls Settings

import MeepDraftEditor from 'meep-draft-editor';

ReactDom.render(
  <MeepDraftEditor
    setting={editorSetting}
  />,
  document.getElementById('app')
);

custom placeholder

import MeepDraftEditor from 'meep-draft-editor';

ReactDom.render(
  <MeepDraftEditor
    placeholder="Write something ..."
  />,
  document.getElementById('app')
);

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

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 ?

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