pell - 左子网

V2工作分支和V2项目委员会

pell是Web的最简单，最小的Wysiwyg文本编辑器，没有依赖关系

比较

图书馆	尺寸（最小+Gzip）	尺寸（最小）	jQuery	引导程序	反应	关联
pell	1.38kb	3.54KB				https://github.*com/jaredreich/pell
乡绅	16KB	49kb				https://github.c*om/neilj/squire
中编辑	27kb	105kb				https://github.c*om/yabwe/medium-editor
鹅毛笔	43kb	205kb				https://github.co*m/quilljs/quill
trix	47KB	204KB				https://github.*com/basecamp/trix
Ckeditor	163KB	551KB				https://ckedit*or.com
Trumbowyg	8KB	23kb	x			https://github.c*om/alex-d/trumbowyg
Summernote	26KB	93kb	x	x		https://git*hub.com/summernote/summernote
草稿	46kb	147KB			x	https://github.c*om/facebook/draft-js
弗罗拉	52kb	186KB	x			https://github.c*om/froala/wysiwyg-editor
Tinymce	157KB	491KB	x			https://githu*b.com/tinymce/tinymce

特征

纯JavaScript，无依赖项，用ES6编写
易于使用SASS文件（ pell .scs）或覆盖CSS易于自定义

包括措施：

大胆的
斜体
强调
罢工
标题1
标题2
段落
引用
排序列表
无序列表
代码
水平规则
关联
图像

其他可用操作（在https://developer.m*ozi*l*la.org/en-us/docs/web/api/document/execcommand上列出）：

证明中心合理
证明充实
左侧是合理的
正确地证明是合理的
下标
上标
字体名称
字体大小
缩进
八个
清晰的格式
撤消
重做

或创建任何自定义操作！

浏览器支持

即9+（理论上，但祝你好运）
Chrome 5+
Firefox 4+
Safari 5+
歌剧11.6+

安装

NPM：

npm install --save pell

html：

pell.min.css\”>
<style>
/* override styles here */
. pell -content {
background-color: pink;
}
</style>
</head>
<body>
…
<!– Bottom of body –>
<script src=\”https://u*npkg.c**om/pell\”></script>
</body>\”>

 < head >
  ...
  < link rel =\" stylesheet \" type =\" text/css \" href =\" https://u*npkg.c**om/pell/dist/ pell .min.css \" >
  < style >
    /* override styles here */
    . pell -content {
      background-color : pink;
    }
  </ style >
</ head >
< body >
  ...
  <!-- Bottom of body -->
  < script src =\" https://u*npkg.c**om/pell \" > </ script >
</ body >

用法

API

pell \’
// or
import { exec, init } from \’ pell \’\”>

 // ES6
import pell from \' pell \'
// or
import { exec , init } from \' pell \'

pell
// or
window. pell \”>

 // Browser
pell
// or
window . pell

pell on an HTMLElement
pell .init({
// <HTMLElement>, required
element: document.getElementById(\’some-id\’),

// <Function>, required
// Use the output html, triggered by element\’s `oninput` event
onChange: html => console.log(html),

// <string>, optional, default = \’div\’
// Instructs the editor which element to inject via the return key
defaultParagraphSeparator: \’div\’,

// <boolean>, optional, default = false
// Outputs <span style=\”font-weight: bold;\”></span> instead of <b></b>
styleWithCSS: false,

// <Array[string | Object]>, string if overwriting, object if customizing/creating
// action.name<string> (only required if overwriting)
// action.icon<string> (optional if overwriting, required if custom action)
// action.title<string> (optional)
// action.result<Function> (required)
// Specify the actions you specifically want (in order)
actions: [
\’bold\’,
{
name: \’custom\’,
icon: \’C\’,
title: \’Custom Action\’,
result: () => console.log(\’Do something!\’)
},
\’underline\’
],

// classes<Array[string]> (optional)
// Choose your custom class names
classes: {
actionbar: \’ pell -actionbar\’,
button: \’ pell -button\’,
content: \’ pell -content\’,
selected: \’ pell -button-selected\’
}
})

// Execute a document command, see reference:
// https://developer.mozi**l*la.org/en/docs/Web/API/Document/execCommand
// this is just `document.execCommand(command, false, value)`
pell .exec(command<string>, value<string>)\”>

 // Initialize pell on an HTMLElement
