Knedlik, редактор расширенного форматирования

WYSIWYG, визуальный редактор текстов, редактор расширенного форматирования, rich text editor, content editor, скачать бесплатно, простой редактор для сайтов

Скачать редактор бесплатно ≈ 33 килобайта (загрузок: 328)

Редактор Knedlik — это файл на языке JavaScript, при помощи которого вы можете превратить <textarea> на вашем сайте в полноценное визуальное средство форматирования текста. Ссылки, инструменты выделения, цвет, заголовки, таблицы, вставка картинок и произвольного HTML-кода, списки, спецсимволы, буквы с диакритическими знаками и греческий алфавит, гибкие настройки — это основные возможности.

Интерфейс настраивается и может быть переведён на любой язык. Редактор подстраивается под размер текстового поля (размер можно задать как в CSS, так и при помощи атрибутов HTML). Управляющие инструменты группируются, но почти все кнопки можно вынести на панель индивидуально.

Редактор состоит всего из одного файла, несмотря на то, что на кнопках есть изображения. Используется кодировка UTF-8. Knedlik работает во всех свежих браузерах.

Редактор прикрепляется очень просто:

<script type="text/javascript" src="knedlik.js"></script>
<script type="text/javascript">knedlik('my_textarea');</script>

Это самый простой способ, в котором достаточно указать только идентификатор (параметр id) вашего <textarea> — в данном примере это my_textarea. Вот что получается в итоге:

Привязать редактор к текстовому полю можно разными способами не только при помощи идентификатора: knedlik('id-of-textarea'); можно привязать к первому найденному textarea на странице: knedlik('') или просто knedlik() (пустые кавычки или просто пропущенный параметр).

Настройка

Для конфигурирования редактора нужен второй параметр. Он передаётся в формате объекта, то есть в фигурных скобках, и может состоять из нескольких частей, например:

knedlik('my_textarea', { 
  'buttons': ['bold', 'italic', 'underline', 'fgcolor'], 
  'translations': { 'boldName': 'Ж', 'italicName': 'К', 
    'underlineName': 'Ч', 'fgName': 'Цвет' }, 
  'colors': { 'background': '#def', 'backgroundBtn': '#def' } 
});

В этом примере объект, заключённый в фигурные скобки и следующий вторым аргументом, содержит информацию о тех кнопках, которые нужны на панели (формат: 'buttons': [], то есть идентификаторы кнопок перечисляются в массиве в квадратных скобках), о переводах (вложенный объект 'translations': {}) и о цветовой схеме (вложенный объект 'colors': {}). Обратите внимание, что в примере перечислены только избранные параметры — то есть допустимо заменять не все цветовые указатели и не все переводы, а лишь часть, и остальные будут взяты из встроенных наборов.

Ещё два опциональных массива при конфигурировании позволяют скрывать часть кнопок, оставляя остальные (массив 'exclude'), и выносить кнопки из группирующих панелей на основную панель (массив 'outside'). Обратите внимание, что если исключить одну из группирующих панелей, то группируемые ею кнопки не будут исключены, а просто окажутся на основной панели.

knedlik('my_textarea', { 
  'exclude': ['format', 'bold', 'italic', 'underline', 'strike', 
    'clear-format', 'font', 'bgcolor', 'image', 'plushtml', 'html'],  
  'outside': ['sym-mdash', 'sym-copy'] 
});

Далее, массив 'chars' позволяет добавить в таблицу символов по кнопке Åå дополнительные символы, которые появятся в самом низу диалогового окна с таблицей:

knedlik('my_textarea', { 
  'buttons': ['diacritic'], 
  'chars': ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十']
});

Разумеется, все вложенные объекты и массивы в конфигурационном параметре можно использовать в любой последовательности, в любых сочетаниях или не использовать вовсе.

Загрузка изображений

Конфигурационный параметр 'upload' позволяет загружать картинки и сразу вставлять их на нужное место в редактор (при условии, кто курсор стоит в поле редактора, а файл-обработчик существует и позволяет принимать файлы). Параметр должен быть равен пути к сценарию, загружающему файлы (на том языке, на котором работает ваш сайт: PHP, Java, ASP.NET и т.п.), например: 'upload': '/uploader.php'. Без указания этого параметра по кнопке вставки изображения доступна не загрузка файлов, а только указание пути к уже существующему на сервере файлу. Пример:

knedlik('my_textarea', { 'upload': '/file-uploader.php' });

Отдельно стоит подчеркнуть, что сама технология загрузки файлов на сервер не входит в поставку редактора, и вы должны написать её самостоятельно, учитывая следующие условия:

