java web项目中使用百度编辑器UEditor

最新推荐文章于 2024-08-03 11:42:39 发布

唯重

最新推荐文章于 2024-08-03 11:42:39 发布

阅读量4.8k

点赞数 4

分类专栏： jsp 前端杂烩 ueditor 文章标签： java web 富文本编辑器 UEditor

本文链接：https://blog.csdn.net/GMingZhou/article/details/77411214

版权

前端杂烩同时被 3 个专栏收录

5 篇文章 0 订阅

订阅专栏

jsp

4 篇文章 0 订阅

订阅专栏

ueditor

2 篇文章 0 订阅

订阅专栏

宽为限　紧用功　工夫到　滞塞通

项目上用到富文本编辑器，用的是百度的UEditor编辑器。第一次使用，一起来学学吧！
二话不说，下载先：http://ueditor.baidu.com/website/download.html#ueditor
这里我用的是jsp版本的，我们一起来看看。

目录结构

部署包解压后的文件目录结构如下所示

ueditor解压后的目录列表

dialogs: 弹出对话框对应的资源和JS文件
lang: 编辑器国际化显示的文件
php或jsp或asp或net: 涉及到服务器端操作的后台文件
themes: 样式图片和样式文件
third-party: 第三方插件(包括代码高亮，源码编辑等组件）
ueditor.all.js: 开发版代码合并的结果,目录下所有文件的打包文件
ueditor.all.min.js: ueditor.all.js文件的压缩版，建议在正式部署时采用
ueditor.config.js: 编辑器的配置文件，建议和编辑器实例化页面置于同一目录
ueditor.parse.js: 编辑的内容显示页面引用，会自动加载表格、列表、代码高亮等样式,具体看内容展示文档
ueditor.parse.min.js: ueditor.parse.js文件的压缩版，建议在内容展示页正式部署时采用

引入资源文件

<script type ="text/JavaScript"src="/admin/ueditor/ueditor.config.js"></script> 
<script type ="text/javascript"src="/admin/ueditor/ueditor.all.js"></script> 
<link rel =stylesheet href="/admin/ueditor/themes/default/css/ueditor.css">

将 jar包放到项目的 lib目录下
这里写图片描述

主体内容

<form action ="/main/ueditor" method="post"> 类别：

    <textarea name ="content" id="myEditor">这里写你的初始化内容</textarea> 

    <script type="text/javascript">
        // 设置UEditor根路径
        // window.UEDITOR_HOME_URL = "soluser/admin/ueditor/";

        UE.getEditor('myEditor',{  
            // 这里可以选择自己需要的工具按钮名称
            toolbars:[['fullscreen', ...]],  

            // 默认的编辑区域高度和宽度 
            initialFrameHeight:500,
            initialFrameWidth:1100,

            //关闭elementPath
            elementPathEnabled:false
            // 更多其他参数，请参考ueditor.config.js中的配置项  
        }) 
    </script> 

    <input type="submit" value="提交" />

    </form>

把容器放到form表单里面，设置好要提交的路径，它的内容是保存到textarea里的。js 通过UE.getEditor(a,b)这个方法加载编辑器主体，这里有两个参数 a 指定textarea 通过id指定。b 指定一些用户自定义的配置，是一个数组，其中这里的toolbars表示需要的工具按钮名称。前端页面配置看这里：http://fex.baidu.com/ueditor/#start-config

现在例子中后台就一个传递作用，我这里用的是spring mvc

/**
 * UEditor
 */

@RequestMapping(value = "/ueditor")
public String ueditorShow(HttpServletRequest request, HttpServletResponse response) {

    String attribute = request.getParameter("content");

    System.out.println(attribute);
    request.setAttribute("content", attribute);
    return "/show";
}

显示页面

</head>

<body>

    <br> 内容为：
    <br />
    <divid="showContent"> ${requestScope.content}
    </div>
</body>
</html>

啥也不需要，只需将传递过来的content 接住显示出来就OK！

test !

编辑页面
这里写图片描述

显示页面
这里写图片描述

遇到的问题

以上看是简单，却搞了我一上午。下面分享一下我遇到的问题吧 √
其实也就一个，就是图片上传了编辑器了不显示，现在回想看看是个非常简单的问题，认真看看文档就可解决的，but我还是自己调试找到的。。。 这里写图片描述

dbug ing…
这里写图片描述
发现问题：没有项目名！！！

这里请求图片时报错了！
这里写图片描述

调试后发现原来这里要配置返回路径前缀
这里写图片描述

这里写图片描述

嗯，这里加上去了
这里写图片描述

靠！问什么会有两项目名称？？？
这里写图片描述

后来发现是路径问题，在项目名称前加了个 /
这里写图片描述

这就OK了，图片也可以获取了，之前是一直没有项目名称的
这里写图片描述

OK!
这里写图片描述

官方文档，路径配置：http://fex.baidu.com/ueditor/#server-path

还有个问题

上传图片时打开文件夹的延迟问题，点击上传图片弹窗打开慢问题。

解决：
针对多图片上传，将/ueditor/dialogs/image/image.js 文件下的以下代码

accept: {
             title: 'Images',
             extensions: acceptExtensions,
             mimeTypes: 'image/*'
         },

改为：

accept: {
             title: 'Images',
             extensions: acceptExtensions,
             mimeTypes: 'image/gif,image/jpeg,image/png,image/jpg,image/bmp'
         },

针对单图片上传，将/ueditor/ueditor.all.js or /ueditor.all.min.js (根据自己引用的文件来确定) 文件下的以下代码

accept="image/*"

改为：

accept="image/gif,image/jpeg,image/png,image/jpg,image/bmp"

站在巨人的肩膀上

本篇博文参考的文章
http://fex.baidu.com/ueditor/
http://blog.csdn.net/ds296904320/article/details/45173219
http://blog.csdn.net/daleiwang/article/details/25001431
http://www.cnblogs.com/zhwl/p/3584363.html
http://www.cnblogs.com/tonnytong/p/6738399.html

唯重

关注

4
点赞
踩
13

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

java web项目中使用百度编辑器UEditor

宽为限 紧用功 工夫到 滞塞通

目录结构

引入资源文件

主体内容

显示页面

test !

遇到的问题

还有个问题

站在巨人的肩膀上

宽为限　紧用功　工夫到　滞塞通