富文本编辑器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 {

	@Autowired
	private 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}