Блог

Главная - Вопросы по программированию - Как я могу направить React-Quill для применения встроенных стилей вместо классов?

Как я могу направить React-Quill для применения встроенных стилей вместо классов?

#javascript #reactjs #react-quill

Вопрос:

Я использую React-quill и заметил, что для некоторого контента возвращаются классы. Есть ли какой-либо способ получить встроенные стили вместо классов.

<p>Pjhfdcjhad <span class="ql-size-large">jadhjvhgds</span> dsbjhvgdsz xv</p>

вместо этого должно быть

<p>Pjhfdcjhad <span style="font-size: 1.5em;">jadhjvhgds</span> dsbjhvgdsz xv</p>

Примеры кодов и поле ниже

https://codesandbox.io/s/agitated-snowflake-zvy6l

Ответ №1:

Боже мой, это чрезвычайно сложно настроить. Некоторые работают из коробки с just register . Некоторые требуют изменений CSS, а некоторые-нет.

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

Выравнивание и направление:

Самый простой из многих-просто нужно зарегистрироваться:

 //Text direction
Quill.register(Quill.import("attributors/style/direction"), true);
//Alignment
Quill.register(Quill.import("attributors/style/align"), true);

Размер шрифта:

 const Size = Quill.import("attributors/style/size");
Size.whitelist = ["0.75em", "1em", "1.5em", "2.5em"];
Quill.register(Size, true);

Требуется внести изменения в CSS, чтобы правильно разместить меню в дополнение к регистрации:

 .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="0.75em"]::before {
  content: "Small";
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="1em"]::before {
  content: "Normal";
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="1.5em"]::before {
  content: "Large";
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="2.5em"]::before {
  content: "Huge";
}

.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="0.75em"]::before {
  content: "Small";
  font-size: 0.75em !important;
}

.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="1em"]::before {
  content: "Normal";
  font-size: 1em !important;
}

.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="1.5em"]::before {
  content: "Large";
  font-size: 1.5em !important;
}

.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="2.5em"]::before {
  content: "Huge";
  font-size: 2.5em !important;
}

Отступ текста:

Пользовательский формат пергамента

 const Parchment = Quill.import("parchment");
class IndentAttributor extends Parchment.Attributor.Style {
  add(node, value) {
    if (value === 0) {
      this.remove(node);
      return true;
    } else {
      return super.add(node, `${value}em`);
    }
  }
}

let IndentStyle = new IndentAttributor("indent", "text-indent", {
  scope: Parchment.Scope.BLOCK,
  whitelist: ["1em", "2em", "3em", "4em", "5em", "6em", "7em", "8em", "9em"]
});

Quill.register(IndentStyle, true);

Отключение редактора ссылок слева:

Нужен текстовый редактор данных для ограничивающего контейнера

   <div data-text-editor="form-editor">
    <ReactQuill
      ....
      bounds={`[data-text-editor="form-editor"]`} //for link editor to be not cut-off
    />
  </div>

https://codesandbox.io/s/vibrant-chebyshev-50eg7

Метки: