Как из любого браузера сделать текстовый редактор.

Интересная особенность обнаружилась на просторах github. Как оказалось, основная часть современных интернет-браузеров поддерживает веб-стандарты, способные превратить его в текстовый редактор. Вставьте в строку адреса своего интернет-браузера вот такой код и нажмите Enter:

data:text/html;base64,PGh0bWwgY29udGVudGVkaXRhYmxlPg==

Перед вами появится чистый лист. Переведите курсор в основное поле браузера и начните печатать текст. Прикольно? – Но это не всё 🙂 Введённый текст можно форматировать при помощи горячих клавиш: для выделения слова или фразы жирным используйте сочетание Cmd ⌘ + B, а для выделения курсивомCmd ⌘ + I. Текстовый редактор из Safari
Написанное можно сохранить в виде HTML-страницы: нажмите Cmd ⌘ + S и сохраните файл в удобное место. Но и это ещё не всё. При помощи JavaScript и CSS ребятам удалось прикрутить ко всему этому поддержку подсветки синтаксиса. Скопируйте следующий кусок кода и вставьте его в строку адреса, как вы делали это на предыдущем этапе:

data:text/html,%3Cstyle%20type=%22text/css%22%3E.e%7Bposition:absolute;%20top:0;%20right:50%25;%20bottom:0;left:0;%7D%20.c%7Bposition:absolute;%20overflow:auto;%20top:0;right:0;%20bottom:0;%20left:50%25;%7D%3C/style%3E%3Cdiv%20class=%22e%22%20id=%22editor%22%3E%3C/div%3E%3Cdiv%20class=%22c%22%3E%3C/div%3E%3Cscript%20src=%22http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js%22%20type=%22text/javascript%22%20charset=%22utf-8%22%3E%3C/script%3E%3Cscript%20src=%22http://cdnjs.cloudflare.com/ajax/libs/showdown/0.3.1/showdown.min.js%22%3E%3C/script%3E%3Cscript%3Efunction%20showResult(e)%7BconsoleEl.innerHTML=e%7D%20var%20e=ace.edit(%22editor%22);%20e.setTheme(%22ace/theme/monokai%22);%20e.getSession().setMode(%22ace/mode/markdown%22);%20var%20consoleEl=document.getElementsByClassName(%22c%22)%5B0%5D;%20var%20converter=new%20Showdown.converter;%20e.commands.addCommand(%7Bname:%22markdown%22,%20bindKey:%7Bwin:%22Ctrl-M%22,mac:%22Command-M%22%7D,%20exec:function(t)%7Bvar%20n=e.getSession().getMode().$id;%20%20if(n==%22ace/mode/markdown%22)%7BshowResult(converter.makeHtml(t.getValue()))%7D%7D,%20%20readOnly:true%7D)%3C/script%3E

Текстовый редактор из Safari с подсветкой синтаксиса Как вы видите, теперь рабочее пространство разделено на две части. В левой части можно набирать код, (код в ней будет подсвечиваться прямо как в продвинутых редакторах с подсветкой синтаксиса), а правая часть будет пустой. Теперь нажмите Cmd ⌘ + M – весь написанный код в правой части отобразится в виде отформатированного HTML. Введённый в строку адреса код можно сохранить в браузере в виде избранной закладки, а при необходимости использовать как текстовый или HTML-редактор.

P.S. Эти фичи были проверены в Safari и Firefox. Напишите, как можно использовать, по вашему мнению, данную находку. Удачи.

Share this article
0
Share
Prev Post

Как получить полный список шорткатов Safari.

Next Post

Opera переходит на WebKit.

Comments 6
  1. Занес эту команду в закладки, часто юзал адресную строку, как временный редактор)

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Read next