富文本编辑器Ueditor的简单使用

前端

1.先安装uditor，安装成功后引入，就可以使用了：

<vue-ueditor-wrap v-model="projectLog.remarks" :config="myConfig"></vue-ueditor-wrap><script type="text/javascript">export default {components: {VueUeditorWrap},data() {return {myConfig: {// 编辑器不自动被内容撑高autoHeightEnabled: false,// 初始容器高度initialFrameHeight: 400,// 初始容器宽度initialFrameWidth: '100%',// 上传文件接口serverUrl: 'http://120.27.242.17:8082/config',// UEditor 资源文件的存放路径，在后端UEDITOR_HOME_URL: 'http://120.27.242.17:8082/admin/ueditor/'}}}}<script>

到这里前端就配置完成了

后端

1.下载jsp版本的ueditor，然后放到项目\src\main\resources\static\admin下

2.后端config接口（单独用一个类来写）：

@Controller@CrossOrigin@EnableConfigurationProperties(UeditorProperties.class)public class UeditorController {@Autowiredprivate UeditorProperties ueditorProperties;/*** 百度Ueditor图片上传* @param request* @param response*/@RequestMapping(value = "/config")public void config(HttpServletRequest request, HttpServletResponse response) {response.setContentType("application/json");//String rootPath = ClassUtils.getDefaultClassLoader().getResource("").getPath()+"static/admin/ueditor/jsp";String rootPath = "/www/wwwroot/target/classes/static/admin/ueditor/jsp";//指明这是绝对路径，写法必须是这个格式（target包下到jsp目录）System.out.println(rootPath);try{response.setCharacterEncoding("UTF-8");String exex = new ActionEnter(request, rootPath).exec();System.out.println(exex);PrintWriter printWriter = response.getWriter();printWriter.write(new ActionEnter(request, rootPath).exec());printWriter.flush();printWriter.close();} catch (Exception e) {e.printStackTrace();}}}

3.最后改一个配置文件ueditor的/jsp/config.json

"imageUrlPrefix": "http://120.27.242.17:80/admin/ueditor/jsp", /* 图片访问路径前缀 */"imagePathFormat": "/upload/image/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */

4.文件上传后路径就是http://120.27.242.17:80/admin/ueditor/jsp/upload/image/{time}{rand:6}