作業中のサイトに CLeditor をセットアップしました。現在、エディター内で入力して編集すると、そのすぐ上に結果のライブプレビューが表示されるように設定しています。これは、StackOverflow の質問を入力するときに得られるものとよく似ていますが、より基本的です。
iframe コンテンツの内部 HTML をページの別の場所にコピーするだけで機能します。しかし、私は厄介な問題に遭遇しました。配置ボタン (左、中央、右) を使用すると、align="right"
たとえば、選択したテキストに属性が追加されます。エディターでは機能しますが、ページ自体では機能しません。おそらく、その属性はほとんど廃止されているためです。
...
この質問を入力しているときに、この問題を回避する方法を実際に見つけました。それでも、この質問を私の解決策とともに投稿します。さらに、これに追加する関連する質問があります。
もともと、次の CSS をページに適用しようとしました。
div[align="right"] {
text-align:right!important;
}
これは最初にデータをページにロードするために機能しましたが、エディターで配置を動的に変更している間、ライブ プレビューは変更を反映していませんでした。これは、スタイルがロード時にのみ適用されるためだと最初は思いました。
私はそれよりもよく知っているので、それは脳のおならでした。本当の問題は、DIV 要素を選択していて、align 属性が必ずしも DIV に適用されていないことでした。に変更div[align="right"]
すると*[align="right"]
完全に機能します。
ただし、この特定の問題の回避策を見つけたにもかかわらず、cleditor が iframe の HTML 出力をどのように構築するのか、まだわかりません。属性はコードのどこalign
から来て、どのようにしてそれ (および他のすべての要素/属性) を HTML に配置することを知っていますか? align
これを操作する方法があれば、非推奨のHTML 属性ではなくインライン CSS を配置に使用するように単純に指示できます。cleditor の組み込みの「useCSS」機能を有効にしたくないことに注意してください。
共有できる情報に感謝します。最初の問題をすでに解決したという理由だけで、この質問に反対票を投じないでください。他の人が同じ問題に遭遇した場合、これが他の人を助けることができるようにしたい. (回答として回答も投稿します)。