Trix editor code and quote tools not working?

问题

I wanted to use Trix editor so I linked to its 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>

Everything is working properly except for code and quote tools.

When I click on them, text font changes a bit but no styling is applied while editing or even after displaying it.

What should I do ?

回答1:

The code and quote styles are working as intended, but they apply whatever styles you have specified for the blockquote and pre elements (or just the user agent styles if you haven't specified any). See working example below with some additional css applying basic styles you might expect for these elements so you can test the code and quote functions on the trix editor.

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

来源：https://stackoverflow.com/questions/51552585/trix-editor-code-and-quote-tools-not-working

标签

javascript

html

css

trix