我的毕设中需要一个类似新闻发布的功能,使用到百度富文本编辑器,不过百度富文本编辑器有点坑(只是我太菜了),粘贴图片和回显这个坑坑了我两天时间。效果是这样的:

就是可以在文本中粘贴图片并显示出来,直接说怎么做吧。

首先  从百度富文本官网下载源码 http://ueditor.baidu.com/website/download.html#ueditor

两个都下载下来

解压jsp版本,改名为ueditor,并将其复制放入你的项目的static目录下面

打开jsp/congfig.json文件,修改一下路径;imageUrlPrefix是你后面图片回显的路径,而imagePathFormat 是图片保存后的名字,对比下面的那张图就懂了

解压源码版本,取出源码,将源码放到项目下

源码中没有ConfigUtil文件,这个需要我们自己新建的。我们还需要在配置加一个路径(个人建议这样做,方便以后修改路径)

我在配置加了一个路径是 savepath=c:/bns/pr/knowImage 以后想改路径直接在这里改就可以

新建ConfigUtil.java文件

 package com.ueditor;

 import java.io.IOException;
import java.io.InputStream;
import java.io.InputStreamReader;
import java.util.Properties; public class ConfigUtil { private static Properties pro; static {
pro=new Properties();
//默认从类的所在包目录开始查找资源文件
//如果要classpath的根目录开始找,必须加上"/"
InputStream input = ConfigUtil.class.getClassLoader().getResourceAsStream("jeesite.properties");
try {
pro.load(new InputStreamReader(input, "UTF-8"));
} catch (IOException e) {
e.printStackTrace();
}finally{
if(input!=null){
try{
input.close();
}catch (IOException e){
e.printStackTrace();
}
}
}
} public static String get(String key){
return pro.getProperty(key);
} public static void main(String[] args) {
String string = ConfigUtil.get("savepath");
System.out.println(string);
}
}

这个作用呢,就是为了读取配置文件,保存文件用的。

接下来就是要改源码了,我所需要修改的就是physicalPath(物理路径)。也就三个文件而已。

在这里我自己的已经可以了,但是不知道为什么百度了很多,其他介绍都有介绍到修改tomcat 的配置,这个我就不太懂了,我不用修改也可以正常显示,既然他们都有修改我这里就顺便提一下吧,各位按照需求参考吧!修改tomcat路径下的server.xml

就这样,我们的图片就可以保存到指定的路径了,但是还有一个回显要解决,接下来就是回显的解决。

其实在上面的截图中,我们已经可以发现,最终图片还是需要以流的形式出现

所以在后台,我们需要写一个方法将图片的流传出去,不然就只会显示一个图片占位符而已

到了这里,富文本的粘贴图片和回显就大功告成了,效果最先图片一样,直接怎么排版,就看各位的排版能力了。

下面是我修改后的源码和静态文件,如果懒得自己修改就下载去试试吧,也包括我那个图片回显的代码。

下载链接:https://download.csdn.net/download/qq_32003379/11123522

现在csdn改了,上传资源好像都是默认都是5积分,这个特别不好,体验特别差,原本只想设置1积分的,没方法,我建议大家自己动手去改源码,就不用浪费积分去下载资源了,而且自己手动改还能够理解一下代码,如果确实不想的话,就花点积分下载吧。

