pell README

The project's README from github.com/jaredreich/pell. As one markdown file: README.md.

v2 working branch and v2 project board

Logo

npm cdnjs

pell is the simplest and smallest WYSIWYG text editor for web, with no dependencies

Demo

Comparisons

library size (min+gzip) size (min) jquery bootstrap react link
pell 1.38kB 3.54kB https://github.com/jaredreich/pell
squire 16kB 49kB https://github.com/neilj/Squire
medium-editor 27kB 105kB https://github.com/yabwe/medium-editor
quill 43kB 205kB https://github.com/quilljs/quill
trix 47kB 204kB https://github.com/basecamp/trix
ckeditor 163kB 551kB https://ckeditor.com
trumbowyg 8kB 23kB x https://github.com/Alex-D/Trumbowyg
summernote 26kB 93kB x x https://github.com/summernote/summernote
draft 46kB 147kB x https://github.com/facebook/draft-js
froala 52kB 186kB x https://github.com/froala/wysiwyg-editor
tinymce 157kB 491kB x https://github.com/tinymce/tinymce

Features

Included actions:

Other available actions (listed at https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand):

Or create any custom action!

Browser Support

Installation

npm:

npm install --save pell

HTML:

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

Usage

API

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

// Browser
pell
// or
window.pell

// 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.mozilla.org/en/docs/Web/API/Document/execCommand
// this is just `document.execCommand(command, false, value)`
pell.exec(command<string>, value<string>)

List of overwriteable action names

Examples

General

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

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

Example (Markdown)

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

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)
  }
})

Frameworks

Custom Styles

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

CSS

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

License

MIT

Credits

BrowserStack for cross browser testing:

BrowserStack logo

pell (jaredreich/pell)

Searching Database…

12K ·GitHub
Pell
Что это такое?pell — это WYSIWYG-редактор форматированного текста для веба, самый простой и самый маленький из существующих, без единой зависимости. Вы встраиваете его на страницу, и у пользователей появляется панель инструментов для оформления текста.
Это готовое приложение или библиотека, которую я встраиваю на свой сайт?Библиотека: вы подключаете её через npm или тег script, привязываете к элементу на странице и управляете ею через API. Работает целиком в браузере.
Как добавить его в проект?Два способа: установить пакет из npm или подключить обычным HTML-тегом script — а затем инициализировать редактор на нужном элементе парой строк на JavaScript.
Нужны ли jQuery, Bootstrap или React, чтобы он работал?Нет — это чистый JavaScript на ES6 вообще без зависимостей, и сравнительная таблица показывает, что он, в отличие от большинства аналогов, не требует ни jQuery, ни Bootstrap, ни React.
Если он такой крошечный, сколько вообще функций форматирования есть на панели инструментов?Минимум по замыслу: 14 встроенных действий — полужирный, курсив, подчёркивание, зачёркивание, заголовки 1 и 2, абзац, цитата, нумерованный и маркированный списки, код, горизонтальная линия, ссылка и картинка. Также доступны выключка, размер шрифта, отмена/повтор и другое, плюс любые собственные действия.
В каких браузерах он работает?Даже в очень старых: Chrome 5+, Firefox 4+, Safari 5+, Opera 11.6+ и IE 9+ — правда, сам README называет поддержку IE лишь теоретической («good luck»).
Почему стоит выбрать pell, а не редакторы вроде Quill или TinyMCE?Размер: pell весит 1,38 кБ в min+gzip против 43 кБ у Quill, 47 кБ у Trix и 157 кБ у TinyMCE — и, в отличие от нескольких конкурентов, не требует jQuery, Bootstrap или React.
Как подогнать его под дизайн моего сайта?Стили меняются свободно: переопределите CSS напрямую или настройте входящий в комплект sass-файл pell.scss.
Могу ли я добавить на панель инструментов свои кнопки?Да — можно создать любое собственное действие, и даже имена стандартных действий (bold, link, image и так далее) можно переопределить через API.
Он нормально работает с React или Vue?В репозитории есть готовые примеры для обоих фреймворков, а также общий демо-пример и пример с Markdown.
What are similar projects?trix, medium-editor, ckeditor5, summernote, draft-js, quill, tinymce, slate
Which topics is it in?contenteditable, wysiwyg-editor, rich-text-editor, wysiwyg, sass, es6, text-editor, no-dependencies, lightweight, editor, javascript-library, ui-components
Creator
jaredreich
Size
1.2 MB
Stars
12K
Updated
CommitMay 12Releasev1.0.6Dec 05
Age
9y
Commits · 90 Days