Question

我想使用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>

除代码和引号工具外，其他所有东西都正常运行。

当我单击它们时，文本字体会有所变化，但是在编辑时甚至显示后都不会应用样式。

我该怎么办？

Answer 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>

Trix编辑器代码和报价工具不起作用？

1 个答案: