Use the rich text editor UEditor (open source text editor plugin) in the project

Step 1: Download all files needed by UEditor

The JSP-UTF-8 version is used here

Download link: http://ueditor.baidu.com/website/download.html

Step 2: Unzip the downloaded file to the project web directory

Step 3: Copy the five jar packages in the /jsp/lib directory under the folder to the WEB-INF/lib in the project, and add them to the project structure

Step 4: Modify ueditor.config.js

        将var URL = window.UEDITOR_HOME_URL || getUEBasePath();

        Modify to var URL = "/project name/utf8-jsp/";

Step 5: Modify the image upload path prefix - jsp/config.json in the UEditor directory

        Change the "" after imageUrlPrefix to "/project name"

        The image upload path can be changed or not

Step 6: Test index.html to see if the text editor can be displayed on the web page normally

Step 7: Load UEditor into the web page

        Step 1: Add the following two lines of code to the page where the text editor is to be added, and import the configuration and source code files of the text editor

<!-- config file -->
<script type="text/javascript" src="/CMS/utf8-jsp/ueditor.config.js"></script>
<!-- Editor source file -->
<script type="text/javascript" src="/CMS/utf8-jsp/ueditor.all.js"></script>

        Step 2: Introduce the text editor with the following code

<div align="center">
        <textarea id="newsEditor" name="content" style="width: 300px;height: 200px"> </textarea>
        <br/>
        <script type="text/javascript">
            UE.getEditor ('newsEditor');
        </script>
</div>

         This method is to first create a text area as a container, and then replace it with a text editor. If you want to display the existing content, you can add it in the textarea tag and anti-tag

Step 8: Open the editing page, test whether the text editor can be displayed normally, and test whether adding pictures in the text can be uploaded to the corresponding directory of the corresponding project on the server. If so, UEditor can be used normally.