富文本编辑器在javaweb项目中还是比较常见的,如:ckeditor、kindeditor、ueditor等。今天主要叙述的对象为ueditor,它属于百度的。闲话不多说,下面开始介绍ueditor的使用。

一、前期准备

(1)下载资源
        由于是java项目,我们去ueditor的官网下载 1.4.3.3 Jsp版本
        
        现在这个年代,表情包是必须品;为了方便用户的使用,我们还可以下载下本地表情包
        
        
(2)前期处理
        <1> 下载好的表情包需要copy到ueditor1.4.3.3-jsp里面去,具体的方法在表情包里面有使用说明。
    <2> 如果项目采用Maven构建的话,需要自己手动安装ueditor的jar包到本地仓库。我们可以打开下载的的文件,进入ueditor/jsp/lib里面看到很多jar包。这个ueditor在Maven中央仓库找不到,即使找到了也可能是别人修改过的jar包。
            
        关于怎么安装jar包到本地Maven仓库,可参考我的博客:http://www.cnblogs.com/zeng1994/p/7486330.html

二、开始实战

(1)将ueditor导入到项目中
         具体的导入参考下图
               
(2)添加Maven依赖
        具体依赖参考下图,需要注意的是ueditor的jar包是自己安装的,中央仓库没有的
            
