Редактор Хабрахабра
2,0
рейтинг
30 января 2013 в 19:16

Разработка → Как превратить браузер в notepad за 1 секунду

HTML*
Открыть новую закладку, скопировать в адресную строку

data:text/html, <html contenteditable>

и нажать Enter.

Вуаля.


При клике на белом поле появляется курсор, и можно писать мысли, заметки, наблюдения. Романы, стихи…

Можно печатать написанное, можно сохранять в текстовый файл (для корректного сохранения русского языка необходимо сначала выставить правильную кодировку у страницы).
Вячеслав Голованов @SLY_G
карма
248,2
рейтинг 2,0
Редактор Хабрахабра
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое Разработка

Комментарии (154)

  • +37
    Спасибо, кэп.
    • +37
      Я вот знал, но никогда не задумывался
      • +18
        Есть такая проблема у хомосапиенсов.
  • +120
    В рот мне ноги.
    • +90
      в root мне логи
      • +17
        Врут мне боги. Или как там было?
        • +6
          фраг и лаги
          • –1
            Флак и фраги
            • 0
              Шлак и драги
        • +4
          блоги
        • +4
          Врут мне логи ):
          • 0
            Врут не логи.
    • +12
      Валим отсюда!
    • +3
      На айфоне тоже!
  • +54
    Особая, браузерная магия!
    • +2
      Шайтанама!!!
  • +17
    Добавил в букмарки, спасибо.
    • +1
      Непонятно, почему гора протухших шуток пятилетней давности в большом единогласном плюсе, а «спасибо» получило 16 минусов.
      • +8
        Ностальгия :)
      • +10
        На хабре как-то принято благодарность выражать полюсами в комменты, статью и/или карму, а не текстом… Возможно, дело в этом.
        • 0
          Вероятно, кое-чего не хватает для плюсов…
    • 0
      Статью или data:text/html… ?)
  • +7
    В конце не лишним бы был опрос вида «Знали ли вы...», мне кажется.
    (Хотя, по первым двум комментам расклад примерно понятен =)
    • +12
      Ага, все знали, но никто так не делал…
      • +13
        А зачем?
        • +1
          Думаю, некоторым этот вариант покажется более удобным, чем обычный блокнот.
          • +3
            Да ну? Скажи, что ты курил и я скажу, кто ты…
            • +3
              Видимо, у Вас совсем бедная фантазия.
              Например, я вижу следующие преимущества перед обычным блокнотом: удобнее переключаться на него при работе в броузере (т.к. расположен вместе с остальными вкладками), есть возможность форматирования текста и вставки картинок из буфера обмена, есть проверка орфографии. Думаю, для кого-то эти особенности вполне могут иметь значение.
              • +14
                Броузере?

                image
                • 0
                  Насколько я понимаю, Вас смутила буква «о».

                  Я использую этот вариант, потому, что по английски оно пишется "browser". Мне так больше нравится, поскольку мой уровень разговорного английского не очень высок и мне легче воспринимать слова, когда они произносятся так, как пишутся. Думаю, это не сильно мешает понимать людям общий смысл фразы.
                  • +1
                    Да всё в порядке, просто герой на картинке выше любит коверкать слова так, чтобы там было слово «бро» :)
          • 0
            При том с форматированием! (хоткеи работают) :)
          • 0
            В каком нибудь gedit (или notepad++) приятнее же работать, чем просто с белым полотном. А в этом contenteditable почему то даже проверки правописания нет, ни подсветки синтаксиса, ни автоматических отступов, автозамены и тд.
            Думаю, что его стоит рассматривать только в когда кроме браузера у вас ничего нет, например OS Asus Express Gate.
            Хотя в drive.google редактор покруче будет, но там уже нужно подключение к интернету.

            PS: в Firefox 18 не сработало, а в хроме да.
            • 0
              data:text/html, <style type="text/css">.e{position:absolute;top:0;right:0;bottom:0;left:0;}</style><div class="e" id="editor"></div><script src="http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script><script>var e=ace.edit("editor");e.setTheme("ace/theme/monokai");e.getSession().setMode("ace/mode/ruby");</script>
              
              • 0
                Это всё, конечно, неплохо. Но почему никто не выставляет читаемый title у страницы?
                Например для простого блокнота можно как-то так
                data:text/html, <html contenteditable><head><title>Notepad</title></head></html>
        • +1
          Сегодня я как раз задумывался над этим. У меня Mountain Lion, встроенный словарь русского языка весьма бедный. У Firefox есть собственный словарь, весьма богатый. Писать в google drive, чтобы видеть ошибки не получается. Якобы для корректной работы в google drive нужно использовать Chrome, который тоже использует встроенный словарь из операционки. Круг замкнулся.
  • +7
    Мамин ежик!
  • +135
    А если вставить вот это, то получится что-то похожее на Sublime Text
    • +45
      Ёма, народ!
      Ну нифига, чё творится в мире!
      • +62
        Это ж так дойдет прогресс, что с помощью браузера можно будет и по интернету ходить…
        • +12
          Ногами!
    • 0
      Еще один линк блог ?!
    • 0
      ага
      ...<script src=«d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js>...

      тогда вот мой фокус:
      data:text/html,<iframe src="http://www.habrahabr.ru"width="800"height="600"/>
      открывает хабр! :)

      а кстати что ещё кроме „data:“ и „javascript:“ можно вбивать?
      • 0
        а что еще НУЖНО?:)
  • +41
    image
  • –17
    Долго думал? :)
  • 0
    Хорошо, блин… )
  • +5
    NoScript блокирует скрипты в адресной строке :)
    • НЛО прилетело и опубликовало эту надпись здесь
  • +10
    Вот еще немного уличной магии оттуда же (addmeto.cc):
    data:text/html;base64,PHN0eWxlIHR5cGU9InRleHQvY3NzIj4uZXtwb3NpdGlvbjphYnNvbHV0ZTt0b3A6MDtyaWdodDowO2JvdHRvbTowO2xlZnQ6MDt9PC9zdHlsZT48ZGl2IGNsYXNzPSJlIiBpZD0iZWRpdG9yIj48L2Rpdj48c2NyaXB0IHNyYz0iaHR0cDovL2QxbjB4M3FqaTgyejUzLmNsb3VkZnJvbnQubmV0L3NyYy1taW4tbm9jb25mbGljdC9hY2UuanMiIHR5cGU9InRleHQvamF2YXNjcmlwdCIgY2hhcnNldD0idXRmLTgiPjwvc2NyaXB0PjxzY3JpcHQ+dmFyIGU9YWNlLmVkaXQoImVkaXRvciIpO2Uuc2V0VGhlbWUoImFjZS90aGVtZS9tb25va2FpIik7ZS5nZXRTZXNzaW9uKCkuc2V0TW9kZSgiYWNlL21vZGUvcGhwIik7PC9zY3JpcHQ+
    И будет у вас редактое ACE с подсветкой синтаксиса для PHP. Можно раскодировать и поменять на свой любяимый язык.
  • +4
    Если открыто для редактирования в хроме, то после окончания набора текста можно нажать на кнопку отправки на Android -> отметить генерацию странички и получить результат на телефоне в виде уведомления о загрузке… После завершения которой ничего не происходит =)))
  • –11
    В линуксе можно еще круче:
    echo "vi" | perl -e '$??s:;s:s;;$?::s;;=]=>%-{<-|}<&|`{;;y; -/:-@[-`{-};`-{/" -;;s;;$_;see'
    • +26
      Забыли упомянуть, что запускать надо из-под root.
      • +4
        Ну, я же хочу просто пошутить, а не преследоваться в течении года людьми, которые где попало вводят что попало :)
        • +9
          Я ввел и у меня куда-то пропали все файлы, что делать?!
          • +41
            Что-то мало вопросительных и восклицательных знаков в вашем комментарии, не верю.
            • +11
              С телефона человек пишет, небось.
              • +4
                С холодильника!!!1111
                • 0
                  Тогда уж: «Я ввел и у меня куда-то пропали все продукты, что делать?!»
                  • 0
                    Бэкап продуктов из дропбокса я откатил… Впрочем карма говорит, что надо завязывать с такими смищными шутками на хабре.
                    • +1
                      Комментарий здесь, чтобы лесенка вправо-влево была ровной.
                      • 0
                        МВУ-ХА-ХА!
                  • 0
                    купить новые:)
              • 0
                С браузера же.
          • 0
            Вы хотите поговорить об этом? [/психолог mode off]
      • 0
        Судя по *кхммм*… Кто-то таки последовал совету =)
    • 0
      О боже, Девид Блейн! Ты скукожил мою виртуалку! В рот мне ноги!

      ЗЫ: Баян.

  • +54
    Иногда хабр не понять. То заминусуют более менее нормальные статьи, то заплюсуют вот… это.
    • +12
      Это всего лишь хабр.
      Очень содержательная статья же!)
      Краткость с.т.
      • +8
        Стадность :)
      • 0
        И теща гонорара! )
    • +4
      Автор когда копировал с news.ycombinator.com/ надеялся на такую же популярность как и там.
  • +14
    Отредактировать уже открытую страничку под свои нужды:
    javascript:document.getElementsByTagName('html')[0].contentEditable=true;
    

    P.S.: хром (не знаю, как другие браузеры) почему-то при вставке этого фрагмента в адресную строку отрезает «javascript:», приходится дописывать
    • +8
      Зато отлично работает, если забить в закладки.
      Подшутил сейчас над женой, отредактировав страничку gismeteo :)
    • +2
      Выдал окошко со словом true;. Редактировать не даёт.
      • 0
        Можно нажать «Назад» потом и можно редактировать.
        P.s. В Opera так.
        • 0
          Там же можно правой кнопкой — Проинспектировать элемент, и уже там редактировать.
    • 0
      void(0);
      
      , наверное, приходится дописывать ((с)КО).
      • 0
        Да, и "javascript:" в начале — вручную набивать.
    • +4
      Чуть сокращу:
      javascript:document.body.contentEditable=true;
  • +9
    А чего можно натворить если консоль открыть — вообще уму не постижимо…
  • +60
    А вот Internet Explorer 10 слишком горд, чтобы быть Блокнотом:

    • +112
      > Some content of files on this webpage require a program that you don't have.
      Для отображения этого контента нужен браузер. IE напоминает, что вы, вероятно, забыли его скачать.
      • –1
        IE 10 единственный браузер, который нормально в плиточном режиме работает. Да и вообще, если б не миллионы людей, которые до сих пор зачем-то на 6 и 7 IE сидят, эту шутку давно пора бы забывать уже.
    • +2
      Ага, в IE 10 не получается. Я считаю, что это расовая дискриминация и преследование по религиозному признаку.
    • +3
      Младший брат не отличился:

      • +2
        Существует IE Mobile?!
        • +1
          Да, в Windows Phone, в 8ой версии идентичная 10-ая версия Mobile.
    • 0
      Так ведь эта штука только в браузерах работает? А IE всего лишь программа для скачивания оных.
  • +14
    В оригинале в комментариях есть более интересные варианты. И, да, сделал перевод — пометь, как перевод.
    coderwall.com/p/lhsrcq
  • +1
    Мда…
    Вообще много чего интересного можно найти, если вбивать в адресную строку)
    • 0
      Протокол data: «так же неисчерпаем, как и атом», и чуть более, чем протокол javascript: (всё же великая вещь букмарклеты!).
  • +33
    За это тоже 70$?
    • 0
      За каждый запуск.
      • 0
        Кому перечислить 0$? Дайте реквизиты.
  • +4
    В этом посте аккумулировано добро.
    • 0
      Ага, общий рейтинг за все комменты +311 и +85 за сам пост.
  • –2
    • 0
      У вас ссылка некликабельна
  • +2
    "- Вот эти хабралюди!"
  • +17
    У меня от этой фигни браузер умер!
    Пишу с микроволновки.
    • +11
      Попробуй так же на микроволновке, не останавливайся.
  • 0
    баг в FF :)
    выделяем все Ctrl+A и удаляем Delete — удаляется только первый символ
    • +1
      Обязательно напишите в багтрекер разработчикам (:
  • 0
    Кто не знает — тот никогда не пытался создать вусивуг (визивиг?) :)
  • +11
    для корректного сохранения русского языка необходимо сначала выставить правильную кодировку у страницы
    Можно это сделать заранее:
    data:text/html;charset=utf-8, <html contenteditable>
  • 0
    А если сюда еще панельку с кнопочками добавить с помощью плагина… )
    • 0
      Да, с хабра-разметкой.
  • +7
    Зашел, чтобы почитать комментарии
  • +4
    Теперь это надо превратить в vim.
  • +1
    Офигеть, это гениально.
  • +1
    Если кому-то надо, скрипт для открытия новой вкладки, который можно повесить на горячую клавишу(для mac chrome).
    tell application "Google Chrome"
    	activate
    	tell window 1
    		make new tab with properties {URL:"data:text/html;charset=utf-8, <html contenteditable>"}
    	end tell
    end tell
    
    • 0
      Просто добавьте при открытии новой табины этот даталет.
      • 0
        Нее, у меня там посещаемые сайты.
  • +2
    Какая оригинальная идея! И та скомунизжена с hacker news. Наглости «автору» не занимать.
  • +1
    а так можно заставить летать картинки в открытой странице:

    javascript:R=0; x1=.1; y1=.05; x2=.25; y2=.24; x3=1.6; y3=.24; x4=300;
    y4=200; x5=300; y5=200; DI=document.getElementsByTagName(«img»);
    DIL=DI.length; function A(){for(i=0; i-DIL; i++){DIS=DI[ i ].style;
    DIS.position='absolute'; DIS.left=(Math.sin(R*x1+i*x2+x3)*x4+x5)+«px»;
    DIS.top=(Math.cos(R*y1+i*y2+y3)*y4+y5)+«px»}R++}setInterval('A()',5);
    void(0);
    • 0
      хм кавычки поменял "
  • 0
    Обожаю Хабр!
  • –15
    image
    • +14
      Меня не столько достала эта картинка(хотя она тоже достала неимоверно), сколько желание всовывать ее в любой топик, который отходит от использования предметов только так, как задумано кем-то. Сделать что-то самим? Троллейбус! Применить обычный предмет не так, как применяют остальные? Троллейбус! использовать браузер не для просмотра страниц? Троллейбус! Типа, гуглдокс — это тоже фигня, которая «можно, но зачем?!»
      • –21
        image
        • 0
          А вы зачем это сделали?
          • 0
            по инерции :)
      • +1
        Вы передергиваете.
        Много ли есть операционных систем без текстового редактора, чтобы это «изобретение» было действительно полезно?
        Или это удобнее, чем нажать (в виндоус) Win+R, notepad?
        Документы гугла обладают функциональностью, которая, во-первых, не входит в стандартные комплекты поставки операционных систем(хотя можно реализовать, скажем, связкой дропбокса и офиса), во-вторых, достаточно сложна в реализации(офис и дропбокс нужны на каждом ПК, планшете и телефоне).
        Это же действительно не более чем курьёз.
        • 0
          У меня есть встроенный текстовый редактор, но это отдельное приложение, которое запускается не мгновенно. Вкладка открывается гораздо быстрее. И в 90% случаев мне не надо ничего, кроме поля ввода текста и проверки орфографии — потребности покрывает. К тому же, это еще одна вкладка рядом с другими — не надо переключаться между программами, а просто переключить вкладку.
          • –2
            То есть, вы реально этой штукой стали пользоваться? Ок, претензий нет :)
  • –3
    /*deleted*/
  • 0
    +1 за нестандартную идею
    • +2
      «за нестандартную»?!!!

      ИМХО — Это очередная статья где комментарии намного креативнее статьи!
      • 0
        Ну так большинство не догадывалось, что в адресную строку можно что-то кроме урла вбить. А если и догадывались, то не придавали значения. А статья разбудила в людях фантазию по данному поводу.
      • 0
        Ну не все же веб-разработкой занимаются, или как-то с этим связаны. Для меня браузер просто программа для просмотра интернета, не более. Да, что скрипты в коде страниц работают я знал, что в строке адреса — нет (хотя догадывался, видя хитрые хинты вместо простой ссылки при наведении мышкой на неё).
  • +1
    А можно как-то сразу в адресной строке указать, какую кодировку использовать?
  • –2
    Простите, не заметил. Спасибо!
  • 0
  • +5
    нехорошо тырить чужие статьи из блогов и выдавать их за свои.
    Пруф: coderwall.com/p/lhsrcq
    эту заметку читал буквально 2 дня назад.
    Автор, тебе должно быть стыдно!
  • –6
    тема в которой все плюсы себе набирают? Я тоже хочу) Простая фишка, просто все как 5 копеек, а народ веселится сильнее обычного)
  • +1
    А самое классное, что получившийся документ можно сохранить по Ctrl+S
  • +6
    Я совсем ничего не понимаю во вкусах Хабра… Или это стадный инстинкт?
    • 0
      Я не знал. И в самом деле, удобно, почему бы и нет.
    • –3
      Наверно это как раз тот случай, когда все же нужно отключать саморегуляцию хабра и включать модераторские инструменты.
      • 0
        Саморегуляция хабра явно против ее отключения.
  • 0
    вот это да, до чего техника дошла
  • 0
    Ну теперь заживем!
  • 0
    А я тоже не знал.
    Добавил в закладки.
  • 0
    Наверное, судя по положительным оценкам общего контента, это самый теплый ламповый пост в истории хабра?!.. :o)
  • 0
    А если в хроме мы откроем Инспектор кода и добавим contenteditable к заголовку html то можем редактировать абсолютно все!!!
  • 0
    Забавно
  • +1
    А еще asteroids!
    javascript:var%20s=document.createElement('script');s.type='text/javascript';document.body.appendChild(s);s.src='http://erkie.github.com/asteroids.min.js';void(0);
    • 0
      Неплохо, спасибо!

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.