Html and javascript editors

JSEditor helps you prototype and share JavaScript code, HTML and CSS. On the left side of the project, uou have three tabs where you can type the HTML markup, JavaScript code and edit stylesheets. To run the code, simply click the run button and you’ll see the results in the right panel. The console at the bottom of the screen displays javascript errors and console messages.

Including external libraries

Use the project\libraries menu option to include external JavaScript libraries. By default, we added an option to load jQuery. We recommend that you provide a link that starts with https.

Saving your work

JSEditor allows you to save your work instantly by clicking the Save button from the file menu. You don’t need to register or login. All the work is automatically shared publicly and will be visible to other people on the Internet who navigate to your project’s url. You can continue editing the original work and save newer versions by clicking the ‘Update’ button from the File menu. This will create a new copy and a new public URL. It works like a code fork.

Private projects

JSEditor allows you to create private projects. To use this mode, you must register and login. Once you are logged-in you can save your work and it will be visible only to you and people you choose to share with.

You can share private JavaScript projects with everyone or with specific people. When you decide to share with specific people, you must provide their email. They must either be registered users or register later before they can see the code. JSEditor allows you to select sharing permissions like read only, write, share, and delete access. People who have access to shared projects can browse and search them in the File/Open menu.

Источник

Обзор html, css, js редакторов под Windows

Сравнительно недавно встал вопрос замены громоздкого и дорогого Adobe Dreamweaver на что нибудь более легковесное и не столь дорогое. Возможные варианты под катом.

Для этой цели был создан вопрос в разделе Q&A, на который было получено множество ответов. Спасибо всем откликнувшимся.

Выбранные редакторы были сравнены по нескольким пунктам.

Платные редакторы

Цена: $45.85;
Готовые цветовые схемы (в т.ч. и темные): нет;
Настройка подсветки кода под себя: очень широкие возможности настройки;
Настройка позиционирования курсора, подсветка открывающих/закрывающих тегов: можно настраивать, теги подсвечиваются;
Открытие/закрытие блоков кода: нет;
Автозакрытие тегов, кавычек, скобочек: присутствует, настраивается;
Автокомплитер и его удобство: есть, очень удобный;
Поддержка html, css, js и jquery автокомплитером: html есть, css есть, js есть, jquery нет;
Поддержка html5 и css3: html5 нет, css3 есть;
Подхват зависимых файлов (css,js): нет, но если открыть css и html файлы, то автокомплитер увидит название классов и id из файла стилей;
Организация проектов: присутствует, обычная;
ftp-клиент: присутствует;
Вес дистрибутива: 5,7 мб;
Наличие portable версии: не нашел;
Замеченные плюсы: быстро открывается, быстро работает;
Замеченные минусы: нет.

Цена: $69.85.
Редактор такой же как и HTMLPad, но имеет расширенный набор функций для программистов.

Цена: $69;
Готовые цветовые схемы (в т.ч. и темные): нет;
Настройка подсветки кода под себя: очень широкие возможности настройки;
Настройка позиционирования курсора, подсветка открывающих/закрывающих тегов:теги подсвечиваются;
Открытие/закрытие блоков кода: да;
Автозакрытие тегов, кавычек, скобочек: присутствует, настраивается;
Автокомплитер и его удобство: есть, неплохой;
Поддержка html, css, js и jquery автокомплитером: html есть, css есть, js есть, jquery нет;
Поддержка html5 и css3: html5 есть, css3 есть;
Подхват зависимых файлов (css,js): нет, но если открыть css и html файлы, то автокомплитер увидит название классов и id из файла стилей;
Организация проектов: присутствует, расширенная;
ftp-клиент: присутствует;
Вес дистрибутива: 63,8 мб;
Наличие portable версии: не нашел;
Замеченные плюсы: в CSS файлах, удобная плюшка с подсветкой использованных цветов. Широкие возможности поиска элементов внутри проекта. Куча других настроек и опций;
Замеченные минусы: долго открывается, тяжеловато работает.

