Html редактор/editor (wysiwyg) для webkit 1с (cms, b2b), альтернатива tinymce и стандартному форматированныйдокумент

TinyMCE

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

Очень мощный и гибкий API, который я пару лет назад, еще начиная изучать джаваскрипт, не осилил. Много подробной документации, можно при желании скачать и установить файловый менеджер или дописать нужный плагин (хотя куда там, и так функций хоть отбавляй).

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

Как я писал выше, это никчемный интерфейс — сваленые в кучу иконки. Их, конечно, можно «почистить», убрав ненужные, но это все равно не спасает.

Очень сложное для разбора API — чтобы чувствовать себя более или менее уверенно, нужен не один час чтения документации и практики, а также знание хотя бы технического английского.

Огромный вес — больше мегабайта — сразу хочется спросить: «А нет лайт версии?».

Раньше очень пачкал код (и сейчас пачкает, но только при вставке из ворда; это проблемы обоих — Ворда, что создает лишние теги, а TinyMCE, что не вырезает их при вставке), сейчас эта проблема преодолена, но в поисках «лайт версии» с ней еще можно столкнуться.

Отсутствуют горячие клавиши (что для меня очень важно), точнее они есть, но только основные 5: Ctrl+Z — Undo; Ctrl+Y — Redo; Ctrl+B — Bold; Ctrl+I — Italic; Ctrl+U — Underline. Возможно в документации есть информация о настройке горячих клавиш, но я не искал особо

Моя субъективная оценка 4 из 5.

ДемоСкачать

Complete Features List

Side by side multi-pane editing
Minimap: see your code from 10,000 feet
Full screen mode: use all your pixels, all the time
Nothing but text mode: the text, the whole text, and nothing but the text
Syntax highlighting for many languages with C, C++, C#, CSS, D, Erlang, HTML, Groovy, Haskell, HTML, Java, JavaScript, LaTeX, Lisp, Lua, Markdown, Matlab, OCaml, Perl, PHP, Python, R, Ruby, SQL, TCL, Textile and XML supported out of the box, and more available for download
Multiple color schemes, with several included, and many more available for download
Bracket highlighting
Auto save: never lose your changes, not even if the dog thinks power cords are tasty
Fully customizable key bindings, menus and toolbar
Rich key binding language including sequenced key bindings, regular expression key matches, contextual bindings and parameterized bindings
Python plugins with a rich API
Rich selection of editing commands, including indenting / unindenting, paragraph reformatting, line joining and much more
Multiple selections: Simplify many tasks that used to require macros or regular expression
Column select
Regular expression search and replace
Incremental find as you type
Preserve case on replace
Bookmarks: Makes navigating through long files a breeze
Spell check as you type
Bracket matching
Commenting and uncommenting blocks of text
Asynchronous file loading, so you’re never blocked when loading files off slow network drives
Macros
Snippets
Auto complete
Repeat last action
Build tool integration
Automatic build on save
WinSCP integration for editing remote files via SCP and FTP

Размещение

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

А дальше останется всего ничего: нажмите кнопку «Готово к публикации» и на втором экране редактора укажите «системные» настройки. Среди них:

Тип публикации. «Статья» или «Новость». Первый вариант подходит для больших материалов — выбрав его, вы подтверждаете, что являетесь автором текста и рейтинг поста зачислится вашему профилю в полном объёме. Второй вариант подходит для небольших материалов, которые имеют признаки «новостей» (некая информация, актуальная здесь и сейчас).
Язык публикации. Укажите язык, на котором написана публикация — чтобы статью видели те пользователи сайта, которым ваша статья подойдёт по языковым настройкам.
Хабы. Выберите в выпадающем меню один или несколько (до пяти) хабов, в которые вы планируете разместить свой пост. Вместо одного из хабов можно выбрать блог компании — укажите, если он есть (тогда рейтинг за пост пойдёт в зачёт и вашей компании).
Ключевые слова. Ещё одно обязательное поле, где через запятую укажите до 10 ключевых слов по теме вашего материала. Через запятую, без #. Подберите такие слова, по которым ваш пост смог бы найти кто-то посторонний. Эти ключевые слова будут в самом конце вашей публикации.
Переводы и обучающие материалы. Если вы готовите перевод, то следует нажать чекбокс «Переведённый материал» — тогда дополнительно потребуется указать автора оригинала и ссылку на него, а в зачёт пойдёт лишь половина рейтинга. У опубликованной статьи под заголовком будет пометка «Перевод» со ссылкой на первоисточник — чтобы свести к минимуму риск претензий от автора. А если ваша статья носит обучающий характер, то нажмите чекбокс «Tutorial». Тогда после публикации под заголовком появится одноимённый значок.

