Редактируя посты в блоге часто приходится вставлять фотки и скриншоты. Редактор TinyMCE который используется у меня в блоге позволяет вставлять картинки прямо в текст и потом сохранять их. Однако перед вставкой их приходися обрезать и обрабатывать во всяких Paint-ах и Gimp-ax. Но теперь использовать для этого внешние программы не обязательно - 
можно установить на сайт виджет Painterro который позволяет вставлять скриншоты и картинки по Ctrl+V и редактировать их прямо в браузере, в админке вашего блока. Ссылка на проект: Painterro. Встроить виджет в блог довольно просто, и в посте я расскажу об этом.

 

 

Если ваш блог работает на wordpress то вам достаточно установить плагин painterro для wodpress.

Если же у вас самодельный блог как у меня то делаем следующее.

Скачиваем файл painterro-0.2.22.min.js (или более новый) из релизов, кладем к себе в папку со статикой и подключаем

<script type="text/javascript" src="/static/painterro-0.2.22.min.js"></script>

Теперь на странице редактирования поста там где настраивается tinymce добавдяем следующий код:

tinymce.init({
  selector : "#id_content", // id элемента textarea на котором создается TinyMCE 
  ....

  toolbar: [ // Добавлям кнопку для открытия painterro в toolbar
    "painterro | undo redo | styleselect | bold italic | link image | bullist | numlist | cont_btn | alignleft aligncenter alignright",
  ],

  setup: function(editor) {

// инициализируем painterro var painterro = Painterro({ saveHandler: function (image, done) {
// по сохранению вставляем картинку в редактор editor.execCommand('mceInsertContent', false, '<img src="' + image.asDataURL() + '" />'); done(true) } })

// определяем кнопку tinyMCE editor.addButton("painterro", { title : "Painterro", onclick: function () { painterro.show(); }, 'icon' : "painterro", }); } });

Хендлер для сохранения картинок сохраняет прямо в текст в виде blob-url (по примеру из ридми).
Также там есть примеры сохранения через AJAX-запросы которые безусловно являются более эффективными. Но так как
в блоге я сохраняю картинки методом парсинга блобов на сервер о котором я писал раньше то и вставка в текст подойдет.

Также пришлось добавить стили для иконки и увеличить z-index для виджета (некоторые мои элементы перекрывали его):

i.mce-i-painterro:before, span.mce_painterro:before {
  font-size: 20px !important;
  font-family: ptroiconfont !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\f101";
}

.ptro-holder-wrapper {
  z-index: 1000;
}

На этом все!