Цена: $79.95;
Готовые цветовые схемы (в т.ч. и темные): нет;
Настройка подсветки кода под себя: широкие возможности настройки;
Настройка позиционирования курсора, подсветка открывающих/закрывающих тегов: нет;
Открытие/закрытие блоков кода: частичная в css;
Автозакрытие тегов, кавычек, скобочек: в html и css есть, в js нет;
Автокомплитер и его удобство: есть, неудобный по CTRL+пробел;
Поддержка html, css, js и jquery автокомплитером: html есть, css есть, js нет, jquery нет;
Поддержка html5 и css3: html5 есть, css3 нет;
Подхват зависимых файлов (css,js): нет;
Организация проектов: присутствует, не очень удобная;
ftp-клиент: присутствует;
Вес дистрибутива: 5,2 мб;
Наличие portable версии: не нашел;
Замеченные плюсы: подойдет начинающим;
Замеченные минусы: ориентирован на визуальную разработку, а не на удобство работы с кодом.

Цена: $59;
Готовые цветовые схемы (в т.ч. и темные): да;
Настройка подсветки кода под себя: не нашел;
Настройка позиционирования курсора, подсветка открывающих/закрывающих тегов: нет;
Открытие/закрытие блоков кода: нет;
Автозакрытие тегов, кавычек, скобочек: в html нет, в css и js есть;
Автокомплитер и его удобство: есть, неудобный по CTRL+пробел;
Поддержка html, css, js и jquery автокомплитером: html есть, css есть, js есть, jquery нет;
Поддержка html5 и css3: html5 нет, css3 нет;
Подхват зависимых файлов (css,js): нет;
Организация проектов: присутствует, не смог сходу разобраться;
ftp-клиент: не нашел;
Вес дистрибутива: 17 мб;
Наличие portable версии: есть;
Замеченные плюсы: быстро открывается, быстро работает;
Замеченные минусы: сходу очень трудно разобраться, требуется прилично времени на освоение.

Цена: $149.95;
Даже не пытался пробовать, софт явно для любителей Visual Studio и пр. продуктов MS

Бесплатные редакторы

Готовые цветовые схемы (в т.ч. и темные): да;
Настройка подсветки кода под себя: да;
Настройка позиционирования курсора, подсветка открывающих/закрывающих тегов: да, очень удобная подсветка;
Открытие/закрытие блоков кода: есть, для выделенных фрагментов только;
Автозакрытие тегов, кавычек, скобочек: нет;
Автокомплитер и его удобство: есть, непривычный;
Поддержка html, css, js и jquery автокомплитером: html есть, css частично, js частично, jquery нет;
Поддержка html5 и css3: html5 нет, css3 нет;
Подхват зависимых файлов (css,js): нет;
Организация проектов: нет;
ftp-клиент: есть через плагин;
Вес дистрибутива: 5,2 мб;
Наличие portable версии: не нашел;
Замеченные плюсы: быстро открывается, быстро работает;
Замеченные минусы: скудный функционал.

Готовые цветовые схемы (в т.ч. и темные): да;
Настройка подсветки кода под себя: да;
Настройка позиционирования курсора, подсветка открывающих/закрывающих тегов: да, очень удобная подсветка;
Открытие/закрытие блоков кода: есть, для выделенных фрагментов только;
Автозакрытие тегов, кавычек, скобочек: нет;
Автокомплитер и его удобство: есть, почему-то в html сразу выскакивает, а в css по ctrl+пробел;
Поддержка html, css, js и jquery автокомплитером: html есть, css есть, js частично, jquery нет;
Поддержка html5 и css3: html5 есть, css3 частично;
Подхват зависимых файлов (css,js): нет;
Организация проектов: есть;
ftp-клиент: есть;
Вес дистрибутива: 130 мб;
Наличие portable версии: не нашел;
Замеченные плюсы: нет;
Замеченные минусы: нещадно тормозит.

