文章/答案/技术大牛

发布

社区首页 >问答首页 >Trix编辑器代码和引用工具不工作？

问Trix编辑器代码和引用工具不工作？
EN

Stack Overflow用户

提问于 2018-07-27 15:10:44

回答 1查看 920关注 0票数 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>

除了代码和报价工具之外，一切都运行正常。

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

我该怎么做？

javascript

html

css

trix

回答 1

Stack Overflow用户

发布于 2018-07-28 22:56:10

代码和引用样式可以正常工作，但它们会应用您为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">
    <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>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/51552585

复制

相似问题

问Trix编辑器代码和引用工具不工作？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Trix编辑器代码和引用工具不工作？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Trix编辑器代码和引用工具不工作？
EN