Подробно о разделе
JavaScript
Изображение для js-logo.png

Проекты, реализованные на javascript и JS библиотеках.

Изображение для Сохраненное изображение 2016-6-12_16-34-49.954.jpg

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



Результат:

Изображение для Сохраненное изображение 2016-3-20_20-3-35.367.jpg

prettify4tinymce

 Не нашел плагина для Tinymce 4, который бы облегчал работу с google code-prettify, и потому решил сделать свой, благо делать плагины для Tinymce оказалось не так уж и тяжело)

  • До плагина код вставлял в статью  через функцию "Исходный код"

 

  • Вот как это стало удобно с появлением плагина Prettify for Tinymce

 

  • И как выглядит результат