web-dev-qa-db-ja.com

CKEditorへのカスタムスタイルの追加

最近、CKEditorをアプリに追加しました。エディター内で選択できるように、エディター内に独自のCSSスタイルシートを含めたいと思います。

どうすればこれを達成できますか？これまでのところ私のコードは次のようになります：

<script type="text/javascript">

    CKEDITOR.replace( 'editor1',{
        uiColor : '#9AB8F3',
    });

</script>
javascriptcssckeditor
15
Elitmiar
<script type="text/javascript">
  // This code could (may be should) go in your config.js file
  CKEDITOR.stylesSet.add('my_custom_style', [
    { name: 'My Custom Block', element: 'h3', styles: { color: 'blue'} },
    { name: 'My Custom Inline', element: 'span', attributes: {'class': 'mine'} }
  ]);
  // This code is for when you start up a CKEditor instance
  CKEDITOR.replace( 'editor1',{
    uiColor: '#9AB8F3',
    stylesSet: 'my_custom_style'
  });
</script>

stylesSet.add構文の完全なドキュメントを読むこともできます。

41
metavida

これは私のために働く

CKEDITOR.addCss('body{background:blue;}');
14
surtyaar

すでに述べたように、 カスタムスタイル のセットをセットアップする方法を説明するページがあります。そのページに隠されている（本当に明確ではない）小さな宝石は、名前付きのスタイルのセットを作成するのではなく、次のようにスタイルをインラインで定義できることです。

    stylesSet : [
    {
        name : 'Green Title',
        element : 'h3',
        styles :
        {
            'color' : 'Green'
        }
    } ],
8
Garret Wilson

最良の方法は、このプラグインを使用することです。 http://ckeditor.com/addon/stylesheetparser

それを「ckeditor/plugins」ディレクトリ内に貼り付け、次に「ckeditor/config.js」に次のようなものを含めます。

config.extraPlugins = 'stylesheetparser';
config.contentsCss = '/css/inline-text-styles.css';
config.stylesSet = [];

ここで、「/ css/inline-text-styles.css」は、ckeditorの外の、Webルート内の独自のcssフォルダーへのパスです。これにより、CSSとJavaScriptを混在させる必要がなくなります。

5
joshua.paling

ここのパーティーには少し遅れますが、デフォルトのスタイルは_source/plugins/styles/styles/default.js。あなたはそれをあなたのスタイル設定として使用してスタイルを追加することができ、それは効果的に追加されます。

5
ZiggyTheHamster