Отображение публикации в ленте

В этом разделе редактора настраивается внешний вид той части, которая будет видна в лентах пользователей — на главной странице, внутри хаба и т. д. Здесь свободы действий чуть меньше, но зато вступительные части публикаций стали выглядеть в одном формате.

Желательно загрузить обложку поста (картинка в формате jpg, gif или png, рекомендуемый размер 780×440), а также ввести текст вводной части (до 2 тысяч символов).

Важно: изображение (обложка) и содержимое вводной части поста (выводимое в ленте) может отличаться от того вступления, которое будет видеть пользователь на странице самой публикации. Это даёт дополнительную свободу действий, но иногда может мешать — в таком случае используйте первые абзацы своей статьи (по умолчанию эта часть будет подгружаться автоматически)

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

Текст кнопки «Читать далее» можно оставить по умолчанию, но при необходимости его также можно поменять.

Если пост нужно выпустить в определённое время, воспользуйтесь функцией запланированной публикации — выберите желаемые дату и время.

Всё, финишная прямая с тремя вариантами: можно вернуться к редактированию поста, сохранить его в черновики или опубликовать. В первом случае вы вернётесь на первый экран редактора, во втором — пост сохранится у вас в профиле с присвоением ID, а в последнем случае он сразу окажется на сайте и его начнут читать пользователи Хабра.

Не забывайте следить за комментариями и отвечать на них в случае необходимости. Советы по работе с обратной связью мы уже давали.

Summarizing What We’ve Learned About The HTML Editor

After reading this article you might have realized that this is probably the greatest online tool which will save you a lot of time and money. Used together with the other HTML tools you can maximize your working efficiency whether you’re a casual or a professional publisher.

I would call this HTML editor tool the Swiss Army Knife of online content publishing because of the ease of use and versatility it represents. If you’re not satisfied with what this website offers you are welcome to subscribe for a membership at htmlg.com which provides even more features, such as the tag manager, the tag and attribute filters and many more.

Make sure you save this link and be welcome to share it with your friends who might find this free resource useful.

Как быть с CSS?

Редактор — это компонент, которые сам по себе (вне приложения) малопригоден.
У редактора есть свои стили (UI) – панели, кнопки, размеры и т.д.
Редактор живет внутри приложения, например, CMS.
У приложения есть свои стили.
Внутри редактора живет сам пост, который вы редактируете.
У поста тоже есть свои стили (шрифты, цвета, и т.д.) Они могут быть совсем разные. Вы можете в одном и том же редакторе верстать посты с разными фирменными стилями.

CSS-правила живут в глобальной области видимости;
Порядок применения правил определяется специфичностью;
При всем этом нам надо обеспечивать принцип WYSIWYG – то, что в редакторе, то и на сайте.

Пример WordPress CSS

редактор от CMS;
пост от редактора и CMS;
CMS от редактора и поста;
Шаблон сайта (шапка, подвал, боковая колонка, дополнительные виджеты) от стилей поста, созданного в редакторе.

3 основных способа изоляции CSS:

CSS reset + БЭМ – все заресетить и применять определенную систему именования ваших классов. В данном случае это самый распространенный БЭМ, но можно заменить любую другую методологию.
Положить все в iframe – это более «железобетонная» защита, но со своими недостатками.
Все спрятать в Shadow DOM и Custom Elements, но очевидный недостаток этого способа в плохой браузерной поддержке.

CSS reset + БЭМ

WordPress CSS

CSS редактора

инлайн-стилей и !important

Как редактировать контент?

DesignMode

onContenteditabletrue

Document.execCommandJS

HTML

Why ContentEditable is Terrible

Альтернативные способы

canvascontenteditable-области и хранения состояния документаОбщая схема:

contenteditable используется как интерфейс для отслеживания событий;
все события перехватываются и происходит изменение document state (кроме тех событий, которые происходят очень часто и отрицательно влияют на производительность, например, передвижение каретки курсора — их можно отслеживать отдельно и использовать debounce или throttle);
после изменения state подключается React и обновляет DOM-представление документа;
controlled input.

