Préface
UEditor est un éditeur de texte enrichi open source lancé par Baidu, qui est très puissant. Je l'ai utilisé une fois lors de l'utilisation du framework SSM auparavant, et il n'y avait pas de problème.Maintenant, je suis passé à springboot.J'ai rencontré des problèmes lors de l'utilisation de la fonction de téléchargement (quels éléments de configuration sont incorrects et la fonction de téléchargement ne peut pas être utilisée), puis j'ai trouvé quelques informations, diverses, et saisies Après essai, voici une solution à titre indicatif.
télécharger
Adresse : https://ueditor.baidu.com/website/download.html
Une fois le téléchargement terminé, décompressez-le, récupérez le dossier utf8-jsp, renommez-le en ueditor et copiez-le dans votre projet springboot
(mes ressources statiques sont configuré dans le dossier statique construit sous ressources),
puis concentrez-vous sur le dossier jsp et le fichier ueditor.config.js sous le dossier ueditor (utilisé plus tard)
lib : le package jar dont uediotr dépend config.json
: l'élément de configuration principal de la fonction de téléchargement
ueditor.config.js : l'élément de configuration complet
utiliser
Ajoutez les dépendances requises à votre projet :
<dependency>
<groupId>commons-codec</groupId>
<artifactId>commons-codec</artifactId>
<version>1.9</version>
</dependency>
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.3.1</version>
</dependency>
<dependency>
<groupId>commons-io</groupId>
<artifactId>commons-io</artifactId>
<version>2.4</version>
</dependency>
<dependency>
<groupId>org.json</groupId>
<artifactId>json</artifactId>
<version>20160810</version>
</dependency>
<dependency>
<groupId>com.baidu.ueditor</groupId>
<artifactId>ueditor</artifactId >
<version>1.1.2</version>
<scope>system</scope>
<systemPath>${basedir}/src/main/resources/lib/ueditor-1.1.2.jar</systemPath >
</dependency>
Pour la référence de ueditor-1.1.2.jar, j'ai créé un dossier lib sous resources, puis j'ai copié le package jar de ueditor sous lib dans ueditor
(mais j'ai ensuite supprimé cette dépendance et découvert qu'elle pouvait être utilisée normalement , donc ce paquet jar ne peut pas être importé)
Citer l'éditeur sur la page (le mien est thymeleaf):
<script type="text/javascript" charset="utf-8" th:src="@{/ueditor/ueditor.config.js}"></script>
<script type="text/javascript" charset="utf-8" th:src="@{/ueditor/ueditor.all.min.js}"></script>
<script type="text/javascript" charset="utf-8" th:src="@{/ueditor/lang/zh-cn/zh-cn.js}"></script>
<script id="editor" type="text/plain" name="content" style="width:95%;height:450px;"></script>
Enfin instancier l'éditeur
<script>
//实例化编辑器
var ue = UE.getEditor('editor', {
});
</script>
À ce stade, vous pouvez ouvrir le navigateur pour accéder à la page comme suit :
Remarque : À ce stade, la fonction de téléchargement n'est pas normale et le problème "l'élément de configuration principal est incorrect et la fonction de téléchargement ne peut pas être utilisée " apparaîtra.
source de problème
Ouvrez ueditor.config.js et trouvez une ligne de code :
c'est-à-dire que la requête arrive, elle ira à controller.jsp, mais springboot ne prend pas en charge jsp par défaut, mais ce jsp pointe vers config.json, ouvrez config.json , le premier est la configuration associée du téléchargement d'image :
donc springboot ne peut pas accéder à controller.jsp et ne peut pas lire la configuration associée dans config.json, il signale donc une erreur.
Solution
Idée : Étant donné que springboot ne peut pas accéder à config.json via jsp, laissez-le obtenir la configuration directement dans config.json au lieu d'utiliser jsp
1. Créez une nouvelle interface de contrôleur, le contenu est le suivant
/**
* 上传配置：即不走config.json，模拟config.json里的内容，解决后端配置项不正确，无法上传的问题
* @return
*/
@RequestMapping("/ueditor/config")
@ResponseBody
public String uploadConfig() {
String s = "{\n" +
" \"imageActionName\": \"uploadimage\",\n" +
" \"imageFieldName\": \"upfile\", \n" +
" \"imageMaxSize\": 2048000, \n" +
" \"imageAllowFiles\": [\".png\", \".jpg\", \".jpeg\", \".gif\", \".bmp\"], \n" +
" \"imageCompressEnable\": true, \n" +
" \"imageCompressBorder\": 1600, \n" +
" \"imageInsertAlign\": \"none\", \n" +
" \"imageUrlPrefix\": \"\",\n" +
" \"imagePathFormat\": \"/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}\" }";
return s;
}
2. Modifiez le serverUrl dans ueditor.config.js à l'url définie ci-dessus (passez à un chemin absolu lors du déploiement)
3. Définissez votre interface de téléchargement de fichiers sur le backend (il est irréaliste d'utiliser le téléchargement fourni avec ueditor, faites attention aux paramètres de format de retour)
4. La définition frontale prend en charge le téléchargement personnalisé (modifié par un chemin absolu lors du déploiement)
UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
UE.Editor.prototype.getActionUrl = function(action) {
if (action == 'uploadimage'){
return '/demand/upload'; /* 你自己的图片上传action */
}else{
return this._bkGetActionUrl.call(this, action);
}
};
À ce moment, visitez à nouveau la page, cliquez sur l'image à télécharger et il n'y aura pas d'erreur (l'arrière-plan utilise String pour recevoir le contenu et l'URL de votre image est enregistrée) 5. L'éditeur de la barre d'outils personnalisée peut personnaliser la barre d'outils
requise
, et la valeur par défaut est de tout afficher , mais en pratique, il peut être personnalisé selon les besoins. Je n'ai pas de fonctions telles que le téléchargement de vidéos ici, il peut donc être supprimé.
Document officiel : http://fex.baidu.com/ueditor/#start-toolbar
Voici ce que j'ai projeté :
Jusqu'à présent, springboot a été complété à l'aide de ueditor, et vous pouvez vous y référer si vous en avez besoin. vous être utile.