ueditor1_4_3_3编辑器的应用

教程使用的是ueditor1_4_3_3版本。

首先到官网http://ueditor.baidu.com/website/download.html下载jsp  utf-8版

下载好以后,解压,把解压文件夹命名为ueditor

然后把ueditor目录整个复制到webapp下

在自己需要编辑器的页面引入ueditor的js

在body中:

<head></head>中:

<script type="text/javascript">
            //实例化编辑器
            //建议使用工厂方法getEditor创建和引用编辑器实例,如果在某个闭包下引用该编辑器,直接调用UE.getEditor('editor')就能拿到相关的实例
            var ue = UE.getEditor('editor');
</script>

 

把ueditor/jsp/lib下的jar包全部添加到项目里。

另外还需要一个jar包,此处在pom.xml配置了:

    <dependency>
        <groupId>javax.servlet</groupId>
        <artifactId>servlet-api</artifactId>
        <version>2.5</version>
    </dependency> 

然后在ueditor.config.js中找到,zIndex : 900  并去掉注释,  修改值为  999999

修改附件上传目录:

部署,去掉部署项目名:

 

保存以后要展示时,在需要代码高亮的页面配置:

 还要把后台取数据的ajax变为同步加载!

需要展示的时候自动换行在相应css添加下面代码即可:

 

 

编辑器中添加代码是 背景色 修改:

 

 

编辑器中图片自适应:

iframe.css中添加

/*可以在这里添加你自己的css*/
img {
    max-width: 100%; /* 图片自适应宽度 */
}

body {
    overflow-y: scroll !important;
}

.view {
    word-break: break-all;
}

.vote_area {
    display: block;
}

.vote_iframe {
    background-color: transparent;
    border: 0 none;
    height: 100%;
}

 

 

 

 

一些技巧:

uuditor常用的js函数在ueditor/index.html里面能找到,比如获取编辑框里面的内容等等。

 

注意如果上传到服务器html源码数据库表字段是用longtext接收的,那么此jar包要换到1.4及以上版本,不然会报错

 

posted @ 2016-07-14 16:52  007少侠  阅读(959)  评论(0编辑  收藏  举报
友情链接:便宜vps(CN2GIA线路)
站长统计: