mirror of
https://github.com/webislife/wc-wysiwyg.git
synced 2025-07-21 11:32:22 +00:00
320 lines
20 KiB
HTML
320 lines
20 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
||
<title>wc-wysiwyg</title>
|
||
</head>
|
||
<body>
|
||
<wc-wysiwyg
|
||
data-custom-tags='[{"method":"wrapTag","tag":"a","displayType":"inline","hint":"Продвинутая ссылка a is=\"wc-a\"","is":"wc-a"},{"method":"wrapTag","tag":"pre","displayType":"block","hint":"Вставка кода pre is=\"wc-pre\"","is":"wc-pre"},{"method":"wrapTag","tag":"time","displayType":"inline","hint":"Вставка кода pre is=\"wc-pre\"","is":"wc-time"}]'
|
||
data-edit-props='{"A":["href"],"ABBR":["title"],"PRE":["data-lang"],"LI":["data-liststyle"],"DFN":["title"],"H1":["id"],"H2":["id"],"H3":["id"],"H4":["id"],"H5":["id"],"H6":["id"],"SPAN":["class"],"TIME":["datetime"],"IMG":["alt","src","class"],"P":["class"],"AUDIO":["src"]}'
|
||
data-autocomplete="1"
|
||
data-content-class="a__content"
|
||
data-preset-list='[{"tag":"mark", "class": "-custom-mark", "name": "Выделенный синий"}, {"tag":"h1", "style":"color: red;", "name": "Красный заголовок H1"}, {"tag":"h2", "style":"color: green;", "name": "Зеленый заголовок H2"}]'
|
||
id="wceditor"
|
||
filtertags="script,iframe,object"
|
||
required
|
||
minlength="20"
|
||
maxlength="20000000"
|
||
data-preview-el="#preview">
|
||
<textarea><h1>wc-wysiwyg</h1>
|
||
<p><mark>Д</mark><small>е</small><sup>м</sup><sub>о</sub><dfn title="definiton title">н</dfn><kbd>с</kbd><strong>т</strong><abbr title="ABBR">р</abbr><code>а</code><q>ц</q><del>и</del><ins>я</ins> <samp>и</samp> обзор возможностей веб-компонента wc-wysiwyg</p>
|
||
|
||
<blockquote><b>WYSIWYG</b> (произносится [ˈwɪziwɪɡ], является аббревиатурой от англ. What You See Is What You Get, «что видишь, то и получишь») — свойство прикладных программ или веб-интерфейсов, в которых содержание отображается в процессе редактирования и выглядит максимально близко похожим на конечную продукцию, которая может быть печатным документом, веб-страницей или презентацией. В настоящее время для подобных программ также широко используется понятие «визуальный редактор».</blockquote>
|
||
<ul>
|
||
<li><a is="wc-a" href="https://github.com/webislife/wc-wysiwyg">github репозиторий</a></li>
|
||
<li><a class="wc-a" href="https://www.npmjs.com/package/wc-wysiwyg-editor">npm package</a></li>
|
||
</ul>
|
||
<h2>Базовые возможности редактора</h2>
|
||
<p>
|
||
Редактор вдохновлен <a is="wc-a" href="https://html.spec.whatwg.org/multipage/" v-is="HTML5" target="_blank">HTML5</a> идеями семантики веба и старается максимально их поддерживать. В основе интерактивности редактора лежит нативная javascript реализация с применением веб-компонентов и браузерных API. Данный веб-компонент не имеет зависимостей в <code>package.json</code> и не требует дополнительной установки каких либо библиотек и javascript фреймворков.
|
||
</p>
|
||
<h3>Текстовое форматирование</h3>
|
||
<p>
|
||
Текстовое базовое форматирование основано на HTML5 тегах, <abbr title="но никто не мешает их добавить"> вместо CSS стилей</abbr>. Базовая палитра цветов взята из <a is="wc-a" href="https://materialui.co/colors/">materialui.co</a>
|
||
</p>
|
||
<h4>Строчные элементы</h4>
|
||
<p>
|
||
<ol>
|
||
<li><code>b</code> - <b>жирный</b> </li>
|
||
<li><code>u</code> - <u>подчеркнутый</u></li>
|
||
<li><code>s</code> - <s>зачерекнутый</s></li>
|
||
<li><code>i</code> - <i>курсивный</i></li>
|
||
<li><code>q</code> - <q>цитата</q></li>
|
||
<li><code>small</code> - <small>маленький текст</small></li>
|
||
<li><code>sup</code> - <sup>надстрочный</sup></li>
|
||
<li><code>sub</code> - <sub>подстрочный</sub></li>
|
||
<li><code>mark</code> - <mark>выделенный текст</mark></li>
|
||
<li><code>strong</code> - <strong>важный текст</strong></li>
|
||
<li><code>samp</code> - <samp>вывод компьютерной программы</samp></li>
|
||
<li><code>kbd</code> - <kbd>ПРОБЕЛ</kbd> обозначение кнопки </li>
|
||
<li><code>del</code> - <del>удаленный текст</del> из документа </li>
|
||
<li><code>ins</code> - <ins>добавленный текст</ins> в документ </li>
|
||
<li><code>code</code> - Внутритекстовый <code>код</code> </li>
|
||
<li><code>var</code> - обозначение <var>X</var> переменных </li>
|
||
<li><code>dfn</code> - <dfn title="Тег dfn (сокращенно от definition)">определение</dfn></li>
|
||
<li><code>abbr</code> - <abbr title="Тег abbr (сокращенно от abbreviation)">аббрeвиатура</abbr></li>
|
||
</ol>
|
||
</p>
|
||
<h4>HTML5 строчные элементы</h4>
|
||
<p>
|
||
<ol>
|
||
<li>
|
||
<code>wc-time</code> - веб-компонент расширяющий возможности показа даты и времени, совместим с этим редактором, вы открыли эту страницу - <time is="wc-time" data-format-time="minute,hour,second"></time> больше возможностей и реализацию, <a is="wc-a" href="https://webislife.ru/demo/wc-time/">читайте здесь</a> или <a is="wc-a" href="https://github.com/webislife/wc-time">смотрите на github</a>.
|
||
<br> Сравните две даты <time datetime="12.12.2023 01:23">12.12.2023 01:23</time> и версию <code>is="wc-time"</code> <time is="wc-time" datetime="12.12.2023 01:23">12.12.2023 01:23</time>
|
||
</li>
|
||
<li><code>a is="wc-a"</code> - пример интеграции анонимного веб-компонента <a href="https://webislife.ru">просто ссылка</a> и <a https:="https://webislife.ru/demo/wc-editor" is="wc-a">wc-a ссылка</a></a></li>
|
||
</ol>
|
||
</p>
|
||
<h4>Аббревиатуры <code>abbr</code></h4>
|
||
<p>
|
||
Использование аббревиатур в статьях и комментариях бывает уместно и позволяет подсказать пользователям, что такое
|
||
<abbr title="Hyper Text Markup Language">HTML</abbr> или как расшифровать <abbr title="Имею Мнение Хрен Оспоришь">ИМХО</abbr> или
|
||
<abbr title="Синхрофазотро́н (от синхронизация + фаза + электрон) — резонансный циклический ускоритель с неизменной в процессе ускорения длиной равновесной орбиты.">Синхрофазотрон</abbr>
|
||
</p>
|
||
|
||
<h3>Блочные элементы</h3>
|
||
<p>
|
||
В блочные элементы входят все заголовки, а также:
|
||
</p>
|
||
<p>
|
||
<ul>
|
||
<li><code>details</code> - спойлер
|
||
<details>
|
||
<summary>Заголовок спойлера</summary>
|
||
текст в спойлере
|
||
</details>
|
||
</li>
|
||
<li><code>pre</code> - блок форматированного текста, примеры применения:
|
||
<pre data-lang="English proverb">Strike while the iron is hot</pre>
|
||
<pre data-lang="file.txt">содержимое file.txt</pre>
|
||
<pre data-lang="javascript">window.customElements.define('wc-wysiwyg', WCWYSIWYG);</pre>
|
||
А вот пример применения <code>is="wc-pre"</code>
|
||
<pre is="wc-pre" data-lang="javascript">window.customElements.define('wc-wysiwyg', WCWYSIWYG);</pre>
|
||
</li>
|
||
<li>
|
||
<code>audio</code> - а что если дать возможность читателю запустить трек перед длительным чтением статьи? Или автору вставлять аудиофрагменты
|
||
<audio controls src="https://www.chosic.com/wp-content/uploads/2021/04/Luke-Bergs-Bliss.mp3"></audio>
|
||
</li>
|
||
<li>
|
||
<code>video</code> - простая интеграция video не сложнее чем audio
|
||
<video controls width="300" src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4">
|
||
</video>
|
||
</li>
|
||
<li>
|
||
<code>figure</code> - тоже является блочным элементом, может быть использован для оборачивания изображений и audio элементов
|
||
<figure>
|
||
<audio controls src="https://www.chosic.com/wp-content/uploads/2021/04/Luke-Bergs-Bliss.mp3"></audio>
|
||
<figcaption>🎵 Luke-Bergs-Bliss.mp3</figcaption>
|
||
</figure>
|
||
</li>
|
||
<li>
|
||
<code>blockquote</code> - блок цитаты
|
||
<blockquote><h5>для больших</h5><br><h5>цитат</h5></blockquote>
|
||
</li>
|
||
</ul>
|
||
</p>
|
||
<h4>
|
||
Спойлер
|
||
</h4>
|
||
<p>
|
||
Для спойлеров используется тег <code>details</code>
|
||
</p>
|
||
<details>
|
||
<summary>Нажми, чтобы увидеть спойлер</summary>
|
||
<p>
|
||
Ура, спойлерить в комментариях можно! Но скрыть <abbr title="когда хочешь немного больше">одно или пару</abbr> можно и аббривеатурой.
|
||
</p>
|
||
</details>
|
||
<p>
|
||
Можно спрятать код в спойлер, если его чтение опционально или затрудняет статью
|
||
</p>
|
||
<details>
|
||
<summary>Код под спойлером</summary>
|
||
<p>
|
||
<pre is="wc-pre" data-lang="ts">//Все знакомые редатору теги
|
||
const allTags = [
|
||
{ tag: 'h1' },
|
||
{ tag: 'h2' },
|
||
{ tag: 'h3' },
|
||
{ tag: 'h4' },
|
||
{ tag: 'h5' },
|
||
{ tag: 'h6' },
|
||
{ tag: 'span' },
|
||
{ tag: 'mark' },
|
||
{ tag: 'small' },
|
||
{ tag: 'dfn' },
|
||
{ tag: 'a'},
|
||
{ tag: 'q'},
|
||
{ tag: 'b'},
|
||
{ tag: 'i'},
|
||
{ tag: 'u'},
|
||
{ tag: 's'},
|
||
{ tag: 'sup'},
|
||
{ tag: 'sub'},
|
||
{ tag: 'kbd'},
|
||
{ tag: 'abbr'},
|
||
{ tag: 'strong'},
|
||
{ tag: 'code'},
|
||
{ tag: 'samp'},
|
||
{ tag: 'del'},
|
||
{ tag: 'ins'},
|
||
{ tag: 'var'},
|
||
{ tag: 'ul'},
|
||
{ tag: 'ol'},
|
||
{ tag: 'pre'},
|
||
{ tag: 'time'},
|
||
{ tag: 'img'},
|
||
{ tag: 'audio'},
|
||
{ tag: 'video'},
|
||
{ tag: 'blockquote'},
|
||
] as WCWYSIWYGTag[];</pre>
|
||
</p>
|
||
</details>
|
||
<h4>
|
||
Цитаты
|
||
</h4>
|
||
<p>
|
||
Используем тег <code>q</code> для коротких <abbr title="внутритекстовых">inline</abbr> цитат
|
||
</p>
|
||
<p>
|
||
Есть такая фраза <q>Я не слишком богат, чтобы покупать вещи дважды</q> - вы слышали?
|
||
</p>
|
||
<p>
|
||
Используем тег <code>blockquote</code> для блока цитаты
|
||
</p>
|
||
<blockquote>
|
||
<b>БлокЦитаты</b> - лучше использовать отдельно<br>
|
||
Он лучше подходит для цитат и выдержек на несколько строк
|
||
</blockquote>
|
||
|
||
<p>
|
||
Для интеграции редактора на страницу достаточно в HTML разместить разметку
|
||
</p>
|
||
<pre data-lang="HTML">< wc-wysiwyg id="wc-demo-comment"
|
||
data-allow-tags="strong,u,i,b,q,blockquote,a,img,pre"
|
||
data-storage="demo-comment"
|
||
data-hide-bottom-actions="1"
|
||
is="wc-wysiwyg"
|
||
required
|
||
minlength="5"
|
||
maxlength="500">
|
||
< textarea>< /textarea>< wc-wysiwyg></pre>
|
||
<p>
|
||
Подключить модуль компонента на странице или импортировать его из <code>javaScript</code> и вызвать метод <code>define</code>. Пример подключения на этой странице:
|
||
</p>
|
||
<pre is="wc-pre" data-lang="javascript">import('/wp-content/themes/wl/ts/components/web/wc-editor.js').then(esm => {
|
||
esm.define();
|
||
});</pre>
|
||
<p>
|
||
Попытки вставить javaScript и прочие пакости как value для этого веб-компонента должны обрезаться и пресекаться на стороне сервера,
|
||
список доступных тегов для каждого ресурса может быть индивидуален.
|
||
</p>
|
||
<h4>Выравнивание текста</h4>
|
||
<p>В будущем автор возможно добавит выравнивание элементов кнопками, но на уровне CSS классов это доступно уже сейчас</p>
|
||
<p class="-text-center">Текст по центру с применением CSS класса <code>-text-center</code></p>
|
||
<p class="-text-right">Текст по правому краю с применением CSS класса <code>-text-right</code></p>
|
||
<p class="-text-left">Текст по левому краю с применением CSS класса <code>-text-left</code></p>
|
||
<h4>Копирование в буфер</h4>
|
||
<p>
|
||
А что если прямо в редакторе:
|
||
<ol>
|
||
<li>
|
||
нажать <kbd>ctrl</kbd>+<kbd>a</kbd> и просто все выделить
|
||
</li>
|
||
<li>
|
||
потом все вырезать <kbd>ctrl</kbd>+<kbd>X</kbd>
|
||
</li>
|
||
<li>
|
||
а потом вставить обратно <kbd>ctrl</kbd>+<kbd>V</kbd>
|
||
</li>
|
||
</ol>
|
||
Останется ли на месте все созданное? - <q>все кроме скрытого содержания спойлеров вернется на место, но будет вставлено в виде форматированного инлайн стилями html</q>
|
||
</p>
|
||
|
||
<h4>Списки</h4>
|
||
<ol>
|
||
<li> Нумерованный </li>
|
||
<li> Список </li>
|
||
</ol>
|
||
<ul>
|
||
<li> Маркированный </li>
|
||
<li> Список </li>
|
||
</ul>
|
||
<p>
|
||
🔥 Cписок возможностей <code>textarea is="wc-wysiwyg"</code> или
|
||
</p>
|
||
<ul>
|
||
<li data-listStyle="✅">Поддержка мультиязычности через аттрибут <a is="wc-a" href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/lang">HTMLElement.lang</a> <br>
|
||
🇷🇺/🇺🇸 поддерживаются по умолчанию</li>
|
||
<li data-listStyle="✅">CSS стили для всех популярных HTML5 тегов </li>
|
||
<li data-listStyle="✅">CSS поддержка emoji в маркированных списках </li>
|
||
<li data-listStyle="✅">Поддержка наследования стилей через CSS class в аттрибуте <code>data-content-class</code> emoji в маркированных списках </li>
|
||
<li data-listStyle="✅">Внутритекстовое действия над выделенным текстом </li>
|
||
<li data-listStyle="✅">Хранение значения в <code>window.localStorage</code> и восстановление после перезагрузки, проверьте в форме комментариев ниже</li>
|
||
<li data-listStyle="✅">Редактирование сразу нескольких атрибутов и свойств для тегов <code>h1-6</code> / <code>abbr</code> / <code>dfn</code> / <code>a</code> / <code>pre</code> / <code>ul > li</code> и любых других тегов, количество тегов и атрибуты настраиваются</li>
|
||
<li data-listStyle="✅">Autocomplete при вводе <code>/</code> для поддерживаемых тегов в новом параграфе</li>
|
||
<li data-listStyle="✅">Переключатель вида текст\HTML5</li>
|
||
<li data-listStyle="✅">Кнопка очистки формата <kbd>Ⱦ</kbd></li>
|
||
<li data-listStyle="✅">Предпросмотр в режиме реального времени</li>
|
||
<li data-listStyle="✅">Сочетания клавиш
|
||
<ol>
|
||
<li><kbd>alt</kbd>+<kbd>space</kbd> переключить текущий указатель каретки вне тега</li>
|
||
<li><kbd>Escape</kbd> закрыть нижнюю диалоговую панель редактора</li>
|
||
</ol>
|
||
</li>
|
||
<li data-listStyle="✅">Валидация <code>required</code>, <code>minlength</code>, <code>maxlength</code>, <code>filtertags</code></li>
|
||
<li data-listStyle="✅">Вставка <code>audio</code> элемента</li>
|
||
<li data-listStyle="✅">Вставка <code>video</code> элемента</li>
|
||
<li data-listStyle="⌛">
|
||
В разработке
|
||
<ul>
|
||
<li data-listStyle="🖊">Работа с таблицами</li>
|
||
<li data-listStyle="🖊">Изменение размеров изображения прямо в редакторе</li>
|
||
<li data-listStyle="🖊">Поддержка placeholder</li>
|
||
<li data-listStyle="🖊">Выравнивание текста по краям в параграфе с помощью кнопок</li>
|
||
<li data-listStyle="🖊">Цветовое оформление цвета и фона у текста с <code>colorPicker</code></li>
|
||
<li data-listStyle="🖊">Поддержка <dfn title="горячих клавиш">hotkeys</dfn></li>
|
||
<li data-listStyle="🖊">Разметка <dfn title="markdown разметки">.md</dfn> </li>
|
||
<li data-listStyle="🖊">Поддержка <dfn title="еще один популярный язык разметки">bbcode</dfn></li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
<h3>
|
||
Изображения
|
||
</h3>
|
||
<p>Изображение c описанием будет вставлено как <code>figure->img+figcaption</code> также описание картинки будет продублировано в <code>alt=""</code> аттрибут <code>img</code></p>
|
||
<figure>
|
||
<img src="https://webislife.ru/wp-content/uploads/2023/01/snimok-ekrana-2023-01-24-v-20.24.51.png">
|
||
<figcaption>
|
||
Поддержка браузерами <code>custom-elements</code> в 2023 году <code>figcaption</code>
|
||
</figcaption>
|
||
</figure>
|
||
<p>Изображение без описания будет вставлено как <code>img</code></p>
|
||
<img src="https://webislife.ru/wp-content/uploads/2023/01/snimok-ekrana-2023-01-20-v-21.22.19-e1674239288838.png" alt="https://webislife.ru/wp-content/uploads/2023/01/snimok-ekrana-2023-01-20-v-21.22.19-e1674239288838.png">
|
||
|
||
</textarea>
|
||
</wc-wysiwyg>
|
||
<style>
|
||
*, html, body {
|
||
margin:0;
|
||
padding:0;
|
||
}
|
||
</style>
|
||
<script>
|
||
import('./src/sass/content.scss');
|
||
import('./src/sass/wc-wysiwyg.scss');
|
||
|
||
Promise.all([
|
||
import('./src/extensions/colorerDialog.ts'),
|
||
import('./src/extensions/emojiDialog.ts'),
|
||
import('./src/extensions/presetList.ts'),
|
||
]).then(modules => {
|
||
import('./src/wc-wysiwyg.ts').then(esm => esm.define());
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |