1

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

除代码和报价工具外，一切正常。

当我单击它们时，文本字体会发生一些变化，但在编辑时甚至在显示后都没有应用样式。

我应该怎么办 ？

4

1 回答 1

1

代码和引用样式按预期工作，但它们应用您为blockquoteandpre元素指定的任何样式（或者如果您未指定任何样式，则仅应用用户代理样式）。请参阅下面的工作示例，其中包含一些附加的 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">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/trix/0.12.0/trix.js"></script>
  </head>
  <body>
    <div>
      <input id="trixinput" type="hidden" name="trixinput">
      <trix-editor class="editor-content" input="trixinput"></trix-editor>
    </div>
  </body>
</html>

于 2018-07-28T14:56:10.293 回答