导入样式
用您网站已有的 CSS 类填充编辑器的样式菜单。设置 importStyles: true 后，编辑器会读取页面的样式表，找到 p.lede 或 img.rounded 之类的类选择器，并把每个类添加到段落、内联、图片或链接样式菜单中，这样作者选择的就是您设计系统中的类，而不是占位用的类。
importStylesReplace: true）。启用
该功能由 importstyles.js 插件提供（也包含在 plugins/all_plugins.js 中）。在您设置 importStyles: true 之前，它是关闭的。它没有自己的按钮；它填充的是 paragraphstyle 和 inlinestyle（主工具栏）、imagestyle（图片工具栏）以及 linkstyle（链接工具栏）背后的菜单。
本例中的样式表：
p.lede { font-size: 1.25em; color: #334155; }
blockquote.pull-quote { border-left: 4px solid #2563eb; padding-left: 12px; font-style: italic; }
span.badge { background: #fde68a; padding: 0 4px; border-radius: 4px; }
.highlight { background: #dcfce7; }
img.rounded { border-radius: 12px; }
a.cta { background: #2563eb; color: #fff; padding: 4px 10px; border-radius: 6px; }
article .card p.note:hover { color: #0f766e; }
p.lede.wide { max-width: none; }
.js-toggle { display: none; }
@media (min-width: 600px) { h2.section-title { letter-spacing: .02em; } }<link rel="stylesheet" href="site.css">
<script src="/richtexteditor/rte.js"></script>
<script src="/richtexteditor/plugins/all_plugins.js"></script>
<div id="editor"><p>Intro paragraph that should become a lede.</p></div>
<script>
var editor = new RichTextEditor("#editor", {
toolbar: "full",
contentCssUrl: "site.css", // so the classes also look right inside the editor
importStyles: true
});
</script>这个样式表生成了以下菜单（editor.getImportedStyles() 报告 applied: { imageStyles: 1, linkStyles: 1, inlineStyles: 2, paragraphStyles: 5 }）：
| 菜单 | 导入的条目 |
|---|---|
| 段落样式 | Lede、Pull Quote、Highlight、Note、Section Title |
| 内联样式 | Badge、Highlight |
| 图片样式 | Rounded |
| 链接样式 | Cta |
对第一个段落选择 Lede 后，保存的结果为 <p class="lede">Intro paragraph that should become a lede.</p>。
类如何归类
- 只有选择器的最后一部分起作用：
article .card p.note:hover为段落提供note。伪类和属性筛选会被忽略。 - 类前面的元素决定它进入哪个菜单：
img、figure、picture进入图片样式；a进入链接样式；span、strong、b、em、i、code、mark、small、sub、sup、abbr、q、cite进入内联样式；p、div、标题、blockquote、列表、pre、section 和表格单元格进入段落样式。没有元素的类（.highlight）同时进入内联样式和段落样式。其他元素会被跳过。 - 一个元素上有两个类的选择器（
p.lede.wide）会被跳过，因为没有任何单个类能匹配它。 @media和@supports中的类也能被找到。- 标签由类名生成：
pull-quote变成 "Pull Quote"。开头的my-cls-、u-或c-会被去掉。 - 编辑器自己的样式表永远不会被读取（来自
/richtexteditor/文件夹的任何内容，以及编辑器注入的样式）。
选项
| 选项 | 默认值 | 作用 |
|---|---|---|
importStyles | false | 开启导入。 |
importStylesSheets | null（所有可读取的样式表） | 要读取哪些样式表：与样式表 URL 匹配的字符串（"site.css"）、RegExp（/theme/），或者一个接收 CSSStyleSheet 并返回 true 或 false 的函数。 |
importStylesExclude | /^(rte[-_]|ck[-_]|cke[-_]|mce[-_]|tox[-_]|js[-_]|is[-_]|has[-_])/i | 永远不会导入的类名。可以是 RegExp、以类名为参数的函数，或者一个字符串前缀。默认值跳过了上面的 .js-toggle。 |
importStylesFilter | null | function (className, selectorText, menu)。返回 false 跳过某个类，或者返回一个字符串作为它的标签。menu 为 "paragraphStyles"、"inlineStyles"、"imageStyles" 或 "linkStyles"。 |
importStylesReplace | false | false 把导入的类添加到已配置的类之后；true 则替换它们。 |
importStylesLimit | 100 | 每个菜单最多的条目数。多出的类会被丢弃，并在控制台中给出警告。0 表示不限制。 |
例如，隐藏一个类并重命名另一个类：
importStylesFilter: function (cls, selector, menu) {
if (cls === "highlight") return false;
if (cls === "lede") return "Lead paragraph";
}API
editor.getImportedStyles()返回上一次导入的结果：{ applied, truncated, droppedCount, unreadableSheets, documentsScanned, replaced }。editor.scanStylesheetClasses(options)以{ classes: [{ cls, tag, selector }], unreadableSheets, documents }的形式列出将会导入的内容，而不改变菜单。在importStyles关闭时也能使用。editor.importStyles(options)再次运行导入，例如在加载了另一个样式表之后。选项使用简短的名称：{ sheets, exclude, filter, replace, limit }。
注意事项
- 无法读取来自其他源的样式表。浏览器会阻止读取它们的规则；它们会被计入
unreadableSheets并被跳过，扫描的其余部分照常进行。在上面的测试中，从第二个源加载的同一样式表的副本被报告为unreadableSheets: 1。请从您自己的域名提供您需要其类的样式表。 - 两个文档都会被读取：页面本身，以及编辑器的编辑区域（
contentCssUrl在那里加载）。导入在编辑器启动时运行，并在编辑器就绪后再运行一次。 - 页面上有多个编辑器时，请传入您自己的列表。在 2.6.12 中，当
importStylesReplace: false时，导入的类会被添加到共享的默认列表中（RTE_DefaultConfig.paragraphStyles及其他列表），因此之后在同一页面上创建的第二个编辑器即使关闭了importStyles，也会显示这些类。在每个编辑器的配置中分别设置paragraphStyles、inlineStyles、imageStyles和linkStyles，或者设置importStylesReplace: true，即可把它们分开。 - 保存的 HTML 只携带类名（
class="lede"）。显示内容的页面需要同一个样式表，并且 HTML 净化程序必须允许class。 - 在使用工具类 CSS 的页面上（有数百个单一用途的类），请用
importStylesSheets或importStylesFilter缩小导入范围，而不是提高上限。