第一步:首先下载ueditor编译器,地址http://ueditor.baidu.com/website/

下载完解压之后就这个:

第二步:我会把文件名utf-8-jsp这个文件名改为ueditor,然后把这个ueditor文件夹拷贝到项目的webapp目录下

其中的zh-ch.js我是从lang文件夹里面拷贝出来的,目的是为了方便引入,不拷贝出来完全可以,到时候引入jsp的时候注意下路径就好了。

第三步:当然是要导入这个编译器所需要的依赖了,在ueditor/jsp/lib下

因为我用的是maven搭建的项目,所以直接引入各个jar包的坐标就可以了,其中ueditor-1.1.2的坐标找不到,我就把这个jar添加到我的私服中去了,然后通过私服下载,当然也可以有其他的方式引入这个jar包,网上一搜一大把。

第四步:然后就是在指定的jsp页面中引入三个js,分别是ueditor.all.js和ueditor.config.js和zh-cn.js,其中ueditor.all.js官网是建议用ueditor.all.min.js,但是导入项目时这个ueditor.all.min.js会报错,我就直接用ueditor.all.js了,内容都一样,只不过文件大一点点。无关紧要啦。

第五步:通过上面的步骤之后基本的环境就已经搭完了,下面就是画龙点睛之笔了,找到要添加编译器的textarea标签,获取其id,在下面添加上这一段就欧了,效果立马上演。

效果:

是不是很兴奋,哈哈。

这样基本的使用就完成了,为自己点赞吧。

===========================我是华丽的分割线===========================================

============================图片上传功能实现===========================================

通过以上的操作其实已经实现了最基本的百度编译器的使用,但是图片上传基本功能里面是没有实现的,为了搞定这个图片上传的问题我也是走了一些弯路啊,特此写下博客,希望各位能少走一些弯路,同时自己也作为一个记录吧。

图片上传也需要进行一些配置,主要就是config.json的配置了

默认的配置是这样的:

因为这个上传图片的功能是自己在后台写的,所以要有一个访问的路径,

其中imageActionName就是你要上传图片时访问的地址,不管你用的什么框架,地址都得有,只不过配置的地方不一样罢了。

imageUrlPrefix:这个我在项目中没有配置,保持默认,没有值,这个是图片访问的路径前缀,你一定会想为啥这个路径可以是空呢?因为我在项目中已经有了配置,是一个域名,类似http://image.simple.com的地址。

imagePathFormat:这个路径是图片的保存和访问的路径,你在后台代码中配置了图片保存路径就在这里配置那个路径就好了,虽然我这有说,但我绝对相信有小伙伴会配置有误导致上传图片的各种问题,一定要仔细点,确保上传的图片就在这个指定的路径下能找到,否则图片上传之后在编译器里面是显示不出来的,而且会报上传错误,但是图片确实已经上传了的现象。

我的是这样配置的,可以参考下:

如果你定义了自己上传图片的地址,也就是imageActinName的值,你要在你自己那个jsp页面指定ueditor访问图片上传action的全路径,如下:

这样前台都配置好了,那就看后台上传图片的代码:

这样图片就可以上传了,并且在编译器中可以回显了。

图片上传成功后查看响应是这样的格式:

{"title":"upfile","original":"news_content_9266655998.jpg","state":"SUCCESS","type":"image/jpeg","url"
:"http://image.simple.com/upload/news_content/4565/0579/news_content_3690037515.jpg","size":1890
}

其中的http://image.simple.com/是我我本机当成一个服务器,并且把图片存放在upload/new_content目录中,当然这个地址http://image.simple.com/是我用nginx转发后的效果

我的图片是放在本机的这个目录下的

------------------------------------------------------------------

好了,图片上传到此搞定,希望小伙伴们也能成功实现,当然如有问题可以留言,一起讨论。

