当前位置：首页 > article >正文

初学者如何设置以及使用富文本编辑器[eclipse版]

article 2025/2/23 17:55:48

手把手教你设置富文本编辑器

参考来源：UEditor Docs

初学者按我的步骤来就可以啦

一、设置ueditor编辑器

1.提取文件[文章最底部有链接提取方式]

2.解压文件并放到自己项目中，在WebContent目录下：

3. 修改jar包位置路径

到-->

注意：此时json还在报错，这个不用管，是因为json注释的原因。

右键，打开Properties：

如果想要使得json中注释不为乱码：修改encoding为utf-8形式并应用。

4.新建一个html页面

复制以下代码：

<!DOCTYPE HTML>
<html lang="en-US">

<head>
    <meta charset="UTF-8">
    <title>ueditor demo</title>
</head>

<body>
    <!-- 加载编辑器的容器 -->
    <script id="container" name="content" type="text/plain">
        这里写你的初始化内容
    </script>
    <!-- 配置文件 -->
    <script type="text/javascript" src="ueditor.config.js"></script>
    <!-- 编辑器源码文件 -->
    <script type="text/javascript" src="ueditor.all.js"></script>
    <!-- 实例化编辑器 -->
    <script type="text/javascript">
        var ue = UE.getEditor('container');
    </script>
</body>

</html>

由于我的项目跟解压包里的js未在一个路径内如下图：

所以根据需要修改src：

    <!-- 配置文件 -->
    <script type="text/javascript" src="utf8-jsp/utf8-jsp/ueditor.config.js"></script>
    <!-- 编辑器源码文件 -->
    <script type="text/javascript" src="utf8-jsp/utf8-jsp/ueditor.all.js"></script>

最后直接运行就可：

5.注意事项：

发现图片上传上去后无法加载出来，

需要设置一下config.json文件中的在"imageUrlPrefix": ""

填上：/*其中*需要用你设置该编辑器的母文件名代替。比如我的utf8-jsp在qcby2母文件下，则输入：

    "imageUrlPrefix": "/qcby2", /* 图片访问路径前缀 */

最后上传图片成功：

使用utf8-jsp.rar包的提取链接：
https://pan.baidu.com/s/1oiYEMfdV9Tnx2sY6dkPHuQ?pwd=rt71 提取码: rt71

二、编辑器原理

1.先在html里设置一个按钮获取我在编辑器里设置文字、图像样式的信息，完整代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="js/jquery.js"></script>
</head>
<body>
    <!-- 加载编辑器的容器 -->
    <script id="container" name="content" type="text/plain">
        这里写你的初始化内容
    </script>
    <input type="button" value='获取信息' class='btn'>
    <div class='aaa'></div>
    <!-- 配置文件 -->
    <script type="text/javascript" src="utf8-jsp/ueditor.config.js"></script>
    <!-- 编辑器源码文件 -->
    <script type="text/javascript" src="utf8-jsp/ueditor.all.js"></script>
    <!-- 实例化编辑器 -->
    <script type="text/javascript">
        var ue = UE.getEditor('container');
        
        $(".btn").click(function(){
        	console.log(ue.getContent())
        	$(".aaa").html(ue.getContent())
        })
        </script>
</body>
</html>

然后运行，打开检查，其中：

在控制台中的就是左侧信息形式的标签，通过$(".aaa").html(ue.getContent())可以再次展示到html中。

三、使用编辑器

1.编辑器常在文字添加时候使用，以我的项目为例：

可以发现在后台添加内容时，无法实现对文字格式的设置，只能输入纯文本无法添加样式。

2. （1）html：此时只要将以下代码复制到对应的add.html所需位置中

            <!-- 加载编辑器的容器 -->
		    <script id="container" name="content" type="text/plain"></script>
		    <!-- 配置文件 -->
		    <script type="text/javascript" src="utf8-jsp/ueditor.config.js"></script>
		    <!-- 编辑器源码文件 -->
		    <script type="text/javascript" src="utf8-jsp/ueditor.all.js"></script>

（2）js：对应js文件中加入以下代码即可