Пример принимающего сценария на языке PHP:

<?php
if(isset($_FILES['file']['tmp_name'])) {
  $tmp_name = $_FILES['file']['tmp_name'];
  $name = $_FILES['file']['name'];
  move_uploaded_file($tmp_name, 'uploads/'.$name);
  echo '/uploads/'.$name;
  exit;
}

В данном примере, который по умолчанию возвращает пустую строку, при загрузке файла будет возвращён путь к этому файлу.

Справочник

Список идентификаторов кнопок (полужирным выделены группирующие кнопки или те кнопки, которые вызывают свои диалоговые окна): 'format', 'bold', 'italic', 'underline', 'strike', 'sub', 'sup', 'clear-format', 'font', 'markup', 'markup-p', 'markup-h1', 'markup-h2', 'markup-h3', 'markup-h4', 'markup-pre', 'align', 'align-left', 'align-center', 'align-right', 'link', 'plushtml', 'lists', 'ul', 'ol', 'fgcolor', 'bgcolor', 'table', 'image', 'symbols', 'sym-mdash', 'sym-ndash', 'sym-hellip', 'sym-sect', 'sym-deg', 'sym-times', 'sym-apo', 'sym-euro', 'sym-copy', 'sym-reg', 'sym-tm', 'sym-q', 'sym-inq', 'sym-enq', 'diacritic', 'html'.

Список ключей для переводов на нужный язык (в данном примере с английскими переводами): 'boldName': 'B', 'italicName': 'I', 'underlineName': 'U', 'fontName': 'Font', 'markupName': 'Markup', 'markupPName': 'Paragraph', 'markupH1Name': 'Heading 1', 'markupH2Name': 'Heading 2', 'markupH3Name': 'Heading 3', 'markupH4Name': 'Heading 4', 'markupPreName': 'Preformatted', 'symName': 'Symbols', 'fgName': 'Color', 'bgName': 'Highlight', 'formatName': 'Format', 'format': 'Decorative', 'markup': 'Paragraph or headings', 'bold': 'Bold', 'italic': 'Italic', 'underline': 'Underline', 'strike': 'Strike Through', 'font': 'Font family and size', 'link': 'Add/edit link', 'unlink': 'Remove link', 'ul': 'Unordered list', 'ol': 'Ordered list', 'symbols': 'Additional characters', 'sym-mdash': 'M Dash', 'sym-ndash': 'N Dash', 'sym-copy': 'Copyright', 'sym-euro': 'Euro', 'sym-reg': 'Registered', 'sym-tm': 'Trademark', 'sym-sect': 'Section', 'sym-deg': 'Degree', 'sym-times': 'Multiplication', 'sym-apo': 'Apostrophe', 'sym-hellip': 'Ellipsis', 'sym-q': 'Quotes', 'sym-inq': 'Nested quotes', 'sym-enq': 'English quotes', 'diacritic': 'Diacritics', 'fgcolor': 'Foreground colour', 'bgcolor': 'Background colour', 'clear-format': 'Remove formatting', 'align': 'Align', 'align-left': 'Left align', 'align-center': 'Center align', 'align-right': 'Right align', 'html': 'Source code', 'plushtml': 'Arbitrary object or HTML in any place', 'lists': 'Lists', 'image': 'Picture', 'ok': 'OK', 'close': 'Close', 'newwin': 'Open in a new window', 'table': 'Table', 'tableCols': 'columns', 'tableRows': 'rows', 'tableHeaders': 'table headers', 'tableBorder': 'border', 'imageURL': 'Image URL', 'imageUpload': 'Or upload a picture:', 'imageUploading': 'Uploading…'

Список ключей для цветовых схем (с цветовыми указаниями по умолчанию): 'background': '#eee', 'backgroundBtn': '#eee', 'backgroundActive': '#ddd', 'border': '#ddd', 'borderBtn': '#ccc', 'borderActive': '#aaa', 'shadowBtn': '#ddd', 'shadowActive': '#bbb', 'shadowColor': '#bbb', 'colorBtn': '#444', 'colorClose': '#bbb', 'colorize': '#070', 'colorizeA': '#00c', 'colorizeH': '#dc143c'.

Авторские права и лицензия

Изобретатель редактора — Кирилл Панфилов. Первая версия редактора Knedlik разрабатывалась с 23 по 29 апреля 2014 года.

Редактор Knedlik распространяется под простой лицензией: можно использовать в любых целях бесплатно, но нельзя модифицировать исходный код. Английский текст лицензии: free to use, prohibited to change.

Приятно, что вы дочитали страницу до конца.