Vue项目中使用ueditor富文本编辑器(一)

Ueditor项目下载地址:http://ueditor.baidu.com/website/
这里写图片描述
这里使用php版本(如果后端是java就下载完整版和php版,在完整源码版中有java的代码,但是里面没有前端需要的ueditor.all.min.js ,所以还需要下载另外一个版本,获取这个文件。)
完整版的java代码在baidu里面,如下:
这里写图片描述
一、把php版本中的如下内容添加到 /static/UE/
这里写图片描述

二、 在main.js中全局引入需要的文件,注意引入顺序。

也可以在UE组件中引入,注意路径

这里写图片描述

三、在vue项目中单独定义一个叫UE的富文本编辑器模块:
这里写图片描述

2:在父组件中的使用方式,接收父组件传递过来的参数,对编辑器进行初始化赋值。
如果是修改文章就需要用到加载默认内容。
3:初始化编辑器,如果需要加载默认内容要在ready后处理。
4:获取并返回编辑器中的内容(这里就是返回给父组件,在父组件中统一处理)。

四、在父组件中使用UE组件

1:引入组件: import UEtor from ‘./UE.vue’;
2:挂载子组件到父组件: components: {Header, UEtor}
3:定义默认值
这里写图片描述
4:使用子组件(同时传递默认值到子组件)
这里写图片描述
5:配置后端上传代码
将下载的php版本代码中的php文件夹里的文件上传到服务器。
确保可以访问到 controller.php这个文件,并正常返回数据。
在config.json文件中配置图片和文件的上传路径,文件和视频的配置路径在这个文件的下面,这里可自行修改。
这里写图片描述
6:配置前端代码
① :ueditor.config.js在22行添加 window.UEDITOR_HOME_URL = “/static/UE/”;
指向UE的路径。
② :ueditor.config.js 35行修改serverUrl 为上面第5步可访问的controller.php的路径。
7:页面效果
这里写图片描述
8:父组件调用子组件中定义的方法
在父组件中文档正文部分是用的UE子组件,获取编辑器中正文内容的方法定义在子组件中。点击提交的时候,父组件中需要获取到子组件中的数据,方法如下:
① :在子组件中定义方法返回编辑器内容:
这里写图片描述
② :在父组件方法中调子组件方法:
这里写图片描述
其中getUEContent() 就是子组件中的方法, 前面的那个 ue 是在父组件中使用子组件的时候定义的ref属性值(参看第4步)。

vue项目打包后报错的处理方式看这个 :

打包后ueditor相关文件报错处理
vue打包后css中引用的图片路径不正确

猜你喜欢

转载自blog.csdn.net/fanhu6816/article/details/81223909