SpringMVC + summernote implémente un éditeur visuel

Cet article partage avec vous une explication détaillée du fonctionnement de l'éditeur visuel implémenté par SpringMVC + summernote. Le contenu est assez bon, j'espère qu'il pourra aider les amis dans le besoin. Cette fois, nous nous concentrerons sur l'éditeur Summernote intégré sous le framework springmvc : comme suit

Cet éditeur est similaire à l'éditeur de la plateforme Zhihu et peut être contrôlé par vous-même dans les contrôles liés à JS Control dans le fichier.

Cette version summernote est : /* ! Summernote v0.8.1 | (c) 2013-2015 Alan Hong et autres contributeurs |/

avec la version actuelle La méthode de la version du site officiel est fondamentalement la même. Tout d'abord, concernant l'éditeur visuel d'été, le site officiel est https://summernote.org/

Le problème a été résolu. le temps est :

1. Lors du téléchargement d'images dans l'éditeur, vous devez réécrire la méthode onImageUpload dans le js. Cependant, sur Baidu et d'autres plateformes, parce que la version de summernote utilisée par de nombreuses personnes est trop ancienne, en conséquence, de nombreux problèmes sont survenus pendant mon travail, et ils ont finalement été résolus sur l'API, la démo et GitHub du site officiel. Merci beaucoup pour le partage !

2. Après avoir téléchargé l'image dans l'éditeur, si vous ne voulez pas l'image après le téléchargement, ou vous souhaitez remplacer l'image, lors de la suppression de l'image dans la zone d'édition, l'image téléchargée dans le fichier local sera supprimée simultanément. (La solution est la suivante : dans le fichier de contrôle Summernote, ajoutez AJAX sous la méthode RemoveMedia pour spécifier l'url en arrière-plan et envoyer le nom de l'image. Si la ressource locale possède le fichier, supprimez-le)

Ensuite, nous expliquerons étape par étape comment configurer l'éditeur Summernote et comment le réécrire

Section 1 : Installation et téléchargement et configurer l'éditeur visuel Summernote

Ouvrez le site officiel, comme indiqué dans la figure

Cet éditeur est relativement simple et facile à utiliser. Si vous aimez quelque chose de plus puissant et complexe, vous pouvez envisager l'UE ou l'UM de l'équipe Baidu.

Nous choisissons ce qui précède Mise en route

pour obtenir les fichiers qui doivent être chargés par l'éditeur. Vous pouvez utiliser un. variété de méthodes Pour charger, j'utilise la configuration de téléchargement direct

Bien sûr, vous pouvez également utiliser directement le 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>

Ce La page est liée Vous pouvez vous référer à la démo et à l'API de base par vous-même

À ce stade, notre installation Summernote correspondante est terminée. Ensuite, vous pouvez choisir d'utiliser la démo directement pour effectuer une vague d'opérations intéressantes<.>

Ensuite, nous expliquons comment intégrer le projet springmvc

Section 2 : Intégration de springmvc

Suivant , nous ouvrons d'abord notre propre projet et mettons directement le code HTML pertinent dans votre propre couche de vue et accédons à la vue via le chemin. Le mien est :

Le code JavaScript pertinent est : (. les rappels sont de nouvelles fonctions, veuillez consulter pour plus de détails le fichier principal summernote.js, tirez-le vers le bas)

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

Il y a 3 fichiers chargés dans mon JS :

zh- CN est un fichier chinois, si nécessaire Convertissez la langue, sortez le dossier lang téléchargé, chargez-le et ajoutez le code final

dans summernote.js ou summernote.min.js Modifiez simplement l'introduction par le fichier de langue dont vous avez besoin.

Ici, nous avons placé l'éditeur dans notre propre projet

Section 3 : Introduire les packages jar pertinents et configurer le fichier principal springmvc.xml

1. Nous devons d'abord mettre les deux jars suivants dans le répertoire lib de notre projet

2. 

3. Configurez le fichier 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>

Ensuite, nous commençons à écrire le code d'exécution lié au téléchargement d'images dans notre couche de contrôle/fichier de contrôle d'action

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!