pen

Редактор ручки

• Живая демонстрация: http://sofish.github.io/pen
• Маркидай поддерживается
• Статус сборки:

---

---

0. исходный код

Вы можете клонировать исходный код из GitHub или с помощью Bower.

 bower install pen

1. Установка

1.1 INIT с атрибутом ID

 var editor = new Pen ( '#editor' ) ; 

1.2 Инициация с элементом

 var editor = new Pen ( document . getElementById ( 'editor' ) ) ; 

1.3 Инициация с опциями

 var options = {
  editor : document . body , // {DOM Element} [required]
  class : 'pen' , // {String} class of the editor,
  debug : false , // {Boolean} false by default
  textarea : '<textarea name="content"></textarea>' , // fallback for old browsers
  list : [ 'bold' , 'italic' , 'underline' ] , // editor menu list
  linksInNewWindow : true // open hyperlinks in a new windows/tab
}

var editor = new Pen ( options ) ; 

2. Настройка

Следующий объект устанавливает настройки ручки по умолчанию:

 defaults = {
  class : 'pen' ,
  debug : false ,
  textarea : '<textarea name="content"></textarea>' ,
  list : [
    'blockquote' , 'h2' , 'h3' , 'p' , 'insertorderedlist' , 'insertunorderedlist' ,
    'indent' , 'outdent' , 'bold' , 'italic' , 'underline' , 'createlink'
  ] ,
  stay : true ,
  linksInNewWindow : false
}

Если вы хотите настроить панель инструментов в соответствии с вашим собственным проектом, вы можете информировать конструктор Pen с помощью объекта options такого как #1.3: Init с параметрами:

2.1 Запасная сторона для старого браузера

Вы можете установить defaults.textarea на часть строки HTML, по умолчанию, это <textarea name="content"></textarea> 。 Это будет установлено как innerHTML вашего #editor .

2.2 Измените класс редактора

Печка добавит .pen в ваш редактор по умолчанию, если вы хотите изменить класс, обязательно замените pen класса на свой собственный в src/pen.css .

2.3 Включить режим отладки

Если options.debug установлен на true , Pen выводит журналы в консоли вашего браузера.

2.4 Настройте панель инструментов

Вы можете установить options.list в Array , добавьте следующие строки, чтобы сделать свои собственные:

• blockquote , h2 , h3 , p , pre : Создайте тег в качестве буквального значения
• insertorderedlist : Создайте список ol>li
• insertunorderedlist : Создайте список ul>li
• indent : список отступлений / блок блока
• outdent : открытие списка / блок блока
• bold : оберните выбор текста в тег b
• italic : оберните выбор текста в тег i
• underline : Оберните выбор текста в тег u
• createlink : вставьте ссылку на выбор текста
• inserthorizontalrule : вставьте метку hr
• insertimage : вставьте тег изображения ( img )

2.5 Добавить подсказки на значки панели инструментов

Вы можете установить options.titles . Значение каждого свойства будет использоваться в качестве атрибута заголовка на значке. Большинство браузеров будут отображать атрибут заголовка в качестве всплывающей подсказки, когда мышь колеблется над значком.

 options . title = {
    'blockquote' : 'Blockquote'
    'createlink' : 'Hyperlink'
    'insertimage' : 'Image'
}

Если вы используете Bootstrap или jQueryui, вы можете стандартизировать стиль подъема инструментов, добавив $('i.pen-icon').tooltip() в свой JavaScript.

2.6 Предотвратить небезопасную перенаправление страницы

По умолчанию Pen предотвратит небезопасную перенаправление страницы при редактировании, чтобы false его, конкретные options.stay .

ПРИМЕЧАНИЕ. Если defaults.debug установлен на true и default.stay не установлен: defaults.stay == !defaults.debug .

2.7 Отключить и восстановить редактор

Вы можете отключить редактор ручки с помощью метода Call destroy() объекта var pen = new Pen(options) . нравиться:

 var pen = new Pen ( '#editor' ) ;

pen . destroy ( ) ; // return itself

И есть соответствующий метод, называемый rebuild() для повторного управления редактором:

 pen . rebuild ( ) ; // return itself 

2.8 Экспорт контента как отметка

Это экспериментальная особенность

 var pen = new Pen ( '#editor' ) ;

pen . toMd ( ) ; // return a markdown string 

3. Поддержка синтаксиса Markdown

3.1 Установить

Синтаксис -конвертор будет включен автоматически путем связывания markdown.js после `pen.js:

 < script src =" src/pen.js " > </ script >
< script src =" src/markdown.js " > </ script > 

3.2 Использование

Чтобы использовать его, вы можете ввести action cmd + space key в начале линии. нравиться:

 ### This will create a h3 tag

Разрешены следующие CMD:

• Заголовки: тип 1 ~ 6 # в начале линии
• Неупорядоченный список: тип - или *
• Заказанный список: тип 1.
• Кодовый блок: введите `` `
• Цитата блока: Тип >
• Горизонтальное правило: более 3 - , * . Создаст <hr /> , как ......

4. Лицензия

Лицензирован в соответствии с MIT.

5. Доверенный *