SSM项目配置UEditor <一>

下载和初步搭建UEditor富文本

🌰 点击下载 UEditor富文本框架(该框架为jsp utf-8版本)

🌰 将下载好的压缩包进行解压,把解压好的文件夹复制到SSM项目的Web目录下(如果复制到WEB-INF目录下,UEditor会有一个controller.jsp请求的404错误)

🌰 在spring-mvc.xml加入过滤静态资源的代码

<mvc:resources mapping="/ueditor/**" location="/ueditor/"/>

但如果在web.xml里面已经加入了过滤静态资源的代码,可以省略这个步骤,可以自行测试一下。

🌰 引入jar包

在pom.xml文件中加入

<!-- 文件上传 -->
        <dependency>
            <groupId>commons-fileupload</groupId>
            <artifactId>commons-fileupload</artifactId>
            <version>1.3.3</version>
        </dependency>

        <!-- https://mvnrepository.com/artifact/org.json/json -->
        <dependency>
            <groupId>org.json</groupId>
            <artifactId>json</artifactId>
            <version>20171018</version>
        </dependency>

        <dependency>
            <groupId>commons-io</groupId>
            <artifactId>commons-io</artifactId>
            <version>2.6</version>
        </dependency>
        <!-- https://mvnrepository.com/artifact/commons-codec/commons-codec -->

        <dependency>
            <groupId>commons-codec</groupId>
            <artifactId>commons-codec</artifactId>
            <version>1.11</version>
        </dependency>

        <dependency>
            <groupId>com.baidu.ueditor</groupId>
            <artifactId>ueditor</artifactId>
            <version>1.1.2</version>
        </dependency>

但是ueditor这个jar包在Maven中央仓库并不存在,需要自行手动加入
- 方法一
在ueditor/jsp/lib 目录下打开命令窗口,运行下面代码

mvn install:install-file -Dfile=ueditor-1.1.2.jar -Dpackaging=jar -DgroupId=com.baidu.ueditor -DartifactId=ueditor -Dversion=1.1.2
  • 方法二
    IDEA编译器的小伙伴们可以右键ueditor.jar,点击‘Build Module ‘Project_Name’’选项
    Build好jar包后,切记打开Project Structure -> Artifacts 将新添加好的jar包引入到lib目录下,防止出现因jar未导入Tomcat部署文件夹导致系统出现错误,无法正常使用!

🌰 创建测试文件 TestUEditor.html

  • 引入相应的js文件 (js路径不一样的记得调整一下)
<script type="text/javascript" charset="utf-8"
       src="/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8"
     src="/ueditor/ueditor.all.min.js"></script>
<!--建议手动加在语言,避免在ie下有时因为加载语言失败导致编辑器加载失败-->
<!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型,比如你在配置项目里配置的是英文,这里加载的中文,那最后就是中文-->
<script type="text/javascript" charset="utf-8"
        src="/ueditor/lang/zh-cn/zh-cn.js"></script>
  • 加入ueditor初始化的代码,放在head内部
<style type="text/css">
    .clear {
        clear: both;
    }
</style>
<script type="text/javascript">
    $(function () {
        var ue = UE.getEditor('content');   
    });
</script>
  • 在页面的相应的位置引入富文本
<script type="text/plain" id="content"></script>

🌰 对ueditor/jsp目录下的config.json进行修改

添加图片访问路径前缀,否则会导致无法上传文件。如果你的项目名已经隐藏(即localhost:8080为你这个项目的根目录)可无需添加。

🌰 SSM项目配置UEditor二

暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