UEditor百度编辑器的更多相关文章

  1. 织梦替换ueditor百度编辑器,支持图片水印 教程

    1下载ueditor百度编辑器 2 把下载的zip解压得到ueditor文件夹,把解压到的ueditor文件夹扔进你网站的include文件夹去 3 打开 /include/inc/inc_fun_f ...

  2. UEditor百度编辑器,工具栏上自定义添加一个普通按钮

    添加一个名叫“hougelou”的普通按钮在工具栏上: 第一步:找到ueditor.config.js文件中的toolbars数组,增加一个“hougelou”字符串,然后找到labelMap数组,对 ...

  3. [UEditor]百度编辑器配置总结

    前端配置文件ueditor.config.js 前端有两个重要的配置属性: UEDITOR_HOME_URL: 配置百度编辑器的资源目录路径,你可以手动指定此路径,默认是有URL变量指定,而URL变量 ...

  4. ueditor 百度编辑器图片上传 接 node.js 及一些前端自定义

    百度编辑器 用node.js 做服务端 demo 大神已整理的 记录一下 以作参考 https://github.com/netpi/ueditor 1. 前端图片工具栏上传input file在这里 ...

  5. UEditor百度编辑器,工具栏自定义添加一个普通按钮

    根据网上前辈提供的,还真的不错,下面也整理一下 添加一个名叫“macros”的普通按钮在工具栏上: 第一步:找到ueditor.config.js文件中的toolbars数组,增加一个“macros” ...

  6. Ueditor百度编辑器中的 setContent()方法的使用

    百度编辑器Ueditor所提供的setContent()方法作用是:设置或者改变编辑器里面的文字内容或html内容 函数说明:setContent(string,boolean); 参数string ...

  7. ThinkPHP3.1.3 整合 UEditor百度编辑器 图片上传

    第一步.前端模板实例化百度编辑器 <js file='__ROOT__/Data/UEditor/ueditor.config.js' /> <js file='__ROOT__/D ...

  8. Ueditor百度编辑器插件的安装

    目录 插件下载地址: 1. 引入 2. 编辑器显示处 id="content" 3.底部 4.ueditor编辑器按钮配置方法 定制工具栏图标 修改配置项的方法: 插件下载地址: ...

  9. Ueditor百度编辑器中 setContent()方法的使用

    百度编辑器Ueditor所提供的setContent()方法作用是:设置或者改变编辑器里面的文字内容或html内容 函数说明:setContent(string,boolean); 参数string ...

  10. DEDECMS:DEDE整合(UEditor)百度编辑器以后,栏目内容、单页无法保存内容的bug处理方法

    已经整合过百度编辑器的站长们或许会发现,在编辑单页文档和栏目内容的时候,百度编辑器不能够保存新增或已修改数据,经过排查后发现问题出现在catalog_edit.htm.catalog_add.htm这 ...

随机推荐

  1. c# 创建缩略图

    /// <summary> /// 创建缩略图 /// </summary> /// <param name="srcFileName">< ...

  2. Luogu 4768 [NOI2018]归程

    并不会写Kruskal重构树,两个$log$跑得比较卡. 首先考虑一下没有强制在线的要求怎么办,有一个比较容易想到的做法就是先跑一遍最短路,然后把所有边按照海拔从大到小排序,把所有询问的海拔也从大到小 ...

  3. 介绍两款常用的“图表统计图"的插件

    一.相信朋友们在开发的过程中都会使用到“数据统计”的功能,图表的统计更为直观,在这里就介绍两款插件:fusionChart.DataVisualization. 1.fusionChart实际项目中用 ...

  4. 转发:php解决高并发

    php解决高并发(转发:https://www.cnblogs.com/walblog/articles/8476579.html) 我们通常衡量一个Web系统的吞吐率的指标是QPS(Query Pe ...

  5. unity 3d 之合并网格和贴图(combine mesh and texture)

    https://www.cnblogs.com/eangulee/p/3877824.html unity 3d 之合并网格和贴图(combine mesh and texture)   本人是个小白 ...

  6. 猜拳游戏三局两胜------java实现代码

    package com.javasm.exerices02; import java.util.ArrayList; import java.util.List; import java.util.R ...

  7. C#中参数值传递和址传递

    概论 我认为的形参和实参是这样的,形参是形式上的参量,和"抽象类"的概念差不多,不是实际存在的.不用的时候不占用内存,被调用的时候分配内存,调用结束,释放内存.类似于"抽 ...

  8. 洛谷P1312 Mayan游戏

    P1312 Mayan游戏 题目描述 Mayan puzzle是最近流行起来的一个游戏.游戏界面是一个 7 行5 列的棋盘,上面堆放着一些方块,方块不能悬空堆放,即方块必须放在最下面一行,或者放在其他 ...

  9. Spring MVC 简述:从MVC框架普遍关注的问题说起

    任何一个完备的MVC框架都需要解决Web开发过程中的一些共性的问题,比如请求的收集与分发.数据前后台流转与转换,当前最流行的SpringMVC和Struts2也不例外.本文首先概述MVC模式的分层思想 ...

  10. Docker 快速安装&搭建 Ngnix 环境,并配置反向代理

    欢迎关注个人微信公众号: 小哈学Java, 文末分享阿里 P8 高级架构师吐血总结的 <Java 核心知识整理&面试.pdf>资源链接!! 个人网站: https://www.ex ...