SpringMVC + Summernote はビジュアルエディタを実装します

この記事では、SpringMVC + Summernote で実装されたビジュアル エディターの操作について詳しく説明しています。困っている友人のお役に立てれば幸いです。今回は、springmvc フレームワークの下で統合された Summernote エディターに焦点を当てます。次のように

このエディターは、Zhihu プラットフォームのエディターに似ており、JS コントロール ファイルで関連するコントロールを自分で制御できます。

今回の Summernote のバージョンは: /*! Summernote v0.8.1 | (c) 2013-2015 Alan Hon and other contributors | /

やり方は基本的に現在の正式版と同じです。 Summer Visual Editor の公式サイトは https://Summernote.org/

今回解決した問題は

1. エディターで画像をアップロードする際、onImageUpload メソッドを書き換える必要がありますjs ですが、Baidu やほとんどのプラットフォームでは、多くの人が使用している Summernote のバージョンが古すぎるため、作業中に多くの問題が発生しましたが、最終的には公式 Web サイトの API とデモ、および GitHub で解決されました。共有していただきありがとうございます!

2. エディターで写真をアップロードした後、アップロード後の写真が不要な場合、または写真を置き換えたい場合は、編集ボックスで写真を削除すると、アップロードした写真がローカルファイルも同時に削除されます。 (解決策は、Summernote コントロール ファイルで、removeMedia メソッドの下に AJAX を追加してバックグラウンドで URL を指定し、画像名を送信し、ローカル リソースにファイルがある場合は削除します)

次に、一歩を踏み出しましょう Summernote エディターの設定方法と書き換え方法をワンステップで説明しましょう

セクション 1: Summernote ビジュアルエディターをインストールしてダウンロードし、設定します

図に示すように、公式 Web サイトを開きます画像

このエディタは比較的シンプルで使いやすいもので、より強力で複雑なものがお好みの場合は、Baidu チームの UE または UM を検討してください。

上記のはじめに

を選択して、エディタでロードする必要があるファイルを取得します。私は直接ダウンロード構成を使用します

。もちろん、cdn を直接使用することもできます

<!-- include libraries(jQuery, bootstrap) -->
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script> 
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script> 

<!-- include summernote css/js -->
<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote.js"></script>

このページには関連するデモと基本的な API が含まれており、ご自身で参照できます

この時点で、関連する Summernote のインストールは完了しており、デモの使用を選択できますクールな操作の波を実行するために直接実行します

それでは、springmvc プロジェクトと統合する方法を説明しましょう

セクション 2: springmvc を統合する

次に、最初に独自のプロジェクトを開き、関連する HTML コードを直接配置しますはい、パスを介してビューにアクセスできます。私のコードは次のとおりです:

JavaScript 関連のコードは次のとおりです: (コールバックは新しい関数です。詳細については、Summernote.js コア ファイルを参照してください)。

    	$("#summernote_1").summernote({
		      //height:500 //不建议填写，如果上传图片高度比较大，编辑器则不会自动调整高度的
		      focus:true,  //启动时自动获取焦点
		      maxHeight:null,  //编辑器最大高度
		      minHeight:500,//编辑器最小高度，会跟随内容和图片大小自动调整编辑器高度
			}
	});

私のJSロードには合計3つのファイルがあります:

zh-CNは中国語ファイルです。言語を変換する必要がある場合は、ダウンロードしたlangフォルダーから取り出してロードしてください。そして最後のコードをサマーノート.jsまたはサマーノート.min.jsに入れてください

必要な言語ファイルの導入部分に変更するだけです。

ここでは独自のプロジェクトにエディタを配置しました

セクション 3: 関連する jar パッケージを導入し、springmvc.xml コア ファイルを設定します

1. まず、次の 2 つの jar を配置する必要があります lib ディレクトリに移動しますプロジェクト

2. 

3. を使用して springmvc ファイルを設定します

<!-- 配置MultipartResolver -->
     <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
     	<!-- property 一共有4个属性
     	maxUploadSize 上传的最大字节数，-1代表没有任何限制
     	maxInMemorySize 读取文件到内存中最大的字节数，默认是1024
     	defaultEncoding 文件上传头部编码，默认是iso-8859-1，注意defaultEncoding必须和用户的jsp的pageEncoding属性一致，以便能正常读取文件
     	uploadTempDir文件上传暂存目录，文件上传完成之后会清除该目录，模式是在servlet容器的临时目录，例如tomcat的话，就是在tomcat文件夹的temp目录
     	 -->
     	<property name="defaultEncoding" value="UTF-8"></property>
     	<property name="maxUploadSize" value="15728640"></property> <!-- 15MB -->
     </bean>

次に、コントロールレイヤー/アクションコントロールファイルでの画像のアップロードに関連する実行コードの作成を開始します

以上がSpringMVC + Summernote はビジュアルエディタを実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。