Контент (текст, картинки, эмбеды, разделители). Структура может быть вложенной — например, наша верстка построена во многом на использовании многоколоночных сеток любой глубины вложенности.
Позиция курсора. Полезно запоминать, куда ставится курсор, чтобы потом его можно было возвращать на место, сохранять, сериализовать и т.д.
Выделение текста. Мы поговорим об этом чуть подробнее ниже.
UI редактора – например, какая панель сейчас открыта, что активно, что не активно, в каком режиме вы находитесь и т.д.

Draft.jsGoogle Docs со своим движком kix.contenteditable=«true»

Лучшие бесплатные WYSIWYG редакторы

1. WYSIWYG Web Builder

Пожалуй, самый лучший WYSIWYG редактор, который действительно у всех «на слуху». Является идеальным вариантом для тех, кто до этого момента еще не имел дело с web-дизайном, так как по умолчанию программа снабжена небольшим набором шаблонов (порядка десяти) самой различной направленности. Если этого пользователю покажется недостаточно, то с официальной странички разработчика можно бесплатно скачать еще несколько десятков шаблонов. Создаваемые при помощи редактора web-страницы отображаются в виде отдельных блоков (флеш-ролики, текстовая информация, графика и т.д.). Процесс верстки страницы заключается в выборе подходящих по усмотрению пользователя блоков и размещении их в нужных местах, при этом программа будет автоматически генерировать соответствующий действиям пользователя код.

2. Quillr

Данный WYSIWYG редактор пользуется не меньшей популярностью, так как имеет в своем арсенале богатейший набор возможностей для пользователя. Quill или «Перо» — это продукт известной компании Salesforce.com, разработчики которой поставили перед собой цель разрушить стереотипы классического восприятия WYSIWYG. Гибкий, многофункциональный и очень удобный для работы.

3. CK Editorr

Многофункциональный wysiwyg редактор для сайта, который совместим практически со всеми популярными браузерами. Благодаря простому оформлению в формате MS Word, программа очень удобна и интуитивно понятна. Используется редактор для форматирования текстов, ссылок, графических изображений, списков и т.д.

4. Popliner

Очень удобный визуальный редактор, распространяющийся бесплатно. Чтобы начать работать с программой, пользователю необходимо выделить текст, после чего появляется плавающая панель с инструментами форматирования. Особенность редактора в том, что плавающая панель при каждом выделении текста будет отличаться по содержанию параметров, так как в каждом отдельном случае эти параметры подбираются автоматически под особенности самого текста.

5. TinyMCE

Один из самых мощных WYSIWYG редакторов, который предлагает пользователю огромный набор инструментов для редактирования. Единственный недостаток, который замечают все пользователи уже после пятиминутного тестирования программы – это неудобный дизайн, который представлен в виде сваленных в кучу иконок. Но даже это затмевается на фоне многочисленных преимуществ, таких как многофункциональность, простота в установке и множество вариаций настроек.

6. WYMeditor

Как и большинство других, данный бесплатный визуальный редактор имеет обширный базовый набор функций, позволяющий оформлять текст по своему усмотрению (вставлять ссылки, изображения, менять стилистику и формат, т.д.). Поддерживает все основные браузеры и XHTML, также имеет API, множество дополнений и плагинов.

7. Xinha

Отличный WYSIWYG редактор с открытым исходным кодом для тех пользователей, которые хотят иметь возможность настраивать программу под собственные нужды. Поддерживает все популярные браузеры и имеет мощный базовый набор функций для редактирования.

8. elRTE

Как отмечают довольные пользователи этого визуального редактора, elRTE является чуть ли не самым качественным инструментом для веб-дизайна, который что внутри, что внешне сделан, как говорится, на совесть. В нем заложен широчайший функционал, благодаря которому абсолютно любая идея по форматированию страницы может быть осуществлена.

9. Spaw

Для «стандартных» потребностей этот WYSIWYG-редактор подойдет наилучшим образом. Он поддерживает браузеры «среднего звена», содержит в себе стандартный набор функций и настроек – одним словом, не хуже других визуальных редакторов, которые подойдут рядовому пользователю.

10. YUI Rich Text Editor

