16

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

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

<script type="text/javascript">

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

</script>
4

6 に答える 6

44 
<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構文の完全なドキュメントを読むこともできます。

于 2011-06-23T23:35:23.220 に答える
17

これは私のために働く

CKEDITOR.addCss('body{background:blue;}');
于 2013-07-24T20:43:18.020 に答える
8

既に述べたように、一連のカスタム スタイルの設定方法を説明するページがあります。そのページに隠されている小さな宝石 (そしてあまり明確ではない) は、名前付きのスタイルのセットを作成するのではなく、次のように構成内でスタイルをインラインで定義できることです。

    stylesSet : [
    {
        name : 'Green Title',
        element : 'h3',
        styles :
        {
            'color' : 'Green'
        }
    } ],
于 2012-02-22T17:11:53.893 に答える
6

最良の方法は、このプラグインを使用することです: 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 の外部にある Webroot 内の独自の css フォルダーへのパスです。これにより、CSS と JavaScript を混在させる必要がなくなります。

于 2014-03-05T04:07:34.320 に答える
5

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

于 2011-01-24T20:14:03.613 に答える
-8

これよりも良い答えについては、@metavidaの答えを見てください

<script type="text/javascript">

    CKEDITOR.replace( 'editor1',{

          uiColor : '#9AB8F3',
          stylesSet.add('default', [
               { name: 'My Custom Block', element: 'h3', styles: { color: 'Blue'} },
               { name: 'My Custom inline style', element: 'q'}
          ]);    
    });

</script>

ただし、これを複数の場所で使用している場合は、これを stylescombo\styles\default.js ファイルに入れて、API に従って config.js ファイルを更新することを検討することをお勧めします。

于 2010-03-29T14:51:35.000 に答える