Делюсь еще одним лайфхаков, как в плагине CKE5 вставить htmlentity.
При вставке текста в модель, CKEditor будет преобразовывать html символы вроде ‘&’ и ‘>’. Но что делать, если нужно вставить символ в виде html кода?
Рассмотрим следующий код, который реализует команды для модуля вставки символов, который мне нужно было разработать.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
/** * @file * Defines the Command plugin. */ import { Command } from 'ckeditor5/src/core'; /** * The specialchars command. * * @extends module:core/command~Command */ export default class SpecialcharsCommand extends Command { /** * @inheritDoc */ refresh() { // Toolbar button is always enabled. this.isEnabled = true; } /** * @inheritDoc / options: { code: TEXT-TO-INSERT } */ execute(options = {} ) { const textData = options.code || ''; const editor = this.editor; const { model } = editor; model.change((writer) => { const selection = model.document.selection; const position = selection.getFirstPosition(); writer.insertText( this._decodeHtmlEntities(textData), position); }); } // Функция для декодирования HTML-сущностей _decodeHtmlEntities(text) { const textarea = document.createElement('textarea'); textarea.innerHTML = text; return textarea.value; } } |
TextData поступает в функцию как параметр options.code. И обычно содержит код в html entity. Вроде ™ или 🔍.
Если я буду просто вставлять текст как:
|
1 |
writer.insertText( textData, position ); |
То, символ ‘&’ будет преобразован в ‘&’ и в HTML мы не получим закодированного символа. Потому мы используем преобразование с помощью поля textarea.
Этот трюк позволяет достичь желаемого эффекта при вставке html entities без сложных манипуляция с моделью.
На самом деле в html код вставляется уже не htmlentity, а результат преобразования в UNICODE, потому это и работает.