Последний в списке, но далеко не последний по мощности и популярности визуальный редактор. Разработанный американской компанией Yahoo, YUI Rich Text Editor имеет широкий функционал, поддерживаемый практически всеми известными браузерами.

Templates & Website Builder

HTML Templates

Free downloadable templates that you can use to start your website from.

Responsive templates that automatically adjust their layout according to the screen size.

Includes corporate, gallery, and portal style templates.

Also fully customizable. Once you’ve downloaded a template, you’re free to do whatever you want with it.

Go to HTML Templates
While online editors can provide a quick and convenient way to generate HTML code, they do have their limitations.

If you need to do some serious web development work, you’ll probably need an offline editor — one that you can download and use on your own desktop or laptop.

For a desktop HTML editor, try any of the following:
- Brackets
- SeaMonkey
- CoffeeCup
- HTML-Kit

About the HTML Editor on this Page

The above online HTML editor is known as «CKEditor», which can be downloaded from the CKEditor website. It is distributed under the GPL, LGPL, and MPL open source licences.

Online Editors
Full Editor

Связанные сокращения [ править ]

Этот раздел требует дополнительных ссылок для проверки . Пожалуйста, помогите улучшить эту статью , добавив цитаты из надежных источников . Материал, не полученный от источника, может быть оспорен и удален. ( Декабрь 2020 г. ) ( Узнайте, как и когда удалить этот шаблон сообщения )

Многие вариации используются только для того, чтобы проиллюстрировать точку зрения или пошутить, и имеют очень ограниченное реальное применение. Некоторые из предложенных включают следующее:

WISIWIT, то , что я вижу, это то , что я печатаю, также используется для описания систем редактирования, ориентированных на текст, в противоположном смысле WYSIWYG.
WYCIWYG , то , что вы кешируете , — это то, что вы получаете .
WYGIWYG; то, что вы получаете, это то, что вы получаете , часто используется аналогично WYSIAYG, WYSIMOLWYG или WYSINWYW.
WYGIWYS, вы получаете то, что вы видите , используется в вычислениях для описания парадигмы взаимодействия в ориентированном на результат пользовательском интерфейсе. Этот термин был использован Якобом Нильсеном для описания интерфейса Microsoft Office 2007 «Лента»
WYSIAWYG; то, что вы видите, — это почти то, что вы получаете , похоже на WYSIMOLWYG.
WYSIAYG, то , что вы видите, — это все, что вы получаете , чтобы указать, что опытные пользователи иногда ограничены пользовательским интерфейсом.
WYSIMOLWYG, то , что вы видите, примерно соответствует тому, что вы получаете , понимая, что большинство реализаций WYSIWYG несовершенны.
WYSINWYW, то , что вы видите, не то, что вы хотите , предполагая, что Microsoft Word часто контролирует пользователя, а не наоборот
WYSIPWYG, то , что вы видите, вероятно, то, что вы получаете , относится к редакторам html и разметки, где теги кода и макросов как бы показывают, каким в конечном итоге будет результат. Этот тип представления WYSIWYG трудно визуализировать во время редактирования, поэтому пользователь может только догадываться о результате.
WYSIWYD, то , что вы видите, это то, что вы заслуживаете, относится к способности пользователя и его усилиям создать что-то стоящее.
WYSIWYM , то , что вы видите, — это то, что вы имеете в виду , говоря, что пользователь видит то, что лучше всего передает сообщение и его структуру, а не его фактическое форматирование.
WYGIWYM, вы получаете то, что вы имеете в виду , говоря, что пользователь получает (визуально, на слух или любым другим способом) то, что лучше всего передает сообщение.
WYSIWYN, вы видите то, что вам нужно, относится к Программному обеспечению, которое не состоит из взаимосвязанных модулей, но работает с таким подробным управлением пользователями и правами, что пользователи могут видеть только то, что им действительно нужно.
WYSIWYS , вы видите то, что вы подписываете , что является важным требованием для программного обеспечения для цифровой подписи. Это означает, что программное обеспечение должно иметь возможность показывать пользователю контент без какого-либо скрытого контента до того, как пользователь его подпишет.
WYSIWYW, то , что вы видите, это то, что вы хотите , используется для описания платформы редактирования GNU TeXmacs . Аббревиатура поясняет, что в отличие от редакторов WYSIWYG, пользователь может настраивать платформы WYSIWYW, чтобы они действовали (возможно, частично) как программы ручного набора, такие как TeX или troff .
WYSYHYG, то , что вы видите, вы надеетесь получить ( / ˈwɪzihɪɡ / ), термин, высмеивающий программное обеспечение для обработки текста в текстовом режиме ; использованный в коллекции видео Microsoft Windows, видео, распространенное примерно в 1991 году на двух кассетах VHS на рекламных мероприятиях.
YAFIYGI, вы просили об этом, вы получили это , используется для описания системы редактирования документов, ориентированной на текстовые команды, которая не включает WYSIWYG, со ссылкой на тот факт, что пользователи таких систем часто просят то, чего они на самом деле не хотят. Это считается противоположностью WYSIWYG. Фраза была впервые использована в этом контексте в 1983 году в эссе « Настоящие программисты не используют Паскаль» для описания системы текстового редактора TECO , и ее начали сокращать примерно в 1993 году.

Разработка Rich Text Editor: проблемы и решения +51

05.03.18 10:26

•
olegbunin
•
#350252
•
Хабрахабр

•

8600

Программирование, JavaScript, CSS, Клиентская оптимизация, Блог компании Конференции Олега Бунина (Онтико)

Текстовые редакторы, как тип программного обеспечения, появились чуть позже чем динозавры, и вероятнее всего это был вообще первый софт, с которым вы столкнулись в своей жизни, возможно кто-то даже застал MS-DOS Editor.
Однако с переходом большой части ПО в браузеры актуальны и соответствующие визуальные редакторы Rich Text Editors, и проблемных мест в их разработке масса. Если вы по какой-то причине решили сделать свой собственный редактор, то подумайте еще раз — есть мнение, что делать этого не нужно.
Чтобы вы могли принять более взвешенное решение, Егор Яковишен обобщил весь свой опыт, полученный в процессе создания Setka Editor, и рассказал про проблемы, с которыми придется столкнуться, и что можно предпринять для их решения.Disclaimer: статья написана на основании доклада Егора на конференции Frontend Conf 2017 в июне 2017 года. Ситуация с поддержкой браузерами определенных API с тех пор уже могла измениться.

4 Code Editors for Tablets, SmartPhones, and Any Computing Device

Tablet computers and smartphones are indeed portable but what else can you use them for aside from browsing Reddit and tagging photos of cute cats on Facebook and flinging wild birds onto measley-built fortresses? Don’t want to bring your heavy laptop? Code using your smartphone or tablet using Online IDEs!

NOTE: Take note that for server-side programming languages you will need to have an internet connection for them to work. To make it formal, these are called Online IDEs. The usual local machine setup you have for your programming needs is an IDE, Integrated Development Environment. Now, Online IDEs make use of the cloud to remove the barriers of coding, since it has been limited to just your machine for a couple of decades now. Now you can develop anywhere, using any machine, with colleagues. No need to setup Apache, Ruby, Python, C, C#, and others.

Advantages of Using Online IDEs

Online IDEs have been around for quite some time now but they’ve garnered little attention. I know that a lot of web developers would simply work on their laptops or desktops, since they’re more powerful machines. But what about those who are always on the go, web developers who don’t want to carry heavy loads? Well, what do you know, with your smartphone or tablet computer, you can code just about anywhere, as long as there’s an internet connection.

If you are working with people scattered around the map, brainstorming and asking for help is quite pesky. With Online IDEs you can collaborate with people in real-time. Imagine Google Docs, only it’s for coding. Yep, let’s put it this way: it’s the Google Docs for coding.

So, again:

accessible through smartphones and tablet computers
online collaboration in real-time
no need to setup your machine
accessible through a browser

Disadvantages of Using Online IDEs

Well, this one is pretty obvious. You can’t use Online IDEs without an internet connection!

Значение [ править ]

Этот раздел требует дополнительных ссылок для проверки . Пожалуйста, помогите , добавив цитаты из надежных источников . Материал, не полученный от источника, может быть оспорен и удален. ( Май 2010 г. ) ( Узнайте, как и когда удалить этот шаблон сообщения )

Программа слева использует редактор WYSIWYG для создания документа Lorem Ipsum . Программа справа содержит код LaTeX , который при компиляции создает документ, очень похожий на документ слева. Компиляция кода форматирования — это не WYSIWYG-процесс.

