2016-04-06 6 views
3

ユーザが空白の編集エリアに入ったときに自動的に作成されるP elementsに適用されるデフォルトスタイルを設定しようとしています。私は何時間も答えを探していましたが、うまく動作するものは見つかりませんでした。要件は以下のとおりです。ユーザインタラクションなしのデフォルトの段落スタイルの設定

  • スタイルをインラインにする必要があり、何のスタイルシート
  • ユーザーの操作なしには、いかなる形式/スタイルプラグインはクリックしないように

ユーザ編集エリアのクリックとは、入力を開始し、スタイルを適用して自動的に表示したい。確かにこれを達成する方法がありますか?

私が得ている最も近いが、このように、htmlFilterを使用することです:

p_rule = { 
    elements : { 
     p : function(element) { 
      if (element.attributes.style === undefined) { 
       element.attributes.style = "color: #0000ff;"; 
      } 
     } 
    } 
}; 
ev.editor.dataProcessor.htmlFilter.addRules(p_rule); 

しかし、新しいスタイルが自動的に表示されません。

ユーザーがソース編集モードに入り、WYSIWYGに戻ると表示されますが、自動的にしたいと思います。

私は、フィルタ機能でupdateElement()を使用してみましたが、それは動作しませんし、無限再帰を作成します。

p_rule = { 
    elements : { 
     p : function(element) { 
      if (element.attributes.style === undefined) { 
       element.attributes.style = "color: #0000ff;"; 
       CKEDITOR.instances['editor1'].updateElement(); 
      } 
     } 
    } 
}; 
ev.editor.dataProcessor.htmlFilter.addRules(p_rule); 

(私はupdateElement()はフィルタをトリガ推測)

私はイベントからsetData(getData())を使用している場合、私は妙例えば、フィルタが適用された変更で更新するtextareaを取得することができます:

CKEDITOR.instances['editor1'].on('blur', function() { 
    CKEDITOR.instances['editor1'].setData(CKEDITOR.instances['editor1'].getData()); 
}); 

しかし、これもユーザーとのやりとりが必要です。 "change"イベントを使用すると再帰が作成されます。

私はCKEditorで新しく、明らかに、現在テキストエリアに表示されているものとの関係でフィルタがどのように動作するかについて何か不足しています。

任意CKEditorグルーがありますか?助けて!

おかげ

答えて

1

は、私は本当にこの道を行くことはないお勧めします。 &の貼り付けをコピーした場合、書式をh1に変更して戻す場合、リスト項目を作成して段落などに変換する場合はどうなるかなど、無数の問題で戦っているでしょう。実際にそれらの数十。エディタの半分を書き直す必要があります。

CKEditorバージョン4でこれを処理する方法は、これを再考することではありません。

スタイルをインラインにする必要があり、あなたが明確にスタイルシートを使用する必要が全くスタイルシート

インサイドCKEditorバージョンに。私は出力にインラインスタイルが必要だとは思いますが。だから私が提案するものは、次のようなものです:

  1. このスタイルをすべての段落に追加するhtmlFilterルールを書きます。
  2. すべての段落からこのスタイルを削除するdataFilterルールを記述します。

データを保存してエディタに戻すと、スタイルがそれを汚染しないように、2番目のルールが必要です。

PS。 CKEditor 5は、データモデルをレンダリング(ビュー)から分離するので、他のフィーチャとの相互作用に影響を与えずに、段落をレンダリングすることができます。 this articleのCKEditor 5についてもっと読む。

関連する問題