百度富文本Ueditor将图片存在项目外路径并回显的更多相关文章

  1. 百度富文本Ueditor编辑器的使用

    往在web开发的时候,尤其是在网站开发后台管理系统的时候经常会使用到富文本编辑器,这里我们来使用百度提供的富文本编辑器UEditor,以提高我们的开发效率 UEditor官网下载地址:https:// ...

  2. 百度富文本ueditor使用小结

    最近因工作需要使用了ueditor,根据自己的需求将开发使用时遇到的问题小结分享下. 1.可到官网根据自身情况下载最新版本,https://ueditor.baidu.com/website/ 2.h ...

  3. springboot使用百度富文本UEditor遇到的问题一览(springboot controller中request.getInputStream无法读取)

    先吐槽一下UEditor作为一个前端的js类库,非要把4种后端的代码给出来,而实际生产中用的框架不同,其代码并不具有适应性.(通常类似其它项目仅仅是给出数据交互的规范.格式,后端实现就可以自由定制) ...

  4. JAVA 集成 Ueditor 百度富文本编辑器

    开发环境:一个简单的SpringMVC框架中,用百度富文本编辑器 ueditor 实现图片和文件的上传 官网地址:http://ueditor.baidu.com/website/ 需要使用到的2个文 ...

  5. 百度富文本编辑器ueditor使用总结

    最近做的项目用到了ueditor这个东东,但是他的一些配置文档对初次使用者来说很难以理解,故作此总结 相关详细操作链接地址: http://blog.csdn.net/wusuopubupt/arti ...

  6. 百度富文本编辑器UEditor安装配置全过程

    网站开发时富文本编辑器是必不可少的,他可以让用户自行编辑内容的样式然后上传到后台!下面我们来介绍如何安装使用百度富文本编辑器 一.下载并且设置百度富文本编辑器的样式     你可以去百度UEditor ...

  7. Html引入百度富文本编辑器ueditor

    在日常工作用,肯定有用到富文本编辑器的时候,富文本编辑器功能强大使用方便,我用的是百度富文本编辑器,首先需要下载好百度编辑器的demo, 然后创建ueditor.html文件,引入百度编辑器,然后在h ...

  8. Html引入百度富文本编辑器ueditor及自定义工具栏

    在日常工作用,肯定有用到富文本编辑器的时候,富文本编辑器功能强大使用方便,我用的是百度富文本编辑器,首先需要下载好百度编辑器的demo, 然后创建ueditor.html文件,引入百度编辑器,然后在h ...

  9. springboot+layui 整合百度富文本编辑器ueditor入门使用教程(踩过的坑)

    springboot+layui 整合百度富文本编辑器ueditor入门使用教程(踩过的坑) 写在前面: ​ 富文本编辑器,Multi-function Text Editor, 简称 MTE, 是一 ...

随机推荐

  1. centos yum安装php5.6.19 remi源按照

    yum安装php5.6 多版本php共存 remi安装方法 http://www.servermom.org/how-to-enable-remi-repo-on-centos-7-6-and-5/2 ...

  2. 51nod2004 终结之时 (支配树+树剖+树链的并)

    link 我永远喜欢洛天依 给定一张图世末积雨云,你需要维护其支配树: 单点修改,子树修改,树链修改 子树求和,树链求和,多条树链的并集求和 撤销之前的操作 可以先用 Lengauer-Tarjan ...

  3. KVC 原理及自定义实现

    一.  setValue: forKey: 赋值过程 1.首先寻找setter方法(两个) - setName: -setIsName: 2.然后再寻找成员变量 默认 + (BOOL)accessIn ...

  4. css第二篇:样式的特殊性、重要性、继承和层叠

    特殊性:   假设有几个不同的规则改变的都是同一个元素的值,那么哪一个规则将会胜出呢?这就得靠特殊值啦,什么是特殊值呢?特殊值的大小呢?如下图: 值越大代表越牛,如1,0,0,0永远大于0,X,X,X ...

  5. nginx windows 安装为服务.

    安装Nginx 下载windows版nginx (http://nginx.org/download/nginx-1.10.0.zip),之后解压到需要放置的位置(D:\xampp\nginx) 将N ...

  6. POJ - 3585 树上最大流 换根法

    题意:给出一棵树,边上有容量限制,求以任一点作为根和源点,叶子作为汇点的最大流的最大值 首先上网络流等于找死 树形DP可以\(O(n)\)求出以某点\(u\)为根的最大流,只需设\(f[u]=\sum ...

  7. Q438 找到字符串中所有字母异位词

    给定一个字符串 s 和一个非空字符串 p,找到 s 中所有是 p 的字母异位词的子串,返回这些子串的起始索引. 字符串只包含小写英文字母,并且字符串 s 和 p 的长度都不超过 20100. 说明: ...

  8. Pytorch学习笔记(一)——简介

    一.Tensor Tensor是Pytorch中重要的数据结构,可以认为是一个高维数组.Tensor可以是一个标量.一维数组(向量).二维数组(矩阵)或者高维数组等.Tensor和numpy的ndar ...

  9. Versions maven plugin 修改版本

    使用versions maven plugin插件,批量修改项目各模块的版本号,灵活推进或回退版本,避免主干每次更新代码,立即对所有分支产生影响. https://blog.csdn.net/sunz ...

  10. 线程局部存储空间 pthread_key_t、__thread 即 ThreadLocal

    https://www.jianshu.com/p/495ea7ce649b?utm_source=oschina-app 该博客还未学习完  还有   pthread_key_t    Thread ...