1

ユーザーにテキスト、画像、ビデオを追加する選択肢を与える UI (wordpress プラグイン用) を作成しました (これを,divと呼びましょう)。divcontainer

私はかなり長い間それに取り組んできました。私は最近tinyMCE(WYSIWYGエディター) を追加して、 内にテキストを追加しcontainerました。

今、私は大きな過ちを犯したことに気づきました。ユーザーが書き込むテキストは、wp 管理パネル用に定義された CSS ルールによって上書きされています。

例えば、

ユーザー<h1>Hello</h1>が (tinyMCE の助けを借りて) 入力し、tinyMCE からそのコンテンツを取得して、container.

しかし、ここで問題が発生します。wordpress の admin css は、次のような css ルールを持つことができます。

h1 {
 color : #d6d6d6;
 line-height: 40px;
 font-size: 30px;
}

したがって、tinyMCE と my では見た目が異なりcontainerます。(tinyMCE のコードは内部にiframeあり、wordpress の css ルールの影響を受けないままですが、私はそうではありませんcontainer)

container内部の要素が wordpress の管理 CSS の影響を受けないようにする必要があります。

私は良い解決策が中に入れられることを知っていcontainerますiframe。しかし、私は のことを考えずにたくさんのコードを書きiframeましたiframe。クロス ブラウザの問題が発生する場合があります。

一部のワードプレス ルールをリセットできますが、ユーザーが何かを入力する可能性があるため、失敗することがあります。私は完全な証拠が必要です。

4

3 に答える 3

1

特定のルール（あなたが言及したh1ルールなど）を元に戻したい場合は、cssを使用してより具体的にオーバーライドすることができます。

.container h1 {
    color:#000000;
    line-height: 24px;
    font-size: 24px;
}

これにより、指定された値で言及したcssルールが上書きされますが、要素がコンテナクラス内にある場合のみです（使用したいデフォルト値を推測しています）。

残念ながら、wordpress の管理者 css が変更するすべてのものに対して取り消しルールを追加する必要があります。

于 2013-04-02T18:33:42.310 に答える
1

CSS ドキュメントで !important を使用します。この方法では、インライン スタイルを含むすべてのものよりも優先されるため、CSS がオーバーライドされることはありません。

h1 {
    color:#ff0 !important;
}
于 2013-04-02T18:50:18.870 に答える