WYSIWYG подразумевает пользовательский интерфейс, который позволяет пользователю просматривать что-то очень похожее на конечный результат — во время создания документа. В общем, WYSIWYG подразумевает возможность напрямую управлять макетом документа без необходимости вводить или запоминать имена команд макета. Фактическое значение зависит от точки зрения пользователя, например:

В программах презентаций , составных документах и веб-страницах WYSIWYG означает, что дисплей точно представляет внешний вид страницы, отображаемой для конечного пользователя, но не обязательно отражает, как страница будет напечатана, если только принтер специально не согласован с программой редактирования. , как это было с Xerox Star и ранними версиями Apple Macintosh .
В текстовых редакторах и настольных издательских приложениях WYSIWYG означает, что дисплей имитирует внешний вид и представляет эффект шрифтов и разрывов строк на окончательной разбивке на страницы с использованием определенной конфигурации принтера , так что, например, ссылка на страницу 1 из 500- Страница документа может точно ссылаться на ссылку на триста страниц позже.
WYSIWYG также описывает способы манипулирования трехмерными моделями в стереохимии , автоматизированном проектировании и трехмерной компьютерной графике .

Современное программное обеспечение отлично справляется с оптимизацией экрана для определенного типа вывода. Например, текстовый процессор оптимизирован для вывода на обычный принтер. Программное обеспечение часто имитирует разрешение принтера, чтобы максимально приблизиться к WYSIWYG. Однако не это главная привлекательность WYSIWYG, а именно способность пользователя визуализировать то, что они производят.

Во многих ситуациях тонкие различия между тем, что видит пользователь, и тем, что получает пользователь, не важны. Фактически, приложения могут предлагать несколько режимов WYSIWYG с разным уровнем «реализма», включая

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

WYSIWYG html онлайн редактор

Наш html редактор обладает свойством WYSIWYG, слово является аббревиатурой от англ. What You See Is What You Get, дословно переводится «что видишь, то и получишь». Это свойство позволяет в процессе редактирования отображать содержание материала максимально приближенное к тому, что Вы получите на своём сайте при вставке полученного из «источника» (кнопка ) фрагмента html кода.

Однако следует помнить, что на Вашем сайте имеются стили оформления различных элементов текста (заголовки, списки, абзацы, изображения). Как правило эти стили хранятся в файле style.css. Без подключения этого файла, т.е без размещения полученного html кода на своём сайте нельзя быть на 100% уверенным в достоверности видимого результата. Это утверждение справедливо ко всем визуальным редакторам кода.

Features

Sublime Text – Multiple selections

Multiple Selection

Although it’s a simple functionality, one thing that surprised me was the multiple selection option, which does precisely that. It offers you the possibility of selecting multiple lines simultaneously and honestly I’ve never seen an editor with such an ability. This is something that helped me choose Sublime as my number one editor because I believe the small details design the big picture.

Auto-complete/Snippets

While expecting nothing less, Sublime brings you the auto-complete feature. However if you’re expecting the fantastic Dreamweaver-like auto-complete you can stop right there. Yes, it supports snippets so write html and press TAB and the entire HTML head element appears. However, the auto-complete option itself is achieved by pressing ctrl+space which gives you a list of possible words based on the ones you have already written and this is where I feel it needs a bit more work because it does not give you a list of hints. This means you need to know how to code, so if you’re expecting a big help while writing your HTML you will find a hard time doing it.

Python/Community

Not satisfied because that option you really wanted is not there or isn’t as great as you imagined? Don’t worry because you may have a way to make it look good. With Python plugins you can add as many features as you want to Sublime and if you’re not comfortable with Python you have a great and big community in their forum to help you out.

Customization

Every toolbar, mouse scroll speed, keyboard shortcut, etc can be customized at will so feel free to make yourself comfortable!

Обзор WYSIWYG-решений:

Интерфейс устраивает полностью, хотя есть баги
Стоимость лицензии $800
Работает как плагин для jQuery
Размер 173 + 5 (css) + 25.4 (css) + 88 (jQuery) = 290.5kb

Свободная лицензия
Размер: 63 (css) + 202 (js) = 263
Тормозит перенос строк (или мне так кажется)
Отсутствует загрузка файлов отличных от изображений
По функциональности и интерфейсу напоминает Froala!

