3

カスタムの箇条書きリストと番号リストを作成できるかどうか疑問に思っていますか?

私はプラグインの advlist を追加し、他の人が試した例をこことここで試しました。最初のものは、いくつかの変更を加えることができるようです。ただし、箇条書きリストまたは番号リストの list-style-image をカスタム イメージに置き換えようとしていますが、「スタイル」オプション「listStyleImage」は、アプリケーション コードに表示されていても機能しないようです。

また、css クラスを追加して、それが機能するかどうかを確認しようとしましたが、「classes」ステートメントも機能していないようです。

例のように init セクションを設定し、フォーマットのドキュメントのオプションに従いましたが、クラスとスタイルの「listStyleImage」の設定は機能していないようです。

クラスをhtmlコードに手動で追加するとうまくいくと確信しています。手動で行う必要がないように、カスタムリストとして設定したいと思います。

これは可能ですか？

これを達成する別の方法はありますか？

更新:今のところこれを回避するには、エディターを介して手動でクラスを html に追加する必要があります。それは動作しますが、カスタム リストを追加することでそれを行う方法があればいいと思います。

4

5 に答える 5

2

いくつかのデバッグでこれを行う方法が見つかった後、同じ問題について調査を行っているときにこの質問に出くわしました

  1. advlist プラグインをインストールして有効にする必要があります
  2. 初期化内で、高度なリスト スタイルを構成する必要があります。次に例を示します。
tinyMCE.init({...
      advlist_bullet_styles: [{
        title: 'image bullets',
        styles: {
          listStyleImage: "url('url/to/image.png')"
        }
      }, {
        title: 'Default',
        styles: {
          listStyleType: '',
          listStyleImage: ""
        }
      }, {
        title: 'Circle',
        styles: {
          listStyleType: 'circle',
          listStyleImage: ""
        }
      }, {
        title: 'Disc',
        styles: {
          listStyleType: 'disc',
          listStyleImage: ""
        }
      }, {
        title: 'Square',
        styles: {
          listStyleType: 'square',
          listStyleImage: ""
        }
      }],
      ...});

これにより、デフォルトの箇条書きスタイルとカスタム イメージ スタイルが得られます。スタイル配列は、UL 要素のプロパティを設定します。advlist_number_styles プロパティを使用して番号リストのテンプレートを設定します。

于 2015-05-27T08:36:45.310 に答える
0

これは、複数レベルの番号付けを使用した ol リストの良い例です。

例SCSS は次のようにコンパイルされます。

ol {
  list-style: none;
  position: relative;
  padding-left: 15;
  margin: 0;
}
ol {
  counter-reset: level0 0;
}
ol li::before {
  content: counter(level0,decimal) "";
  counter-increment: level0;
  position: absolute;
  right: 100%;
  margin-right: 15px;
  text-align: right;
  font-weight: bold;
  font-size: 0.8em;
}
ol li:empty + {
  counter-reset: level0 0;
}
ol li:empty::before {
  display: none;
}
ol ol {
  counter-reset: level1 ;
}
ol ol li::before {
  content: counter(level0,decimal) "." counter(level1,decimal) "";
  counter-increment: level1;
  position: absolute;
  right: 100%;
  margin-right: 15px;
  text-align: right;
  font-weight: bold;
  font-size: 0.8em;
}
ol ol li:empty + ol {
  counter-reset: level1 ;
}
ol ol li:empty::before {
  display: none;
}
ol ol ol {
  counter-reset: level2 ;
}
ol ol ol li::before {
  content: counter(level0,decimal) "." counter(level1,decimal) "." counter(level2,decimal) "";
  counter-increment: level2;
  position: absolute;
  right: 100%;
  margin-right: 15px;
  text-align: right;
  font-weight: bold;
  font-size: 0.8em;
}
ol ol ol li:empty + ol ol {
  counter-reset: level2 ;
}
ol ol ol li:empty::before {
  display: none;
}
ol ol ol ol {
  counter-reset: level3 ;
}
ol ol ol ol li::before {
  content: counter(level0,decimal) "." counter(level1,decimal) "." counter(level2,decimal) "." counter(level3,decimal) "";
  counter-increment: level3;
  position: absolute;
  right: 100%;
  margin-right: 15px;
  text-align: right;
  font-weight: bold;
  font-size: 0.8em;
}
ol ol ol ol li:empty + ol ol ol {
  counter-reset: level3 ;
}
ol ol ol ol li:empty::before {
  display: none;
}
ol ol ol ol ol {
  counter-reset: level4 ;
}
ol ol ol ol ol li::before {
  content: counter(level0,decimal) "." counter(level1,decimal) "." counter(level2,decimal) "." counter(level3,decimal) "." counter(level4,decimal) "";
  counter-increment: level4;
  position: absolute;
  right: 100%;
  margin-right: 15px;
  text-align: right;
  font-weight: bold;
  font-size: 0.8em;
}
ol ol ol ol ol li:empty + ol ol ol ol {
  counter-reset: level4 ;
}
ol ol ol ol ol li:empty::before {
  display: none;
}
ol ol ol ol ol ol {
  counter-reset: level5 ;
}
ol ol ol ol ol ol li::before {
  content: counter(level0,decimal) "." counter(level1,decimal) "." counter(level2,decimal) "." counter(level3,decimal) "." counter(level4,decimal) "." counter(level5,decimal) "";
  counter-increment: level5;
  position: absolute;
  right: 100%;
  margin-right: 15px;
  text-align: right;
  font-weight: bold;
  font-size: 0.8em;
}
ol ol ol ol ol ol li:empty + ol ol ol ol ol {
  counter-reset: level5 ;
}
ol ol ol ol ol ol li:empty::before {
  display: none;
}
ol ol ol ol ol ol ol {
  counter-reset: level6 ;
}
ol ol ol ol ol ol ol li::before {
  content: counter(level0,decimal) "." counter(level1,decimal) "." counter(level2,decimal) "." counter(level3,decimal) "." counter(level4,decimal) "." counter(level5,decimal) "." counter(level6,decimal) "";
  counter-increment: level6;
  position: absolute;
  right: 100%;
  margin-right: 15px;
  text-align: right;
  font-weight: bold;
  font-size: 0.8em;
}
ol ol ol ol ol ol ol li:empty + ol ol ol ol ol ol {
  counter-reset: level6 ;
}
ol ol ol ol ol ol ol li:empty::before {
  display: none;
}
ol ol ol ol ol ol ol ol {
  counter-reset: level7 ;
}
ol ol ol ol ol ol ol ol li::before {
  content: counter(level0,decimal) "." counter(level1,decimal) "." counter(level2,decimal) "." counter(level3,decimal) "." counter(level4,decimal) "." counter(level5,decimal) "." counter(level6,decimal) "." counter(level7,decimal) "";
  counter-increment: level7;
  position: absolute;
  right: 100%;
  margin-right: 15px;
  text-align: right;
  font-weight: bold;
  font-size: 0.8em;
}
ol ol ol ol ol ol ol ol li:empty + ol ol ol ol ol ol ol {
  counter-reset: level7 ;
}
ol ol ol ol ol ol ol ol li:empty::before {
  display: none;
}

li {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  position: relative;
}
于 2016-11-16T13:03:16.653 に答える