[tinymce] — редактор html wysiwyg кода

Содержание:

Введение
- 1.1. Почему понадобился WYSIWYG
- 1.2. Описание задачи, которая стояла перед разработчиками
И это всё? Почему так мало функций?
Форматирование текста
WYSIWYG Web Builder 14
Interface
WYSIWYG-alike
Обзор WYSIWYG-решений:
Use with your existing framework
? Pull Request Steps
- Setup
- Develop
  - Run karma
HTML Editor Features
Групповая проверка доработок
API
Инициализация WYSIWYG-редактора
Лучшие бесплатные WYSIWYG редакторы
Имея в виду
Standalone
HTML Editor Conclusion

Введение

1.1. Почему понадобился WYSIWYG

Sports.ruUGCTinyMCEРис. 1. Интерфейс старого редактора на основе TinyMCE

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

в TinyMCE нельзя загружать картинки напрямую из файла, можно только прикреплять ссылки на изображения, а из-за того, что пользователи не имели возможности загружать картинки в наше хранилище, то если ссылки на них умирали, мы ничего не могли с этим сделать;
возможности для редактирования и форматирования текста не сбалансированы. С одной стороны, не хватало каких-то стилей, например, для внутренних заголовков в тексте. С другой – использовать имеющиеся инструменты можно было в каких угодно сочетаниях. В результате посты выглядели неединообразно (в Sports.ru началась работа по внедрению дизайн-системы и пользовательские посты должны выглядеть в соответствии с ней);
контент создается и хранится в HTML, поэтому сложно управлять стилями в постах на разных клиентах, да и просто вносить изменения в верстку постов.

1.2. Описание задачи, которая стояла перед разработчиками

MediumGoogle Doc

сама концепция WYSIWYG, т.е. what you see is what you get (англ. «что видишь, то и получишь», подробнее можно посмотреть в Википедии), когда пользователи в процессе создания поста буквально видят его точно таким, каким он будет после публикации. И не только самого поста, а также его превью в ленте;
вставка эмбедов (эмбедом мы называем мультимедийный элемент или виджет, не зависимый от остального контента на странице, с которым можно взаимодействовать так же, как на ресурсе, где он был создан; например, эмбед поста в инстаграме позволяет пролистать карусель фотографий или поставить лайк) постов из соцсетей и видеохостингов.

TribunaBetting Insider

JSON-схему

И это всё? Почему так мало функций?

9 лучших wysiwyg html редакторов 2016 года

Код HTML весьма богат на функционал, и в него можно добавить практически всё. Вот только встаёт вопрос, действительно ли это нужно?

Например такие вещи как формы (тег form), текстовое поле, чекбокс, радиокнопка (тег input) и прочее могут быть на сайте если только они адекватно взаимодействуют с «движком» сайта. То есть выполнять предназначенную для них функцию: оставить комментарий, голосовать и пр. А для этого необходимы навыки программирования. В противном случае данный функционал будет только вводить пользователей в заблуждение, и вызывать раздражение при пользовании Вашим сайтом.

Если, помимо вышеописанного, Вы хотите украсить свой текст такими элементами оформления как:

различные шрифты,
разноцветные строчки,
крупные буквы,
выравнивание текста не по умолчанию,
направление текста с права на лево,
смайлики,
и прочими дизайнерскими прелестями.

То такой текст превратит Вас сайт в новогоднюю ёлку которая вызовет восторг только у Ваших родных и близких. Многие популярные сайты не используют всё богатые возможности HTML в области форматирования материала.

Имеющиеся в нашем сервисе возможности помогут Вам оформить Вашу статью так, что бы вызвать доверие как её читателей, так и у поисковых систем. Если же Вам очень хочется выделить определенный участок текста другим стилем, то лучше это сделать с помощью файла style.css.

Форматирование текста

Бесплатный онлайн html редактор, очиститель и конвертер

Форматирование выделенного текста происходит с помощью функции editor_FormatText, она использует функцию javascript execCommand, которая позволяет выделять текст курсивом, подчёркиванием, жирным, выравнивать его по краям и по центру, и т.п. Операция, которая выполняется над текстом, подается в виде параметра.

function editor_FormatText(command, option) { editor_close_submenu(); f = document.getElementById(‘editor_frame’); f.contentWindow.document.execCommand(command, false, option);}

