百度富文本编辑器

在正面写下:

多功能文本编辑器(MTE)是一种可以嵌入浏览器的文本编辑器，所见即所得。

UEditor是一个由FEX前端RD团队开发的所见即所得的富文本网页编辑器。它轻量级，可定制，注重用户体验。开源基于MIT协议，代码可以自由使用和修改。

效果如图所示:

01先去官网下载ueditor包。

官方网站:file/tupian/20220813/ var form = la yui . form；//实例化编辑器var ue = UE.getEditor//var content = UE . get content；//console . log//monitor submission form . on '，函数{console.log返回false});});

几个注意事项:

注意la ui . CSS和la ui . js的正确介绍

介绍ueditor需要的js文件。注意，介绍的顺序必须是。然后先配置。全部。其他js文件可以引入也可以不引入，不引入会自动调用，主要是config和all，要按顺序引入！

实例化编辑器:

var ue = UE.getEditor//id放在这里

直接用浏览器打开这个文件，可以看到如下图所示的效果。

但是注意，这里介绍的js文件的路径是一个完整的路径。

04整合到springboot项目中

基本步骤和上面的静态集成差不多，只不过上面的只需要打开静态html页面就能看到效果。接下来我们要做的就是将ueditor整合到整个项目中，也就是在项目运行后加载页面。

第一步是将整个解压缩文件放在静态目录中。

第二步是集成html页面

首先介绍js文件。

有个坑要小心！

因为Springboot默认的静态资源路径是静态的，我们不需要添加/static/前缀，所以需要使用正确的方式引用它，否则会导致404问题。

也就是说，如果在我们的path中多写static，用相对路径来获取js文件，可能就找不到了。

示例:../static/UEditor/ueditor.all.js

然后把ueditor放到需要放的地方。

例如:

最关键的一步。

！！！！！！

如果你按照上面的步骤运行，你会发现它仍然会失败，因为在静态加载和运行项目后的加载之间，ueditor的运行状态是不同的。我来介绍一下ueditor的运行方式。

首先，当我们静态加载这个插件的时候，会发现路径看起来是这样的:也就是说，我们可以看到localhost后面总是跟着项目的完整路径！

！[图片-20220610232118981]

所以我们只在这个插件中引入了两个js文件。其他文件是如何运行的？

我们可以打开config.js文件了解一下！

所以不难发现这个插件是这样工作的:

加载两个引入的js文件，获取其他文件的访问路径，如jsP文件夹、css文件等。，通过JS文件。

通过path access加载其他文件，完成整个插件的部署配置！

让我们打开jsp文件夹看一看:

虽然我不太明白这些是什么，但我大概能猜到这个文件可能和上面分析的调用其他资源有关。

我们来验证一下这个猜想。我们先来静态的看一下:

打开F12调试查看

所以我们可以通过这个jsp文件大致确定需要调度的其他文件。

好了，说完上面的过程，我们来分析一下静态和动态的区别，也就是为什么项目运行与否会影响ueditor的加载？

其实原因很简单。问题出在访问路径上！

在静态方式下，访问路径是固定的本地路径，所以不存在配置问题。但是当你的项目运行的时候，比如springboot项目有项目的路径，如果你不告诉ueditor它在哪里，就没办法用jsp调用其他资源！

下面两张图告诉你区别:能不能看到同一个jsp？，但是前面不一样，导致如果不配置前面的路径，一定找不到ueditor的其他资源！

静态页面

http://localhost:63342/science/static/UE editor/JSP/controller . JSP action = config noCache = 1654874890533

项目运行后的访问路径。

http://169 . 254 . 208 . 81:8008/u editor/JSP/controller . JSP action = config noCache = 1654875217963

Ueditor为我们提供了一种配置该路径的便捷方式，只需在html文件的开头添加下面的句子，在这里您可以引用插件:

再次运行项目后，可以看到ueditor的正常显示！好了，我们分享完了。希望对大家有帮助！

请看好赞，养成习惯！

作者:可靠的杨

原文链接:file/tupian/20220813/16365016.html