CKEditor 5 установить стиль на элемент - PullRequest
Новая
       6

CKEditor 5 установить стиль на элемент

0 голосов
/ 08 июня 2018

мы пытаемся немного взломать семейство шрифтов CKEditor 5.Мы бы хотели установить font-style в родительский элемент (например, <p>), когда вы выделяете весь текст в элементе.Результирующий синтаксис будет намного чище, вместо ненужного тега <span> внутри <p>

Но при попытке setAttribute на Element он не работает, однако атрибут устанавливается в Model.Но полученный текст не изменился.Также мы не нашли метод addStyle для Element

Вот наша текущая модификация fontcommand.js (строка примечания с if(range.start.isAtStart && range.end.isAtEnd){): 

model.change( writer => {
            if ( selection.isCollapsed ) {
                if ( value ) {
                    writer.setSelectionAttribute( this.attributeKey, value );
                } else {
                    writer.removeSelectionAttribute( this.attributeKey );
                }
            } else {
                const ranges = model.schema.getValidRanges( selection.getRanges(), this.attributeKey );

                for ( const range of ranges ) {
                    if ( value ) {
                        if(range.start.isAtStart && range.end.isAtEnd){
                            writer.setAttribute( this.attributeKey, value, range.start.parent );
                        } else {
                            writer.setAttribute( this.attributeKey, value, range );
                        }
                    } else {
                        writer.removeAttribute( this.attributeKey, range );
                    }
                }
            }
        } );

Имея <p>something</p> мы хотели бы получить <p style="font-family: Arial">something</p> при выборе стиля шрифта.

Кто-нибудь желающий дать нам подсказку?

Спасибо.

1 Ответ

0 голосов
/ 08 июня 2018

Быстрый ответ

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

Длинный ответ

Во-первых, вам нужно понять, как работает модель редактора .Что это абстрактное представление содержимого расширенного текста (в котором вы не найдете стили, только общие атрибуты), которое позже преобразуется в DOM-подобный вид .

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

Теперь давайте рассмотрим, предоставили ли вы правильные конвертеры,Что теперь?

Пользователь применяет семейство шрифтов ко всему абзацу - поэтому вы изменяете этот атрибут в этом абзаце.Он отображается как <p style=...>.

Но затем пользователь изменяет семейство шрифтов для части текста в этом абзаце.Если вы не будете что-то делать, вы получите: 

<p style="font-family:x">foo <span style="font-family:y">bar</span></p>

И вскоре у вас может появиться это: 

<p style="font-family:x"><span style="font-family:y">bar</span></p>

Не более чистый вывод, верно?

Итак, вам нужно наблюдать за всеми изменениями в модели и, в какой-то момент, удалить этот атрибут из абзаца.На самом деле есть даже концепция post-fixers , которую можно использовать для такой работы.Но это становится сложным, не так ли?

Другой вариант - использовать тот факт, что преобразование (между моделью и представлением) в CKEditor 5 является чем-то действительно мощным.Вы должны иметь возможность преобразовать текстовый атрибут модели в (условно):

  • атрибут элемента представления, если этот атрибут присутствует во всем содержимом этого элемента;
  • или с использованием конвертеров по умолчанию (которые создают <span> s для текста).

Где код?Мне лень это писать.И проверить это.Это улучшение, ИМО, не стоит усилий.

РЕДАКТИРОВАТЬ: Извините за тон в последнем предложении, но это то, что я чувствую по поводу настройки таких вещей.Как разработчики, мы склонны быть педантичными, но с точки зрения данных это не имеет большого значения (в данном случае).

...