ckeditorにスタイルをロードする方法は？

Question

スタイルシートのスタイルをckeditorのスタイルリストに読み込むにはどうすればよいですか？

可能ですか？

私はconfig.jsのファイルでこれを入れて試してみましたが、それは多分Imは右のスタイルシートに自分のスタイルを作成していない

config.extraPlugins = 'stylesheetparser'; 
config.contentsCss = '/css/style.css'; 

編集者リストに任意のスタイルをロードdoesntの？何か不足していますか？

Answer 1

はい、可能です。あなたはこのURLたとえば

http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Styles

から詳細な情報を見つけることができます。

まず、プラグイン/スタイルでCKEDITOR.stylesSetに「my_styles」CSSスタイルを追加/ plugin.js

次のコードは、サンプルのスタイル定義を登録する方法を示しています。

CKEDITOR.stylesSet.add('my_styles', 
[ 
    // Block-level styles 
    { name : 'Blue Title', element : 'h2', styles : { 'color' : 'Blue' } }, 
    { name : 'Red Title' , element : 'h3', styles : { 'color' : 'Red' } }, 

    // Inline styles 
    { name : 'CSS Style', element : 'span', attributes : { 'class' : 'my_style' } }, 
    { name : 'Marker: Yellow', element : 'span', styles : { 'background-color' : 'Yellow' } } 
]); 

定義が完了したら、stylesSet設定を使用して新しく登録されたスタイルを適用するようにエディタに指示する必要があります。これは、例えば、config.jsのファイル内で設定することができる。

config.jsの

config.stylesSet = 'my_styles'; 

Answer 2

それはそれのstyle.cssファイルの内容によって異なります。 （あなたはそれをカスタマイズする必要があります）

p.red { color:red; padding:1em } 

しかし、これらの他のものはプラグインが認識されません。スタイルシートパーサプラグインは、あなたがこれを使用することができますので、要素とクラスの両方を指定したルールのみを使用しています

p {color:red; padding:1em} 
.red {color:red; padding:1em} 
#red {color:red; padding:1em}