web-dev-qa-db-ja.com

CKEditorはプレビューとエディターにCSSスタイルを追加します

CSSを追加して、プレビューだけでなくエディターテキストのスタイルも設定できますか？

CMSにはWebサイトの公開部分とは異なるCSSファイルのセットがあり、エディターに（少なくとも）サイトでの外観を反映させてもらいたいと思います。

たとえば、クラスが.floatLeft {float：left; margin：0 10px 10px 0;}のすべてのタグは、エディターで同じように表示したいと思います。

ありがとうございました。

cssclassckeditorcustomization
17
Francisc

セットアップ CKEDITOR.config.contentsCss 変数。 CKEDITOR.config.bodyClass および CKEDITOR.config.bodyId も役立つ可能性があります。これらはあなたが持っている唯一のオプションです（私は思います）。

26
Anpher

より正確には、ckeditor/plugins/styles/styles/default.jsを編集して、{name： 'FloatLeft'、element： 'span'、attributes：{'class'： 'floatleft'}のようなファイルを追加できます。 }。

次に、ckeditor/contents.css（エディタースタイルを使用することにした場合）または独自のstyle.cssにクラス宣言.floatLeft {float：left; margin：0 10px 10px 0;}を追加します。

保存後にブラウザのキャッシュをクリアすることを忘れないでください:)

楽しい

6
Ravaka