Проекты, реализованные на javascript и JS библиотеках.
highslide4tinymce
Решил написать плагин для highslide.js и TinyMCE 4, который позволял бы автоматически обрамлять изображения оберткой highslide, которая выглядит так:
<a href="image.jpg" target="_self" class="highslide " onclick="return hs.expand(this)"><img src=image.jpg" alt="" border="0" height="461" width="584"></a>
Вручную это делать, конечно же, утомительно. В результате изучения стандартного TinyMCE плагина image я нашел строку, которая отвечает за вставку в редактор изображения и модифицировал её.
Было:
// line №215 editor.selection.setContent(dom.createHTML('img', data));
Стало:
var linkdata = {
href: data.src,
title: data.title,
caption: data.caption,
target: "_blank",
"class": "highslide",
"onclick": "return hs.expand(this)"
};
// делаем img потомком a_href
var imgtext = dom.createHTML('img', data); editor.selection.setContent(dom.createHTML('a', linkdata, imgtext));
В результате стандартный плагин вставки изображений обрамляет тег img тегом a. Но я люблю модульность, и будут случаи, когда пригодится функциональность старого плагина. Поэтому сделал отдельный плагин highslide for tinymce.
Включение в настройках TinyMCE:
plugins: [ 'advlist autolink lists link image highslide4tinymce charmap preview anchor', 'visualblocks code', 'insertdatetime media contextmenu paste code', 'emoticons emoticonsskype emoticonskolobki', 'prettify4tinymce wordcount' ], toolbar: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | ' + 'bullist numlist outdent indent | link image highslide4tinymce | emoticons emoticonsskype emoticonskolobki | prettify4tinymce preview',
prettify4tinymce
Не нашел плагина для Tinymce 4, который бы облегчал работу с google code-prettify, и потому решил сделать свой, благо делать плагины для Tinymce оказалось не так уж и тяжело)