Параметр command может принимать значения:

Copy — копировать текст;
Cut — вырезать текст;
Paste — вставить текст;
Bold — выделить жирным;
Italic — выделить курсивом;
Underline — выделить подчёркиванием;
removeformat — очистить форматирование текста;
Undo — отменить последнюю операцию;
Redo — повторить отменённую операцию;
JustifyLeft — выровнять абзац по левому краю;
JustifyCenter — выровнять абзац по центру страницы;
JustifyRight — выровнять абзац по правому краю;
JustifyFull — выровнять абзац по краям;
InsertUnorderedList — вставить маркированный список;
InsertOrderedList — вставить нумерованный список;
Indent — увеличить отступ;
Outdent — уменьшить отступ;
UnLink — удалить ссылку;
forecolor — выделить цветом (код цвета задаётся вторым параметром);
formatBlock — применить стиль к абзацу (<p>, <H1>, <H2> и т.д.).

Для вставки гиперссылки используется функция editor_createlink().

function editor_createlink() { if (document.getSelection) { editor_FormatText(‘CreateLink’, prompt(‘Адрес’,’http://’)); } else { editor_FormatText(‘CreateLink’); }}

Здесь так же используется функция editor_FormatText, но в отличие от всех других операций здесь требуется адрес ссылки. В браузере Internet Explorer диалоговое окно для запроса адреса ссылки открывается само, поэтому достаточно просто вызвать editor_FormatText(‘CreateLink’). В других браузерах из семейства Gecko (это FireFoxe, Opera и т.п.) приходится запрашивать адрес дополнительно, через функцию prompt().

Основное различие между этими браузерами (по крайней мере для WYSIWYG-редакторов) заключается в методе работы с выделениями. В IE используется document.selection(), а в других браузерах — document.getSelection(), поэтому различать разные браузеры можно по наличию этих функций. Далее при работе с выделенными областями текста я буду поступать так же.

WYSIWYG Web Builder 14

5 редакторов кода для javascript

WYSIWYG Web Builder использует структурированные данные и настраиваемые меню, чтобы обеспечить лучший просмотр для посетителей ваших веб-страниц. Он включает в себя инструменты для входа в систему и аватары, гибкую сетку, основанную на макете CSS Grid и Google Fonts Manager.

Если вы хотите, чтобы ваш сайт делал что-то в частности, есть хорошая вероятность, что WYSIWYG Web Builder 14 имеет расширение, которое может его обработать. Сотни расширений включают в себя навигацию, слайд-шоу, аудио и видео, веб-магазины и средства просмотра данных.

WYSIWYG Web Builder 14 можно загрузить для Windows 10, 8, 7 и Vista.

Interface

Sublime Text interface

Themes

The first impression that will pop into your mind is how amazingly beautiful the Sublime interface is. I was especially impressed while using Windows because usually editors are only visually appealing under Mac OS. However, I would say Sublime Text is unique in this regard. Changing themes takes two clicks (for real) and by default you get 22 to choose from. You can download even more themes if you like.

Minimap

Although the interface itself is extremely beautiful, usability and functionality is even more impressive. Imagine something you would like to see in an editor and you will probably find it in Sublime Text. Let’s start with the basics and that would point us to the default layout. Sublime Text comes with a minimap which is available at the top right corner showing you every line of code you may have. However with the minimap, my favourite part is that it made me stop using the scroll bar to scroll down the page because you will be able to do it much easier using the minimap. And if you don’t like you can simply hide it.

Panels/Groups/Screen Modes

Talking about the good stuff, one of my favourite features is that Sublime offers you the possibility to display as many files as you want through one-to-four panels. So basically, you can see four files at the same time. If you have more than one file open, Sublime will automatically create groups and you can send a file to a group or select a group using the option focus. On the other hand, if you have a peaceful and calm personality and you like to keep things quiet you can use the Full Screen Mode (F11) or Distraction Free Mode (Shift+F11) which will hide all tabs, forcing you to focus on just your code/text.

Sidebar

Finishing the important aspects of Sublime interface, one last and also common feature is the sidebar. Sublime has it all and if you don’t like tabs you can use the sidebar or vice-versa. You can also change everything from its original position.

WYSIWYG-alike

WYSIWYG-alike editors

EmojiOne Area — WYSIWYG-like EmojiOne Converter / Picker Plugin for jQuery.
GrapesJS — An open-source, multi-purpose, Web Builder Framework.
last-draft — A Draft.js editor using draft-js-plugins.
Ory editor — Next-gen, highly customizable content editor for the browser — based on React and Redux. WYSIWYG on steroids.
prosemirror — The ProseMirror WYSIWYM editor.
Sir Trevor — Rich content editing entirely re-imagined for the web.
woofmark — A modular, progressive, and beautiful Markdown and HTML editor.
ngx-wall — Extensible component based editor with fancy drag-and-drop experience.

Обзор 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/

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

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

Use with your existing framework

Angular JS: https://github.com/froala/angular-froala
Angular 2: https://github.com/froala/angular2-froala-wysiwyg
Aurelia: https://github.com/froala/aurelia-froala-editor
CakePHP: https://github.com/froala/wysiwyg-cake
Craft 2 CMS: https://github.com/froala/Craft-Froala-WYSIWYG
Craft 3 CMS: https://github.com/froala/Craft-3-Froala-WYSIWYG
Django: https://github.com/froala/django-froala-editor
Ember: https://github.com/froala/ember-froala-editor
Knockout: https://github.com/froala/knockout-froala
Meteor: https://github.com/froala/meteor-froala
Ruby on Rails: https://github.com/froala/wysiwyg-rails
React JS: https://github.com/froala/react-froala-wysiwyg/
Reactive: https://github.com/froala/froala-reactive
Symfony: https://github.com/froala/KMSFroalaEditorBundle
Vue JS: https://github.com/froala/vue-froala-wysiwyg/
Yii2: https://github.com/froala/yii2-froala-editor
WordPress: https://github.com/froala/wordpress-froala-wysiwyg

? Pull Request Steps

TOAST UI products are open source, so you can create a pull request(PR) after you fix issues. Run npm scripts and develop yourself with the following process.

Setup

Fork branch into your personal repository. Clone it to local computer. Install node modules. Before starting development, you should check to see if there are any errors.

$ git clone https://github.com/{your-personal-repo}/tui.editor.git
$ cd 
$ npm install
$ npm run setup:libs
$ cd /apps/editor
$ npm install
$ npm run test

Develop

You can see your code is reflected as soon as you saving the codes by running a server. Don’t miss adding test cases and then make green rights.

Run karma

$ npm run test

For more information, please refer to the Contributing section.

HTML Editor Features

As discussed so far it’s the most stable WYSIWYG-HTML editor that is available with robust cross-browser capabilities, making it the best HTML Editor. This simple content creator and editor outputs reliable HTML markups that you can use in the websites or in your web projects.

The text formatting options that are available with the HTML Editor to make your text look the same way you want includes:

Bold — for flashy showing to your audience
Italic — where your characters can slide to the right for emphasis purposes
Underline — to indicate important areas in your content
Strikethrough — to delete as appropriate or to emphasize transition
Superscript — for addressing purposes or for superiority of the content
Subscript — for addressing purposes as well or to emphasize inferiority of the content.

All the HTML Headers will also come with the formatting features that will allow you to change the size of the text and the headings. With your free HTML editor you are able access all these heading types highlighted below:

Heading 1 (h1)
Heading 2 (h2)
Heading 3 (h3)
Heading 4 (h4)
Heading 5 (h5)
Heading 6 (h6)

You can also create and edit your HTML tables using the following features from your HTML editor: the number of cells, the number of rows, the number of columns and the content for each cell.

Images is also another feature of you editor. The online HTML editor will allow you to add your images into the HTML window quickly. This can be used on the web in creating your web pages with images as webpages without images may really look dull and very boring.

You can also create lists using the WYSIWYG list editing feature. List options can include features such as bullet lists or even numbered lists. Most HTML online editors do not usually have the listing options for outputting a clean HTML.

Rich color editing is another important feature of the HTML editor free and it gives you option to give some thought to a certain color. You can also change your text or the background color as much as you wish by simply selecting from the color palette.

You also do not need to worry about errors that may be created as you type in your text editor. The undo and redo features will come in well and just like your Word document, you can feel at ease during typing. This therefore means you can relax as you use your HTML Editor free as error correction is possible.

You may also be in need of adding some media in your HTML without worrying about the media formats that needs to be used in the HTML5 editor. The links button will help you add these in the best way possible.

You may also be in need of the advanced alignment options for your content such as left alignment, right alignment or justified. You need not to worry anymore since the editor helps you align your entire content either to the left, to the center, to the right or just to justify it. Whatever option you choose will be so in your HTML editor.

Групповая проверка доработок

Обработка для массовой проверки доработок конфигурации: Открытие форм, Печать, Формирование отчетов, Проведение документов, Запись справочников, ПВХ, ПВР.
Выдает список обнаруженных ошибок.
Рекомендуется применять для тестирования обновленной конфигурации, перед установкой пользователям.
В коде используются универсальные методы поэтому подходит для большинства конфигураций, построенных на базе библиотеки стандартных подсистем.
Проверялась на Зарплата и управление персоналом КОРП 3.1.8.216, Управление торговлей 11, 1С:ERP Управление предприятием 2.4.7.141, Бухгалтерия предприятия КОРП 3.0.68.66.

2 стартмани

API

Render the editor. This method must be called to render the editor.
Render the editor with HTML as parameter.
Render the editor with the state as parameter
returns the content in the editor as
returns the content as serialized form of EditorState
returns the provided parameter as serialized.
returns the editor content in HTML format.
Update the text style for
the currently active block. Possible values are .
Override the existing text sizes. There are getter methods as well to retrieve the existing text sizes for each.
Sets the FontFace for the editor.
Sets the linespace for the editor.
Sets the global text color of the editor (default is #000000).
Changes the text color of the focused text.
Opens up the image picker. Once the user has selected the image, it’s automatically inserted to the editor. But you must configure a remote URL ,where you want the image to be uploaded. If the Remote URL is not specifed, the image is not persisted.
Insert a bitmap image into the editor.
Override the default layout for images in the editor.
Insert an Ordered or Unordered List.
Override the default layout for list items.
Insert macro(custom component).
Insert a line divider
Override the default layout for dividers

If you are using image uploads, use the below to add the uploaded image to editor:

Инициализация WYSIWYG-редактора

В коде страницы редактора располагается фрейм:

Как видно, в нём будет отображаться страница canvas.html. Если открыть её исходный код, то будет видно, что в ней используется файл стилей canvas.css:

Эти стили идентичны стилям сайта, поэтому текст на странице canvas.html выглядит как на сайте. Так же будет и при редактировании, собственно за счёт этого и достигается эффект WYSIWYG.

Когда фрейм загружается, у него срабатывает событие onLoad и выполняется функция editor_loaded(). Она переводит фрейм в режим редактирования и вставляет в редактор текст, который надо отредактировать.

function editor_loaded() { f = document.getElementById(‘editor_frame’); f.contentWindow.document.designMode = ‘on’; if (f.contentWindow.document.body) { f.contentWindow.document.body.innerHTML = document.getElementById(‘text_to_edit’).innerHTML; document.all(‘edited_html’).value = document.getElementById(‘text_to_edit’).innerHTML; }}

Текст для редактирования находится в блоке <div id=»text_to_edit»></div>, document.getElementById(‘editor_frame’) — это наш фрейм, в котором всё редактируется, document.all(‘edited_html’) — это textarea, в которой будет html-код отредактированного текста.

Лучшие бесплатные 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 имеет широкий функционал, поддерживаемый практически всеми известными браузерами.

Имея в виду

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

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

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

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

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

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

Standalone

WYSIWYG Editors that can be use without dependecy to other libraries or frameworks.

Aloha Editor — Aloha Editor is a JavaScript content editing library.
CKEditor 4 — Battle-tested WYSIWYG HTML editor.
CKEditor 5 — A set of ready to use rich text editors created with a powerful framework.
Content Tools — A JS library for building WYSIWYG editors for HTML content.
Etherpad — Etherpad: Really real-time collaborative document editing.
Froala Editor — A beautifuly designed WYSIWYG Rich Text Editor based on HTML5.
grande.js — It’s a Medium at Starbucks. Pinky ring out.
Jodit — Rich HTML WYSIWYG Editor and FileBrowser.
Medium Editor — Medium.com WYSIWYG editor clone. Uses contenteditable API to implement a rich text solution.
Medium.js — A tiny JavaScript library for making contenteditable beautiful (Like Medium’s editor).
Mobiledoc Kit — A toolkit for building WYSIWYG editors with Mobiledoc.
Pell — The simplest and smallest (1kB) WYSIWYG text editor for web, with no dependencies.
Pen Editor — Enjoy live editing (+markdown).
Quill — A modern rich text editor built for compatibility and extensibility.
Squire — An HTML5 rich text editor, which provides powerful cross-browser normalisation, whilst being supremely lightweight and flexible.
Scribe — A rich text editor framework for the web platform, with patches for browser inconsistencies and sensible defaults.
Substance — A JavaScript library for web-based content editing.
SunEditor — Pure javascript based WYSIWYG html editor, with no dependencies.
TinyMCE — A JavaScript library for platform independent ‘WYSIWYG’ or rich text editing.
Trix — A rich text editor for everyday writing.
wysihtml — Open source rich text editor for the modern web.
UEditor — UEditor is a WYSIWYG rich web editor developed by Baidu fex-team. It is lightweight, customizable, and user-oriented.

HTML Editor Conclusion

The HTML Editor enables you to compose a perfect HTML code online for free using the WYSIWYG editor in your web browser without requiring you to do any registration or downloading of the application. It can easily be argued that it’s the best free HTML editor available. The beautiful thing is that all this is truly simple and easy to use. All you need is to generate your content online that suits your purpose and as you do this you will be seeing the source code change with every other content you input. You are therefore now able to convert any of your digital documents whether in word, pdf or any other format to a well-composed and neatly presented web article with this editor.

The WYSIWYG HTML editors can provide an exciting editing interface that resembles that of how the page will be displayed in your web browser. Using a free HTML editor may not need you to have any HTML knowledge and hence they have been made easier for you whether you an experienced or an inexperienced HTML user.

The WYSIWYG mode was basically achieved by embedding the layout engine into the best HTML Editor. You may get a custom-written mode or use the one available in your web browser. The goal being that, the rendered result in your editor should represent what will actually be seen in your everyday web browser at all times.

There have been however some difficulties in achieving this level of editing in your free HTML editor. This is borne out of the fact that any document will have inconsistencies in various platforms or even computers. Some of the reasons behind these are:

The different browsers and even applications may render the same content in a different way. The same page for example, may display somehow different when in Internet Explorer or Mozilla Firefox depending on the screen resolution. It may also look slightly different on Lynx browsers. It therefore needs to be rendered in a different way was it is to be used on a PDA or on a mobile phone.
The Web browsers just like every other computer software do have bugs. The bugs may not necessarily conform to editors standards. It is therefore hopeless to attempt to design Web pages for all of your web browsers because the current bugs may be different. Every time a new release of a browser emerges, a significant part of the web needs to be coded again to be able to suit the new bugs that emerges and the new fixes for these bugs. It is therefore generally considered a wise decision to design for the given standards.
One visual style can be a representative of multiple semantic meanings. Semantic meaning is a very important component for your search engines and also for the various web accessibility tools. You can easily tell from context and experience that bold text may be representing a title, or emphasizing a point within the content. This understanding may not be the same for your editor. Simply making text bold in an HTML online editor is not enough to tell the reader what the bold representation is semantically.

In a textual content, the text editor such as notepad, will require you to write out each HTML tag in order to use the content on the web. In a free WYSIWYG HTML editor you just need to type the text the way it is and the then the tags are input for you automatically in the html editor. The HTML Editor is therefore at an advanced level as compared to the simple text editors.

The HTML Editor works just like any of these text editors. You can compose your content and use the various commands to edit your content. As you change the text from the WYSIWYG-HTML editor, the changes are visible within the free HTML editor. If you are an experienced HTML user, you can make changes directly in the html editor and it will reflected in the other editor. Just like the text editors have the copy, cut, paste, undo and redo commands, the HTML Editor all has the same functionalities.

The free online HTML editor functions more than just a text editor by generating a code for your content that you enter in the WYSIWYG HTML editor. This editor complies with the W3C standards. The editor also allows you to express your thoughts or emotions in an easy way by the aid of the emoticons to complement the text. You can immediately add emoticons to the free HTML editor using your WYSIWYG-HTML Editor. Within the editor you can also indent your code in order to get an indented output for your web content.