Доступный каждому редактор для голоса со встроенным хостингом фото. (Работает в браузере, сервер не требуется)

Продолжаю дорабатывать редактор начатый в посте https://golos.io/ru--golos/@vik/red многое исправил, многое добавил

Демо редактора https://golos.rubtc.info/r/ (пост написан с него)

Исходный код: http://pastebin.com/raw/r7Be1AeE - вы можете создать собственный скопировав код в пустой html документ.

 

Обратите внимание на ссылку вида ../@имя/red - это одна из возможностей редактора - самостоятельно задавать ссылку, в отличии от генерации таковой из заголовка в обычной версии голоса.

Наприем у меня есть пост, ссылка на который выглядит так:

golos.io/ru--golos/@vik/podklyuchaemsya-k-node-wss-ws-golos-io-cherez-bloknot-podrobnyi-razbor-javascript-obshenie-s-api-golos-io-bonus-dannye-akkauntov

Она монструозно огромная и уродливая так как сгенерирована с заголовка. Но в этом редакторе я могу сделать ссылки лаконичными, например

golos.io/ru--golos/@vik/r 

 

Никаких путешествий на хостинги картинок - все работает в редакторе!

Самой важной фичей является кнопка загрузить фото, которая позволяет вам вставить в редактор фотографию.

Эта кнопка в фоновом режиме заливает вашу выбранную фотографию на imgur и далее вставляет в тело поста!

 

Кроме этого, по просьбе @anela добавлено автосохранение и просмотр исходного кода.  Автосохранение сохранит ваш текст в памяти - то есть если вы случайно покинете редактор, то не потеряете ваш текст, так как он хранится в local storage вашего браузера. Следует понимать, что конкретно того браузера, в котором вы писали пост :)

Просмотр и редактирование исходного кода тоже очень удобная вещь 

 

Форматирование текста, почему голос предпочитает Markdown

Если обратиться к википедии, мы найдем значение как  Markdown (маркдаун) — это облегчённый язык разметки.

Облегченный - решает! Размер блоков ограничен и для blockchain ваш пост написанный в Markdown намного аккуратней, чем пост написанный в режиме html редактора. На самом деле с моей стороны кощунство побуждать засырать БЧ html тегами, однако, многие пользуются именно html редактором на голосе и тут я уже могу позволить себе показать альтернативу. 

На данном этапе не все кнопки в моем редакторе совместимы с html голоса, сейчас я сделаю тесты и позднее, сравним то, как выглядело форматирование в редакторе и как его воспринял html сдандарт голоса. 

На скринах, как это должно выглядеть, а под скринами мы увидим  что из этого вышло и насколько сейчас все совместимо. 

Что получилось:

Заголовок H1

Заголовок h2

Заголовок H3

Ты жирная,

Косая, 

Левая 

и Правая (не совместимо

может Центровая (не совместимо

 

• Список
• список
• список

Нумерованный список

1. Раз
2. Два 
3. Три

Отсутп от края... (не совместимо

Ссылка с target blank

Тут цветной текст... Сомневаюсь, что он работает... (не совместимо

Смайлы :)

Код

function upload(file) { 







        if (!file || !file.type.match(/image.*/)) return; 







document.getElementById("addimg").classList.add('loading'); 







var fd = new FormData();