Готовые цветовые схемы (в т.ч. и темные): да;
Настройка подсветки кода под себя: да;
Настройка позиционирования курсора, подсветка открывающих/закрывающих тегов: да;
Открытие/закрытие блоков кода: есть;
Автозакрытие тегов, кавычек, скобочек: да, частично;
Автокомплитер и его удобство: есть, с подсказками;
Поддержка html, css, js и jquery автокомплитером: html есть, css есть, js частично, jquery нет;
Поддержка html5 и css3: html5 есть, css3 есть;
Подхват зависимых файлов (css,js): нет;
Организация проектов: да;
ftp-клиент: не нашел;
Вес дистрибутива: 41,5 мб;
Наличие portable версии: не нашел;
Замеченные плюсы: похож на np++, но функционал заметно шире;
Замеченные минусы: настройки не очень интуитивны.

Готовые цветовые схемы (в т.ч. и темные): нет;
Настройка подсветки кода под себя: да;
Настройка позиционирования курсора, подсветка открывающих/закрывающих тегов: да;
Открытие/закрытие блоков кода: есть;
Автозакрытие тегов, кавычек, скобочек: да, частично;
Автокомплитер и его удобство: есть, неудобный ctrl+пробел и плохо работающий;
Поддержка html, css, js и jquery автокомплитером: html есть, css частично, js нет, jquery нет;
Поддержка html5 и css3: html5 есть, css3 нет;
Подхват зависимых файлов (css,js): нет;
Организация проектов: да;
ftp-клиент: не нашел;
Вес дистрибутива: 10 мб;
Наличие portable версии: не нашел;
Замеченные плюсы: нет;
Замеченные минусы: имхо хромает качество.

Готовые цветовые схемы (в т.ч. и темные): нет;
Настройка подсветки кода под себя: частично;
Настройка позиционирования курсора, подсветка открывающих/закрывающих тегов: нет, подсветка парных тегов есть;
Открытие/закрытие блоков кода: нет;
Автозакрытие тегов, кавычек, скобочек: да, частично;
Автокомплитер и его удобство: есть, неудобный ctrl+пробел + модальное окно с настройками;
Поддержка html, css, js и jquery автокомплитером: html есть, css есть, js нет, jquery нет;
Поддержка html5 и css3: html5 нет, css3 нет;
Подхват зависимых файлов (css,js): нет;
Организация проектов: да;
ftp-клиент: есть;
Вес дистрибутива: 4,2 мб;
Наличие portable версии: не нашел;
Замеченные плюсы: нет;
Замеченные минусы: неудобный.

Готовые цветовые схемы (в т.ч. и темные): нет;
Настройка подсветки кода под себя: не нашел;
Настройка позиционирования курсора, подсветка открывающих/закрывающих тегов: да, подсветка парных тегов есть;
Открытие/закрытие блоков кода: да;
Автозакрытие тегов, кавычек, скобочек: да, частично;
Автокомплитер и его удобство: есть, неудобный ctrl+пробел;
Поддержка html, css, js и jquery автокомплитером: html есть, css есть, js есть, jquery нет;
Поддержка html5 и css3: html5 есть, css3 нет;
Подхват зависимых файлов (css,js): нет;
Организация проектов: да;
ftp-клиент: есть;
Вес дистрибутива: 108 мб;
Наличие portable версии: работает без установки;
Замеченные плюсы: нет;
Замеченные минусы: громоздкость, требует Java.

Выводы

Как оказалось, выбор очень велик. К сожалению не могу сказать, что какая-то из программ оставила такое впечатление чтобы я сразу выкинул Dreamweaver и перешел на неё. Но тем не менее разочарованным я тоже не остался. Мой выбор — платный HTMLPad. Ни один из бесплатных редакторов не показался мне достаточно удобным (но это дело привычки для каждого, я считаю).

Источник

Html and javascript editors