pell . init ( {
  // <HTMLElement>, required
  element : document . getElementById ( \'some-id\' ) ,

  // <Function>, required
  // Use the output html, triggered by element\'s `oninput` event
  onChange : html => console . log ( html ) ,

  // <string>, optional, default = \'div\'
  // Instructs the editor which element to inject via the return key
  defaultParagraphSeparator : \'div\' ,

  // <boolean>, optional, default = false
  // Outputs <span style=\"font-weight: bold;\"></span> instead of <b></b>
  styleWithCSS : false ,

  // <Array[string | Object]>, string if overwriting, object if customizing/creating
  // action.name<string> (only required if overwriting)
  // action.icon<string> (optional if overwriting, required if custom action)
  // action.title<string> (optional)
  // action.result<Function> (required)
  // Specify the actions you specifically want (in order)
  actions : [
    \'bold\' ,
    {
      name : \'custom\' ,
      icon : \'C\' ,
      title : \'Custom Action\' ,
      result : ( ) => console . log ( \'Do something!\' )
    } ,
    \'underline\'
  ] ,

  // classes<Array[string]> (optional)
  // Choose your custom class names
  classes : {
    actionbar : \' pell -actionbar\' ,
    button : \' pell -button\' ,
    content : \' pell -content\' ,
    selected : \' pell -button-selected\'
  }
} )

// Execute a document command, see reference:
// https://developer.mozi**l*la.org/en/docs/Web/API/Document/execCommand
// this is just `document.execCommand(command, false, value)`
pell . exec ( command < string > , value < string > )

覆盖动作名称的列表

大胆的
斜体
强调
罢工
标题1
标题2
段落
引用
olist
Ulist
代码
线
关联
图像

例子

一般的

pell\”></div>
<div>
HTML output:
<div id=\”html-output\” style=\”white-space:pre-wrap;\”></div>
</div>\”>

 < div id =\" editor \" class =\" pell \" > </ div >
< div >
  HTML output:
  < div id =\" html-output \" style =\" white-space:pre-wrap; \" > </ div >
</ div >

pell\’

const editor = init({
element: document.getElementById(\’editor\’),
onChange: html => {
document.getElementById(\’html-output\’).textContent = html
},
defaultParagraphSeparator: \’p\’,
styleWithCSS: true,
actions: [
\’bold\’,
\’underline\’,
{
name: \’italic\’,
result: () => exec(\’italic\’)
},
{
name: \’backColor\’,
icon: \'<div style=\”background-color:pink;\”>A</div>\’,
title: \’Highlight Color\’,
result: () => exec(\’backColor\’, \’pink\’)
},
{
name: \’image\’,
result: () => {
const url = window.prompt(\’Enter the image URL\’)
if (url) exec(\’insertImage\’, url)
}
},
{
name: \’link\’,
result: () => {
const url = window.prompt(\’Enter the link URL\’)
if (url) exec(\’createLink\’, url)
}
}
],
classes: {
actionbar: \’ pell -actionbar-custom-name\’,
button: \’ pell -button-custom-name\’,
content: \’ pell -content-custom-name\’,
selected: \’ pell -button-selected-custom-name\’
}
})

// editor.content<HTMLElement>
// To change the editor\’s content:
editor.content.innerHTML = \'<b><u><i>Initial content!</i></u></b>\’\”>

 import { exec , init } from \' pell \'

const editor = init ( {
  element : document . getElementById ( \'editor\' ) ,
  onChange : html => {
    document . getElementById ( \'html-output\' ) . textContent = html
  } ,
  defaultParagraphSeparator : \'p\' ,
  styleWithCSS : true ,
  actions : [
    \'bold\' ,
    \'underline\' ,
    {
      name : \'italic\' ,
      result : ( ) => exec ( \'italic\' )
    } ,
    {
      name : \'backColor\' ,
      icon : \'<div style=\"background-color:pink;\">A</div>\' ,
      title : \'Highlight Color\' ,
      result : ( ) => exec ( \'backColor\' , \'pink\' )
    } ,
    {
      name : \'image\' ,
      result : ( ) => {
        const url = window . prompt ( \'Enter the image URL\' )
        if ( url ) exec ( \'insertImage\' , url )
      }
    } ,
    {
      name : \'link\' ,
      result : ( ) => {
        const url = window . prompt ( \'Enter the link URL\' )
        if ( url ) exec ( \'createLink\' , url )
      }
    }
  ] ,
  classes : {
    actionbar : \' pell -actionbar-custom-name\' ,
    button : \' pell -button-custom-name\' ,
    content : \' pell -content-custom-name\' ,
    selected : \' pell -button-selected-custom-name\'
  }
} )

// editor.content<HTMLElement>
// To change the editor\'s content:
editor . content . innerHTML = \'<b><u><i>Initial content!</i></u></b>\'

示例（Markdown）

pell\”></div>
<div>
Markdown output:
<div id=\”markdown-output\” style=\”white-space:pre-wrap;\”></div>
</div>\”>

 < div id =\" editor \" class =\" pell \" > </ div >
< div >
  Markdown output:
  < div id =\" markdown-output \" style =\" white-space:pre-wrap; \" > </ div >
</ div >

pell\’
import Turndown from \’turndown\’

const { turndown } = new Turndown({ headingStyle: \’atx\’ })

init({
element: document.getElementById(\’editor\’),
actions: [\’bold\’, \’italic\’, \’heading1\’, \’heading2\’, \’olist\’, \’ulist\’],
onChange: html => {
document.getElementById(\’markdown-output\’).innerHTML = turndown(html)
}
})\”>

 import { init } from \' pell \'
import Turndown from \'turndown\'

const { turndown } = new Turndown ( { headingStyle : \'atx\' } )

init ( {
  element : document . getElementById ( \'editor\' ) ,
  actions : [ \'bold\' , \'italic\' , \'heading1\' , \'heading2\' , \'olist\' , \'ulist\' ] ,
  onChange : html => {
    document . getElementById ( \'markdown-output\' ) . innerHTML = turndown ( html )
  }
} )

框架

反应
Vue

定制样式

SCSS

pell-content-height: 400px;
// See all overwriteable variables in src/ pell .scss

// Then import pell .scss into styles:
@import \’../../node_modules/ pell /src/ pell \’;\”>

 $ pell -content-height : 400 px ;
// See all overwriteable variables in src/ pell .scss

// Then import pell .scss into styles:
@import \' ../../node_modules/ pell /src/ pell \' ;

CSS

pell styles are applied to DOM: */
. pell -content {
height: 400px;
}\”>

 /* After pell styles are applied to DOM: */
. pell -content {
  height : 400 px ;
}

执照

麻省理工学院

学分

浏览器浏览器测试的浏览：

V2工作分支和V2项目委员会

比较

特征

浏览器支持

安装

NPM：

html：

用法

API

覆盖动作名称的列表

例子

一般的

示例（Markdown）

框架

定制样式

SCSS

CSS

执照

学分

相关文章

微信

左子网

QQ交流群