summernoteエディタにオリジナルボタンを追加する方法

Laravel とリッチテキストエディタ

summernoteを使えば、Wordpressのようなエディタを組み込めます。

Laravelとの連携も可能でできるし無料だし、うれしいことだらけ。

ですが無料なだけに、ドキュメントやサポートが手薄と言う欠点も。

じゅんこ
じゅんこ

ここはやっぱり、仕方ないとこですね

わたしは自分で調べつつ機能を搭載しておりますが、「どなたかの役に立つかも」と思ったことを備忘録もかねて、記事にしていきますね。

今回はオリジナルボタンの追加方法について。

無料のリッチテキストエディタsummernoteのボタン追加・修正

まずは、Summernoteのリッチテキストエディタを搭載しておきましょう。

方法は、別の記事で解説しています。

こんな感じでリッチテキストエディタが搭載されます。

実際のエディタサンプルは、こちら。

コードは次のとおりです。

それではこのツールバーのボタンに変更を加えていきます。

まずはsummernote側にあるボタンを利用します。

summernoteの既存ボタンを追加する方法

summernote側で用意してくれているボタンを追加してみます。

たとえば取り消し線ボタンを追加してみましょう。

コードの中の【toolbar】の部分に、 ['font', ['strikethrough']], を追加します。

するとこのように、新しくボタンがエディタに追加されました。

実際のページはこちらからご覧になれます。

summernoteのツールバーで使えるボタンは他にもあります。

summernote公式ページを参考にしてください。

自分でカスタマイズしたオリジナルボタンを追加する方法

次にオリジナルボタンを追加する方法を説明します。

テキストにHTMLタグを適用する

たとえば「選択した部分にオリジナルのスタイルを適用して、背景を青色にしたい」とします。

script部分に、次のようにコードを入れていきましょう。

すると次のように、希望のスタイルを適用するボタンが反映されます。

実際のエディタはこちらからご覧ください。

テキストを挿入する

単にテキストを挿入したい場合には、pasteHTMLを使います。

たとえば「こんにちは」というテキストをいれるボタンを作ってみます。

まずファイルの文字コードを shift-jisにしておきます。

script部分に、次のようにコードを入れていきましょう。

すると次のように、指定した言葉を挿入するボタンが反映されます。

実際のエディタはこちらからご覧ください。

さいごに

今回はsummernoteツールバーのデフォルトボタンを変更する方法を紹介しました。

summernote側に既にあるボタンを加えるのが一番簡単ですが、もしない場合でも、自分でオリジナルボタンを作成できます。

色々試して、自分に合ったリッチテキストエディタをつくっていきましょう♪

Laravel とリッチテキストエディタ

【Laravelの教科書・プレゼント】

Junko
Laravelの使い方を覚えたい!と思ったら、ぜひ、役立ててほしいです。 基礎編は無料でプレゼント中です♪
ひつじプログラマ
会員制サイトをいちから作っていくよ。ボタンをクリックして詳細を見てね。
Laravelの教科書の詳細を見る

最新のLaravel11版テキストに加え、Laravel8版・Laravel9版・Laravel10版もご用意しています♪

【無料プレゼント】

「LaravelでWebアプリをいちから作れるようになりたい!」

そんなLaravel初心者のあなたへ【Laravelの教科書】基礎編プレゼント中! 会員制フォーラムサイトを学習しながら作れます。

詳細はこちらをクリック

最新のLaravel11版テキストに加え、Laravel8版・Laravel9版・Laravel10版もご用意しています♪

【AWS関連・Webアプリ開発・生成AIのAPI活用のご相談承ってます】
お気軽にお声がけください。
御社にとって、最善の方法をご一緒に考えてまいります。
Zoomミーティング実施中。サンプルアプリご利用可能です。

お問合せフォーム

Laravelの本を書きました。


ひつじが目印♪
クリックするとamazonページへ。

Laravelの使い方を分かりやすく解説した書籍を出版しました。書店やAmazon等のオンラインショップにて販売中です。
Laravel10対応。Laravel11サポートガイドもご用意しています。詳しくは下記ボタンをクリック♪

書籍の詳細を見てみる

Laravelの本を書きました。


ひつじが目印♪
クリックするとamazonページへ。

最新版Laravel11用のサポートガイドご用意しています。

Laravelの使い方を分かりやすく解説した書籍を出版しました。書店やAmazon等のオンラインショップにて販売中です。

書籍の詳細を見てみる
Twitter始めました。
40代からプログラミング!
タイトルとURLをコピーしました