springboot integration ueditor Baidu detailed tutorial rich text editor

The authors recommend using the layer editor, more beautiful, the document addresses
https://www.layui.com/doc/modules/layedit.html
first step: the official download ueditor
https://ueditor.baidu.com/website/download .html (ueditor Download)
GitHub project addresses https://github.com/yssyhw/springboot, after downloading, run visit http: // localhost: 8080 / admin / test ( to prevent you bother to look, I directly to the project source code, which is a simple case, the following is what I use to do their own project tutorials, so the Road King is not the same as a direct download please note that modification Road King)
If you do not come out to add my QQ: 1023732997

demo download link to download and run, visit localhost: 9090 to

Here Insert Picture Description
Decompression, into the project directory under static
Here Insert Picture Description
second step: introducing to the front page

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/admin/ueditor/ueditor.config.js"></script>
    <script src="/admin/ueditor/ueditor.all.min.js"></script>
    <script src="/admin/ueditor/lang/zh-cn/zh-cn.js"></script>
    <script src="/ueditor/ueditor.all.js"></script>
</head>
<body>
<textarea name="content" id="content" style="min-height: 500px"></textarea>
</body>
<script type="text/javascript">
    UE.getEditor('content');

</script>
</html>

Effects Photo Gallery with pictures of their own projects
Here Insert Picture Description
Step Three: Edit the source code because the official is JSP, so after the introduction of image upload and some features are not available: Note that each step is focused on the following
1. modify ueditor.config .js, to prevent people too lazy to write their own, for everyone posted about the code
var server_url window.location.protocol + = "//" + window.location.hostname + ":" + window.location.port
server_url + "/ config": serverUrl
Here Insert Picture Description
modified
Here Insert Picture Description
2. Add a ServerController (be sure to build a single, do not write in other Controller)
Here Insert Picture Description
Code:

@Controller
public class ServerController {
    @RequestMapping(value = "/config")
    public void config(HttpServletRequest request, HttpServletResponse response) {
        response.setContentType("application/json");
        String rootPath = ClassUtils.getDefaultClassLoader().getResource("").getPath() + "static/ueditor/jsp";
        try {
            response.setCharacterEncoding("UTF-8");
            String exec = new ActionEnter(request, rootPath).exec();
            System.out.println(exec);
            PrintWriter writer = response.getWriter();
            writer.write(new ActionEnter(request, rootPath).exec());
            writer.flush();
            writer.close();
        } catch (IOException e) {
            e.printStackTrace();
        }
    }`
注意:
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190705113706361.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjE4NjY0,size_16,color_FFFFFF,t_70)
ActionEnter类是ueditor里一个jar包的,添加以下依赖
 <dependency>
            <groupId>com.gitee.qdbp.thirdparty</groupId>
            <artifactId>ueditor</artifactId>
            <version>1.4.3.3</version>
        </dependency>

Here Insert Picture Description
If the problem still rely Please add two more shots in the extra
point will find that the console is not reported back-end configuration errors, can click on a single map upload, file upload, multi-map can also choose to upload files
Here Insert Picture Description
, but still after clicking the picture does not display properly in the editor,
the last step: modify config.json
Here Insert Picture Description
fill in all the pictures access path prefix "/ ueditor / jsp", about seven or eight places, or multi-map upload, file upload is not allowed to use those
final effect
Here Insert Picture Description
Here Insert Picture Description
Here Insert Picture Description
if you have to help open Taobao search shop, double-click on concern the future of energy

Published 63 original articles · won praise 25 · views 20000 +

Guess you like

Origin blog.csdn.net/qq_40618664/article/details/94721960