■ユーザーズフォーラム リニューアルのお知らせ
新規投稿は新ユーザーズフォーラムにお願いします。

CKEditorでプルダウンメニューでclassを指定する方法

konosuba > CKEditorでプルダウンメニューでclassを指定する方法 @ 2017/8/4 9:52
お世話になります。初心者ですが楽しく活用させていただいているものです。

CKEditorでページ編集をしているのですが、「WISYWIG」的にプルダウンメニューで「class指定」できないものかと試行錯誤しています。

<h2>見出し</h2>

 ↓これを実現したい「ソース編集なしで」
<h2 class="kasen">見出し</h2>


参考にCKEditorの情報サイトで

例えば、CSSファイルに
.kasen  {
border-bottom: solid 3px black;
}


テーマフォルダ
/theme/bc_sample/js/admin/vendors/ckeditor/内のstyles.js
{ name: 'h2_kasen',element: 'h2', attributes: { 'class': 'kasen' } },


を追加することで、スタイルのプルダウンに「h2_kasen」が追加。
選択することにより容易にクラス適用ができる。

と、なると考えていたのですが、実際にしてみると反映されず。

BaserCMSの仕様だとこの方法かと

「BaserCMS」-「システム設定」-「サイト基本設定」の
「エディタ設定関連」 - 「エディタスタイルセット」に
#h2_kasen
h2 {border-bottom: solid 3px black;}

を記述すると「スタイル」のプルダウンに[h2_kasen(h2)]が追加されています。

ただし、この方法だとclass="kasen"とはなりません。

「エディタスタイルセット」にclassを指定できる記述方法があれば、その方法が知りたいのです。

■ BaserCMSのバージョン:4.0.5.2
■ レンタルサーバー名:さくらスタンダードプラン
■ スマートURLの利用: [ON]
■ 設置フォルダ: [サブフォルダ]
■ 利用しているデータベース: [SQLite]
■ PHPスキル(自己評価): [E]

現状ソース編集でclassを指定していると思われますが、もっと簡単にclass指定できれば作業が効率化するのではと思います。

私が気づいてない事も考えられますので。今回投稿させていただきました。
宜しくご教授お願いいたします。
macchaka > Re: CKEditorでプルダウンメニューでclassを指定する方法 @ 2018/10/31 10:11
私もこれを知りたいのですが、情報はありますでしょうか。

検索する限り、次の情報しか得られていません。
https://basercms.net/functions/editor_styleset
seto > Re: CKEditorでプルダウンメニューでclassを指定する方法 @ 2018/10/31 13:11
こんにちは

CKEditorのスタイルにクラスをセットするには、以下のようにattributesにclassをセットする必要があります。
https://qiita.com/chan_kai_chan/items/d536794cb21697210260

ただ、baser自体がCKEditorのattributesという項目に対応していないので、プラグインを作成するなどして、何かしらカスタマイズが必要です。
https://github.com/baserproject/basercms/blob/1a10e8f1af9be87c53f2e56ef89598dc7c52e79d/lib/Baser/Vendor/CKEditorStyleParser.php#L64
ログイン
ユーザー名:
パスワード:


  新規登録 / パスワード紛失

検索

facebook
フォーラムで悩みが解決した場合など、よかったら「いいね!」をポチっとクリックしてください!質問の回答者や開発者の励みになります

フォーラムガイド


関連リンク

オンライン状況
22 人のユーザが現在オンラインです。 (21 人のユーザが フォーラム を参照しています。)

登録ユーザ: 0
ゲスト: 22