❤
npm
Sign UpSign In

meep-draft-editor

1.4.0 • Public • Published

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

npm

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

ISSUE

WANTFIX

  • 重構物件分離

License

Published by Whien_Liou under a permissive MIT License

Readme

Keywords

none

Package Sidebar

Install

npm i meep-draft-editor

Repository

github.com/madeinfree/meep-draft-editor

Homepage

github.com/madeinfree/meep-draft-editor#readme

Weekly Downloads

3

Version

1.4.0

License

ISC

Last publish

Collaborators

  • whien_liou
Try on RunKit
Report malware