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でWebアプリをいちから作れるようになりたい!」

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

詳細はこちらをクリック

【個別サポート実施中】

「本ブログに記載の方法を試してみたけれど、うまくいかない」「コードを見てほしい」という方のために、有償でメールサポートいたします。以下のボタンをクリックして相談フォームにアクセスして下さい。

詳しく見る

Twitter始めました。
スポンサーリンク
40代からプログラミング!

コメント

タイトルとURLをコピーしました