Свободная лицензия
Отсутствует интерфейс перемещения файлов
Неудобный интерфейс создания таблиц
Есть подсветка блока при наведении
Нельзя задать цвет

Свободная лицензия
Работает как плагин для jQuery
Отсутствует интерфейс перемещения файлов
Неудобное редактирование таблиц
Очень напоминает froala

$500 в месяц!
Облачное решение
Переопределено контекстное меню (вставка текста только с помощью клавиатуры)

Стоимость лицензии и от $1 за пользователя

Стоимость лицензии $1000+
Неудобный интерфейс для работы с таблицами, ссылками и изображениями
Размер: 200 (js) + 280 (css) = 480

Свободная лицензия
Хороша работа с таблицами
Отсутствует интерфейс загрузки и перемещения файлов

Стоимость лицензии $200
Убогое добавление таблиц
Можно копировать изображения!
Для форматирование текста используются дополнительные плагины

Стоимость лицензии $2899
Жуткий интерфейс

Свободная лицензия
Отсутствует интерфейс перемещения файлов
Есть API
Странный он, но в целом почти все есть

Для WordPress

Для WordPress
Редкостный хлам

Свободная лицензия
Используется React
Нельзя сделать перевод строки в таблицах
Нельзя копировать изображения
Отсутствует интерфейс загрузки и перемещения файлов
Есть API

Свободная лицензия
Нет таблиц
Ограниченная фунциональность
Нет API
Жуткий интерфейс

Свободная лицензия
Долго загружается
Убогий интерфейс
Отсутствует интерфейс загрузки и перемещения файлов
Нет таблиц

Свободная лицензия
Отсутствует интерфейс загрузки и перемещения файлов
Нет таблиц

Свободная лицензия
Работает как плагин для jQuery
Отсутствует интерфейс загрузки и перемещения файлов

Свободная лицензия
Отсутствует интерфейс загрузки и перемещения файлов
Нет таблиц
Нет API

https://github.com/jakiestfu/Medium.js

Свободная лицензия
Отсутствует интерфейс загрузки и перемещения файлов
Нет таблиц
Нет API

Свободная лицензия
Отсутствует интерфейс загрузки и перемещения файлов
Нет таблиц
Нет API

Свободная лицензия
Отсутствует интерфейс загрузки (кроме изображений) и перемещения файлов
Нет таблиц
Размер: 200 (js) + 280 (css) = 480

Свободная лицензия
Отсутствует интерфейс загрузки и перемещения файлов
Нет таблиц
Ограниченная функциональность

https://github.com/yabwe/words

Свободная лицензия
Ограниченная функциональность

Свободная лицензия
Жуткий интерфейс

Свободная лицензия
Жуткий интерфейс

Свободная лицензия
Используется React
Нет таблиц
Отсутствует интерфейс загрузки и перемещения файлов
Это все-таки феймворк, а не готовый модуль

Свободная лицензия
Markdown-редактор

Свободная лицензия
Какая-то убогая альтернатива Офису

Работает как плагин для jQuery
Убогий интерфейс

Убогий интерфейс

https://github.com/steveathon/bootstrap-wysiwyg

Работает как плагин для jQuery
Использует Boostrap
Ограниченная функциональность

Свободная лицензия
Убогий интерфейс

Свободная лицензия
Работает как плагин для jQuery
Убогий интерфейс

https://github.com/jfuentesa/rataeditor

Свободная лицензия
Работает как плагин для jQuery
Убогий интерфейс
Отсутствует API

Свободная лицензия
Отсутствует интерфейс загрузки и перемещения файлов
Ограниченная функциональность
Нет таблиц
Нет колорпикера
Есть API
Небольшой размер 35KB

https://github.com/michelson/Dante

Свободная лицензия
Клон Medium’a

Свободная лицензия
Ограниченная функциональность

Свободная лицензия
Отсутствует интерфейс

https://github.com/alohaeditor/Aloha-Editor

Свободная лицензия
Заброшен

Свободная лицензия
Ограниченная функциональность

Свободная лицензия
Используется React
Ограниченная функциональность
Отсутствуют таблицы и пр.

Свободная лицензия
Отсутствует интерфейс

Свободная лицензия
Убогий интерфейс

https://github.com/jessegreathouse/TinyEditor/

Свободная лицензия
Заброшен
Убогий интерфейс

Свободная лицензия
Убогий интерфейс
Ограниченная функциональность