0

私は2つのものを持つ弾丸リストのデザインを持っています：

a。リストアイコンを置き換える青い矢印画像

b。各リストアイテムの上下にある非常に明るい点線の境界線。

これを（CKEDITOR.stylesSet）を介してCKEditorに組み込み、ユーザーがドロップダウンからこの特定のスタイルのリストを選択できるようにし、コードを記述しなくてもよいようにします。

私は特定のクラスでリストを作成できるところまで成功しました（そして今はそのテーマを持っています）が、点線と青い矢印の両方を適用する唯一の方法はCSS3を介して複数の背景を使用します。これは、サプライズとして、IE8以下では機能しません。

DOM汚染を追加した場合（つまり、リスト項目のテキストをスパンで囲んだ場合）、それをテーマにすることができます。ただし、CKEDITOR.stylesSetではスタイルごとに1つの要素しか設定できないようです（つまり、ulを要素として、またはliを要素として設定できますが、1つのスタイルを使用してULにクラスを設定し、スパン付きの子li要素のテキスト）。

それともありますか？私はこれのためにJavaScriptにフォールバックすることを考えていますが、私がしていることを達成するために他の提案も受け入れています。

ありがとう！

4

1 に答える 1

1

矢印や点線に背景画像を使用する必要はありません。CSSを介して両方を行うことができます。CKEditorで行う必要があるのは、クラスを（すでに行っているように聞こえます）に適用してから、次のようなCSSを使用することだけです。

.styled li {
    border-top: dotted 1px black;
    border-bottom: dotted 1px black;
}
.styled
{
    list-style: square url('http://www.wcb.ny.gov/site_images/blueArrow.gif')
}

完全な実例： http： //jsfiddle.net/jwynveen/ZhjCK/

于 2013-07-19T18:48:35.993 に答える