包括自定义 ckeditor 内容样式

Question

是否有可能在 ckeditor 内容区和应用程序的其他视图中使用相同的 css 样式？例如，我在应用程序 css 中覆盖了表的一些类，但是当我在 ckeditor 中创建表时，它看起来与视图中不同。 我发现我可以在内容.css文件中设置内容的样式，但是还有其他问题，我的所有样式都是在css.scss中制作的，对我来说最好的方法是将它们导入ckeditor内容，但我不知道是否有办法做到这一点？

Answer 1

最简单的方法是将内容的文件类型.css更改为content.css.scss。就集成而言，ckeditor gem 也使事情变得更容易一些：https://github.com/galetahub/ckeditor

Answer 2

您可以更改contents.css路径并包含多个样式表。在config.js中指定config.contentsCss或在创建编辑器时直接指定：

CKEDITOR.replace( 'foo', { contentsCss: [ ... ] } );

您的样式表将被注入，编辑器的内容将与您的网站匹配。阅读有关样式的官方指南以了解更多信息。

Answer 3

将 'ckeditor/content.css' 添加到 config/initializers/assets.rb

Rails.application.config.assets.precompile += %w( ckeditor/contents.css )

然后你可以通过JS和erb或像这样的js.erb文件来包含它们（可以像语言环境一样以这种方式包含更多选项）。

CKEDITOR.replace('foo', { customConfig: '<%= asset_path('ckeditor/config.js') %>', contentsCss: '<%= asset_path('ckeditor/contents.css') %>', language: '<%= locale %>' });

Answer 4

使用 https://github.com/galetahub/ckeditor gem 时，这对我有用

在config/initializers/assets.rb

Rails.application.config.assets.precompile += %w( ckeditor/contents.css )

在视图中：

<%= form_for @course do |f| %>
  <%= f.cktext_area(:description, 
        ckeditor: { 
          language: 'de', 
          contentsCss: asset_path("ckeditor/contents.css"),
          height: '400px'
        }
      ) %>
<% end %>