Trix редактор кода и инструменты цитаты не работает?

Я хотел использовать редактор Trix, поэтому я связался с его CDN.

<script src="https://cdnjs.cloudflare.com/ajax/libs/trix/0.12.0/trix.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/trix/0.12.0/trix.css">

<div class="col-lg-6">
  <input id="x" type="hidden" name="body">
  <trix-editor input="x"></trix-editor>
</div>

Все работает правильно, за исключением инструментов кода и цитаты.

Когда я нажимаю на них, текстовый шрифт немного меняется, но стиль не применяется во время редактирования или даже после его отображения.

Что я должен делать?

Источник

1 ответ

Стили кода и кавычек работают как задумано, но они применяют любые стили, которые вы указали для blockquote а также pre элементы (или только стили пользовательского агента, если вы не указали их). Посмотрите рабочий пример ниже с некоторыми дополнительными CSS, применяющими базовые стили, которые вы могли бы ожидать для этих элементов, чтобы вы могли протестировать функции кода и кавычек в редакторе trix.

.editor-content blockquote {
  font-style: italic;
}

.editor-content pre {
  background-color: rgb(239,240,241);
}
<!DOCTYPE html>
<html lang="en-US">

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Trix Editor</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/trix/0.12.0/trix.css">
  </head>

  <body>

    <div>
      <input id="trixinput" type="hidden" name="trixinput">
      <trix-editor class="editor-content" input="trixinput"></trix-editor>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/trix/0.12.0/trix.js"></script>

  </body>

</html>

Источник
Другие вопросы по тегам