教程使用的是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及以上版本,不然会报错

ueditor1_4_3_3编辑器的应用的更多相关文章

  1. ueditor1_4_3_3编辑器修改文章

    html的body中: <script id="editor" type="text/plain" ></script> js中: // ...

  2. 微服务迁移记(五):WEB层搭建(5)-集成ueditor编辑器,伪分布式图片上传

    一.redis搭建 二.WEB层主要依赖包 三.FeignClient通用接口 以上三项,参考<微服务迁移记(五):WEB层搭建(1)> 四.SpringSecurity集成 参考:< ...

  3. NiceMark——我的Markdown编辑器

    NiceMark--我的Markdown编辑器 闲来无事,写了一个Markdown编辑器.基于electron,完全采用Web前段技术(Html,css,JavaScript)实现.代码已托管在Git ...

  4. 关于Unity3D自定义编辑器的学习

    被人物编辑器折腾了一个月,最终还是交了点成品上去(还要很多优化都还么做).  刚接手这项工作时觉得没概念,没想法,不知道.后来就去看<<Unity5.X从入门到精通>>中有关于 ...

  5. 在ASP.NET Core中使用百度在线编辑器UEditor

    在ASP.NET Core中使用百度在线编辑器UEditor 0x00 起因 最近需要一个在线编辑器,之前听人说过百度的UEditor不错,去官网下了一个.不过服务端只有ASP.NET版的,如果是为了 ...

  6. 07.LoT.UI 前后台通用框架分解系列之——轻巧的文本编辑器

    LoT.UI汇总:http://www.cnblogs.com/dunitian/p/4822808.html#lotui 上次说的是强大的百度编辑器 http://www.cnblogs.com/d ...

  7. 富文本编辑器Simditor的简易使用

    最近打算自己做一个博客系统,并不打算使用帝国cms或者wordpress之类的做后台管理!自己处于学习阶段也就想把从前台到后台一起谢了.好了,废话不多说了,先来看看富文本编辑器SimDitor,这里是 ...

  8. 玩转Vim 编辑器

    一:VIM快速入门 1.vim模式介绍 以下介绍内容来自维基百科Vim 从vi演生出来的Vim具有多种模式,这种独特的设计容易使初学者产生混淆.几乎所有的编辑器都会有插入和执行命令两种模式,并且大多数 ...

  9. 个人网站对xss跨站脚本攻击(重点是富文本编辑器情况)和sql注入攻击的防范

    昨天本博客受到了xss跨站脚本注入攻击,3分钟攻陷--其实攻击者进攻的手法很简单,没啥技术含量.只能感叹自己之前竟然完全没防范. 这是数据库里留下的一些记录.最后那人弄了一个无限循环弹出框的脚本,估计 ...

随机推荐

  1. 微信公众号支付安卓和WP支付成功,苹果不能支付!

    花了几天时间,终于搞好了,代码是从官网上下的.NET DEMO的代码改的,测试的时候发现安卓和WP手机都能进行支付,但是苹果的怎么支付都支付不了,主要是在下面这个界面 点支付按钮就是苹果支付不了,其他 ...

  2. 五个你必须知道的javascript和web debug技术

    转:http://js8.in/2013/11/20/%E4%BA%94%E4%B8%AA%E4%BD%A0%E5%BF%85%E9%A1%BB%E7%9F%A5%E9%81%93%E7%9A%84j ...

  3. Webpack中的sourcemap

    Webpack中sourcemap的配置 sourcemap是为了解决开发代码与实际运行代码不一致时帮助我们debug到原始开发代码的技术.尤其是如今前端开发中大部分的代码都经过编译,打包等工程化转换 ...

  4. 进程的处理器亲和性和 vCPU 的绑定(查看cpu信息,超线程等)

    通常情况下,在 SMP 系统中,Linux 内核的进程调度器根据自有的调度策略将系统中的一个进程调度到某个 CPU 上执行.一个进程在前一个执行时间是在 cpuM(M 为系统中的某 CPU 的 ID) ...

  5. [Linux] Ubuntu修改时区

    sudo apt-get install sysv-rc-confsudo dpkg-reconfigure tzdata

  6. Maven 在eclipse中如何配置

    大部分码农们都很熟悉Eclipse,用eclipse开发项目,Maven是解决依赖库的一个非常好用的java工具,可以与Eclipse集成,方便地管理web,java项目等等:但是很多初学者都不知道怎 ...

  7. DirectUI的初步分析-转

    DirectUI的初步分析(一) 最近由于项目的需要学习了一下DirectUI方面的东西,主要借鉴的是一个国外程序员写的代码(见引用一),看了后发现它更多的是探讨一种实现的可能性和思路,和实际应用还是 ...

  8. NSIS安装程序制作工具判断系统是否安装.NET

    前段时间忙了很久的系统总算上线了,由于是WinForm程序不能整个文件夹的发给客户使用.所以必须要打包,记得以前在VS2005中是自带部署功能的.现在换了VS2013那个部署功能完全弄不清方向.最后在 ...

  9. LeetCode: isSameTree1 解题报告

    isSameTree1 Given two binary trees, write a function to check if they are equal or not. Two binary t ...

  10. Makefile 7——自动生成依赖关系 三颗星

    后面会介绍gcc获得源文件依赖的方法,gcc这个功能就是为make而存在的.我们采用gcc的-MM选项结合sed命令.使用sed进行替换的目的是为了在目标名前加上“objs/”前缀.gcc的-E选项, ...