(3)测试ueditor
    所谓的测试其实就是通过浏览器访问我们项目中的ueditor/jsp/controller.jsp?action=config
    注意:需要启动项目
    我这里直接访问:http://127.0.0.1:8888/js/ueditor/jsp/controller.jsp?action=config  这个链接因人而异,返回如下结果
          
     能返回json字符串说明jar包成功导入,且能上传文件。即文件上传的请求不会被拦截。
     注意: 如果你的富文本编辑器要支持上传图片的话,上面这个测试一定要能返回类似的json数据,否则上传不了图片。
     一般测试不成功,都是因为上传图片的请求别拦截了。可能是因为过滤器配置了个 /* 给拦截的,或者是配置了 *.jsp 

(4)页面中使用ueditor
     配置可参考ueditor文件夹下的index.html文件。当然这里就不参考了,直接来看看吧。
      <1> 在页面引入相关资源文件
<script type="text/javascript" charset="utf-8" src="${basePath}js/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="${basePath}js/ueditor/ueditor.all.min.js"> </script>
<script type="text/javascript" charset="utf-8" src="${basePath}js/ueditor/lang/zh-cn/zh-cn.js"></script>    
3
 
1
<script type="text/javascript" charset="utf-8" src="${basePath}js/ueditor/ueditor.config.js"></script>
2
<script type="text/javascript" charset="utf-8" src="${basePath}js/ueditor/ueditor.all.min.js"> </script>
3
<script type="text/javascript" charset="utf-8" src="${basePath}js/ueditor/lang/zh-cn/zh-cn.js"></script>    
      <2> 在页面中配置ueditor
          这个配置先贴代码,这段代码是js代码哦。下面再介绍
	// 配置ueditor的根路径
window.UEDITOR_HOME_URL = "${basePath}js/ueditor/";
// 实例化编辑器,'editor'其实就是textarea的id
var ue = UE.getEditor("editor",{
emotionLocalization : true // 开启使用本地表情包
,elementPathEnabled : false // 不显示元素路径
, toolbars: [[
'fullscreen', 'source', '|', 'undo', 'redo', '|',
'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
'directionalityltr', 'directionalityrtl', 'indent', '|',
'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',
'link', 'unlink', 'anchor', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
'simpleupload', 'insertimage', 'emotion', 'map', 'insertframe', 'insertcode','pagebreak', 'template', 'background', '|',
'horizontal', 'date', 'time', 'spechars', 'snapscreen', 'wordimage', '|',
'print', 'preview', 'searchreplace', 'drafts', 'help'
]]
});
 
1
    // 配置ueditor的根路径
2
    window.UEDITOR_HOME_URL = "${basePath}js/ueditor/";
3
    // 实例化编辑器,'editor'其实就是textarea的id
4
    var ue = UE.getEditor("editor",{ 
5
        emotionLocalization : true  // 开启使用本地表情包
6
        ,elementPathEnabled : false // 不显示元素路径
7
        , toolbars: [[
8
            'fullscreen', 'source', '|', 'undo', 'redo', '|',
9
            'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
10
            'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
11
            'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
12
            'directionalityltr', 'directionalityrtl', 'indent', '|',
13
            'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',
14
            'link', 'unlink', 'anchor', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
15
            'simpleupload', 'insertimage', 'emotion', 'map', 'insertframe', 'insertcode','pagebreak', 'template', 'background', '|',
16
            'horizontal', 'date', 'time', 'spechars', 'snapscreen', 'wordimage', '|',
17
            'print', 'preview', 'searchreplace', 'drafts', 'help'
18
        ]]
19
    });
    上面这一堆配置是怎么来的,其实可以打开 ueditor.config.js这个文件来看一下。里面介绍了怎么配置ueditor,这里用的是在实例化编辑器时传入对应参数的方式。这种方式不会去侵入ueditor的源码,方便ueditor的版本升级。这种方式就是ueditor的前端配置项中介绍的方式。
    再说说上面这段代码,先配置这个ueditor的根路径,这个很重要,配置好了就可以减少很多问题。第二部分代码就是实例化ueditor编辑的的配置,首先传入了一个容器id,这个容器我们一般用textarea ,这个id就是textarea的id;传入后ueditor就在textarea上了。后面那部分用大括号包住的是编辑器配置参数,就是ueditor.config.js里面注释掉的这些东西。我这里就配置了开启本地表情包,因为我们自己下载好了表情包。还有就是自定义了工具栏中显示的内容,以及不在下面显示元素路径。

        <3> 效果展示
        

(5)文件上传的配置
    其实ueditor的文件上传有点坑,它这个默认的文件上传是上传到项目路径下面的。如果要手动修改文件上传,则有点麻烦。需要自定义上传的后端代码,还要在前端配置。这个就不多介绍,百度一下,你就知道。这里说下他自带的文件的文件上传怎么配置吧。
    我们打开ueditor/jsp下面的config.json文件,里面就是上配置文件上传相关的东西,我们需要修改这里面的配置。和图片上传相关的一般就修改下图中的2个参数即可。
    参数imagePathFormat 配置上传的保存路径,这里可以修改也可以不修改。
    参数imageUrlPrefix 配置图片的访问前缀,这个配置有点蛋疼,不能动态修改。一般的话,配置成 "/项目名称"。
    如果你习惯了在开发中访问项目不带项目名称,那么请配置成空串。我一般开发都不喜欢带项目名,因此配的空串。
    一般我们项目上线时也是访问不带项目名称的,因此 在项目上线时请配置成空串。
        
     
    配置完后,图片可上传,也可以在页面上显示,证明图片配置正确。还可以通过,点击图片,弹出一个工具栏,点击修改,可以看到很多和图片相关的信息。也可以看到图片的访问路径。通过该路径,可以看你配置的路径是否正确。
         
        
        这里补充一个配置,上面这个在线管理很坑,可以看到别的用户上传的图片。因此我们还需修改config.json的配置,把列出图片个数设为0,这样在线管理就看不到图片了。另一种方法就是修改源代码,去掉在线管理,更多请自己百度。
        
 
 

三、结束语

    本文只简单介绍了ueditor的使用,如怎么配置工具栏,配置图片上传等。不过这个的图片上传有点坑就是图片会上传到项目路径下。不过,一般项目都在Linux下面运行的,我们可以通过软连接的方式,把图片放到项目外面去,这样重新部署图片就不会丢失了。更多软连接内容,可参考我的博客:http://www.cnblogs.com/zeng1994/p/7512778.html
 

 


 

 

Ueditor使用笔记的更多相关文章

  1. 百科编辑器ueditor应用笔记

    最近项目上要用到文本编辑器,选了百科开源的ueditor,使用过程中虽然有些问题,但是一个个都解决了,记录如下: 开发的项目环境是vs2012:.net4.0: 1:百度js编辑器,编辑器加载到项目中 ...

  2. UEditor学习笔记1

    首先对于前段时间遇到的一些总结做下记录: 0 == ''  => true transition,渐变属性,其值可以是某属性,也可以是all,如transition: all 0.3s:鼠标放到 ...

  3. 很详细的SpringBoot整合UEditor教程

    很详细的SpringBoot整合UEditor教程 2017年04月10日 20:27:21 小宝2333 阅读数:21529    版权声明:本文为博主原创文章,未经博主允许不得转载. https: ...

  4. MVC OF UEditor 图片上传- 额外参数 笔记

    最近正巧需要用到UEditor ,因为需求,.需要把上传的图片数据上传到阿里云的OSS与记录图片相关信息到MS SQL中 . 不得已只能翻UEditor的实现代码>_<痛苦. 备忘笔记: ...

  5. Typecho集成ueditor笔记

    前言:萝卜青菜各有所爱,因为个人需求所以需要在博客中集成ueditor,并非是我不喜欢md语法 其实本篇的笔记的书写最早也是在本地的md编辑器上完成的 1. 首先下载ueditor编辑器,然后重命名文 ...

  6. springmvc学习笔记--ueditor和springmvc的集成

    前言: 在web开发中, 富文本的编辑器真心很重要. 有电商店铺的打理, 新闻稿/博客文章/论坛帖子的编辑等等, 这种所见即所的编辑方式, 大大方便了非技术人员从事互利网相关的工作. 因为手头有个小项 ...

  7. nodejs学习笔记三——nodejs使用富文本插件ueditor

    在做自己的nodejs项目的时候遇到需要使用ueditor.原来下载的是ueditor的jsp版本.目录如下  在ueditor.config.js中有配置服务器home路径(这个home路径能找到u ...

  8. 使用ueditor中的setContent() 时经常报innerHtml错误(笔记)

    1)今天遇到个问题,使用ueditor中的setContent() 时经常报innerHtml错误:网上找了下解决方案:发现这个可以用: 不能创建editor之后马上使用ueditor.setCont ...

  9. [moka同学笔记]百度编辑器Ueditor自动换行,添加<p>的问题(摘录)

     原文:http://www.cnblogs.com/kissdodog/p/5419919.html 百度编辑器Ueditor其实蛮好用的,后来使用了一段时间发现,每次打开后又保存,发现都会往内容的 ...

随机推荐

  1. Selenium win7+selenium2.0+python+JetBrains PyCharm环境搭建

    win7+selenium2.0+python+JetBrains PyCharm环境搭建 by:授客 QQ:1033553122 步骤1:下载python 担心最新版的支持不太好,这里我下载的是py ...

  2. chrome中workspace配置达到同步修改本地文件的作用

    在前端开发中,我们经常需要在浏览器中进行调试,特别是一些样式的修改,如果你还是先在浏览器elements中调试好在复制到本地文件,那就真的out了. chrome浏览器的workspace功能完全可以 ...

  3. 解决Hsqldb指针只能单向移动,不能回滚问题(.first())

    Class.forName("org.hsqldb.jdbcDriver").newInstance(); Connection con = java.sql.DriverMana ...

  4. Oracle 数据库 简单查询

    select DISTINCT dept_id from s_emp; desc s_emp; ; --给入职3年以上员工发10万元年终奖 ; --列出职位是仓库管理员的名字和工资 select la ...

  5. Linux 补丁生成与使用

    我们在升级Linux 内核的时候,难免会接触到补丁的知识.下面对如何生成补丁和如何打补丁作讲解. 生成补丁: 制作 hello.c 和 hello_new.c 两个文件如如下所示. ➜ diff ls ...

  6. cut切割,简单的取列

    cut 切割,简单的取列命令. -d 指定分隔符 -f 数字 取第几列 -c n-m 取n列到m列字符. //提取字符,不常用 例如:已知bqh.txt文件里的内容为“I am bqh myqq is ...

  7. 深度访谈Amazon员工与HR:华裔因pip跳楼背后(图)

    http://www.wenxuecity.com/news/2016/12/01/5813342.html 首先,让我们来回顾一下这起事件.两天前在某论坛中,有同学发了这么一个帖子,大致意思是说有一 ...

  8. MySQL 的 CURD 操作

    0. 说明 CURD 操作通常是使用关系型数据库系统中的结构化查询语言(Structured Query Language,SQL)完成的 CURD 定义了用于处理数据的基本原子操作 CURD 代表创 ...

  9. [2018HN省队集训D9T1] circle

    [2018HN省队集训D9T1] circle 题意 给定一个 \(n\) 个点的竞赛图并在其中钦定了 \(k\) 个点, 数据保证删去钦定的 \(k\) 个点后这个图没有环. 问在不删去钦定的这 \ ...

  10. zepto.js不支持scrollTop的解决办法

    zepto.js不支持animate({ scrollTop: 100},1000); 可以在移动端使用原生window.scrollTop(x,y);简便