袅袅青烟散 2019-06-27
1.去官网下载jsp版本的UEditor http://ueditor.baidu.com/webs...(注意下载开发版,mini版可能会有坑,我这里下载的是1.4.3.3)
2.WebContent下新建一个文件夹ueditor,把下载下来解压的文件全部放到这个文件夹下
3.把jar包复制到WEB-INF下的lib下
4.在需要引入编辑器的页面引入js(路径自己找)
<script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/ueditor/ueditor.config.js"></script> <script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/ueditor/ueditor.all.min.js"></script> <script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/ueditor/ueditor.all.js"></script> <script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/ueditor/lang/zh-cn/zh-cn.js"></script>
5.在body中引入编辑器及样式()
<textarea id="myEditor" name="content" style="width:900px;height:300px;"> </textarea> <script type="text/javascript"> var editor =UE.getEditor('myEditor', { toolbars: [ ['redo','undo','bold','indent','italic','selectall','pasteplain','date', 'justifyleft','justifyright','justifycenter','justifyjustify','forecolor', 'directionalityltr','directionalityrtl','rowspacingtop','rowspacingbottom', 'lineheight'] ], initialFrameHeight: 250, initialFrameWeight: 80 }); </script>
6.打开jsp/config.json文件
(1)imageUrlPrefix是图片访问路径前缀,ueditor会在每次访问图片时加上这个前缀;我在这里把他设为了本地的一个目录"/images"
(2)修改imagePathFormat,这里其实就是定义文件的名字,这里我写成了"/{yyyy}{mm}{dd}/{time}{rand:6}"
(3)添加localSavePathPrefix "localSavePathPrefix":"E:/images",
这个是我自己定义的一个参数,修改ueditor-1.1.2.jar中ConfigManager.class的getConfig(int
type)方法,添 加了一句:
rootPath = jsonConfig.getString("localSavePathPrefix");
不想自己反编译修改代码的话可以直接去这里下载jar包:https://download.csdn.net/dow...
7.controller层新建UEditorController.java,添加如下代码
@Controller @RequestMapping("/ue") public class UEditorController { @RequestMapping(value="/config") public void config(HttpServletRequest request, HttpServletResponse response) { response.setContentType("application/json"); String rootPath = request.getSession() .getServletContext().getRealPath("/"); try { String exec = new ActionEnter(request, rootPath).exec(); PrintWriter writer = response.getWriter(); writer.write(exec); writer.flush(); writer.close(); } catch (IOException e) { e.printStackTrace(); } } }
然后图片就可以实现上传了:
8.这时你发现图片虽然能传上去但不能回显,这是因为默认的访问为http访问,可以在tomcat的server.xml中host间添加如下:
<Context path="/images" debug="0" docBase="E:/images/" reloadable="true" />
于是发现,帅气的卡卡出现了
将下载好的文件解压到thinkphp项目中,本文是解压到PUBLIC目录下并改文件夹名称为ueditor. <textarea type="text" name="content" id="Edito