BootStrap のテキストエディタコンポーネント Summernote の使い方の詳細な説明

今回はBootStrapのテキストエディタコンポーネントSummernoteの使い方について詳しく解説します。BootStrapのテキストエディタコンポーネントSummernoteを使用する際の注意事項

について詳しく説明します。一見。

Summernote は、jquery に基づいたブートストラップの非常にシンプルな WYSIWYG オンライン エディターです。 Summernote は非常に軽量で、サイズはわずか 30KB で、Safari、Chrome、Firefox、Opera、およびインターネットをサポートしています。 Explorer 9+ (IE8 は近日サポート予定)。

特徴:

世界最高の WYSIWYG オンライン エディター

取り付けは非常に簡単です

オープンソース

カスタム初期化オプション

ショートカットキーをサポート

さまざまなバックエンドプログラム言語に適しています

Summernote公式サイトアドレス：https://

Summernote.org/

公式ウェブサイトからの例は次のとおりです:

nbsp;html>


 <meta>
 <title>Summernote</title>
 <link>
 <script></script> 
 <script></script> 
 <link>
 <script></script>


 <p></p><p>Hello Summernote</p>
 <script>
 $(document).ready(function() {
 $(&#39;#summernote&#39;).summernote();
 });
 </script>

レンダリング:

デフォルトでコンポーネントを初期化する最も簡単な方法:

コンテナを に追加します:

<p>Hello Summernote</p>

次に、Jquery を使用してコンポーネントを初期化します。 編集ボックスの高さのカスタマイズなど、コンポーネント

をカスタマイズすることもできます:

$(document).ready(function() {
 $('#summernote').summernote();
});

ツールバーをカスタマイズすることもできます:

$('#summernote').summernote({
 height: 300,   // 定义编辑框高度
 minHeight: null,  // 定义编辑框最低的高度
 maxHeight: null,  // 定义编辑框最高德高度
 });

その他の初期化設定:

lang:'zh-CN', //中国語を設定するには、中国語プラグインサマーノート-zh-CN.jsを導入する必要があります

placeholder: 'write here...',これは編集ボックス内の本文のままです。 DialogsFade：true、//ダイアログ表示効果

ダイアログフェード：
コールバック関数
もあります:

 <!--工具栏-->
  toolbar: [
  <!--字体工具-->
  ['fontname', ['fontname']], //字体系列     
  ['style', ['bold', 'italic', 'underline', 'clear']], // 字体粗体、字体斜体、字体下划线、字体格式清除 
  ['font', ['strikethrough', 'superscript', 'subscript']], //字体划线、字体上标、字体下标 
  ['fontsize', ['fontsize']], //字体大小    
  ['color', ['color']], //字体颜色
  <!--段落工具-->  
  ['style', ['style']],//样式
  ['para', ['ul', 'ol', 'paragraph']], //无序列表、有序列表、段落对齐方式
  ['height', ['height']], //行高
  <!--插入工具--> 
  ['table',['table']], //插入表格 
  ['hr',['hr']],//插入水平线  
  ['link',['link']], //插入链接  
  ['picture',['picture']], //插入图片  
  ['video',['video']], //插入视频
  <!--其它-->
  ['fullscreen',['fullscreen']], //全屏
  ['codeview',['codeview']], //查看html代码
  ['undo',['undo']], //撤销
  ['redo',['redo']], //取消撤销
  ['help',['help']], //帮助
  ],

コールバック関数のイベントには、oninit、onenter、onfocus、onblur、onkeyup、onkeydown、onpaste、onImageUpload などが含まれます。 ここでは主に、画像のアップロードによってトリガーされるイベント onImageUpload を紹介します:
画像を挿入すると、Summernote コンポーネントはデフォルトで画像をバイナリ形式で表示します。この方法でテキスト ボックスの内容をデータベースに保存すると、大量のデータベース データが生成されます

。 これは、Summernote がデフォルトで画像を挿入するときにデータベースに保存されるフィールドです:

そこで、ここでは別の方法を使用します。つまり、アップロードが成功すると、画像のアクセス アドレスが挿入された画像の場所に返され、画像が表示されます。 具体的な実装は次のとおりです。 バックグラウンド処理リクエストが成功すると、画像アクセス アドレスが返されます:

注: イメージのアップロード用の実アドレスと仮想イメージのアクセス アドレス間のマッピング関係を Tomcat の server.xml に設定したため、アップロードが成功すると、仮想アクセス アドレスがフロントエンドに返されます。 推奨事項: 将来のアドレス変更を容易にするために、実際のアップロード ルート パスをプロパティ

構成ファイル

に書き込む必要があります。同時に、仮想アクセス ルート パスはデータベースに保存せず、相対的な場所を保存して仮想パスを変更する必要があります。アクセスルートパスもプロパティファイルに記述されます。

編集ボックスの内容を取得する方法:

callbacks: {
 
 }

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

操作検索コンポーネントはキーボード上に表示されます

ES6のClassクラスのstaticメソッドを使用します

以上がBootStrap のテキストエディタコンポーネント Summernote の使い方の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。