使用的wangeditor ,踩了一天的坑,终于OK
vue+element + wangeditor
npm i wangeditor
<<template>
<div class='warp'>
<div id="editorElem" class="toolbar" ></div>
<div id="div2" class="text">
</div>
</div>
</template>>
<script>
import E from "wangeditor";
import { getOliInfo} from "../../api/api";
import axios from "axios";
export default {
name: "editor",
data() {
return {
aliyun: {},
editorContent: ""
};
},
methods: {
aliyun(){
//向后台发起请求获得accessid、policy等参数,并赋值给data中的定义的aliyun对象
}
},
mounted() {
var that = this;
this.aliyunKey();//请求后台获得key host之类的信息,
var editor = new E("#editorElem","#div2");//第一个是操作栏,第二部分是富文本编辑区域,目的是为了css设置编辑区的高度
editor.customConfig.onchange = html => {
this.editorContent = html;
console.log(html)//这个值是富文本生成的值,要传给数据库
};
editor.customConfig.customUploadImg = function(file, insert) {//这个要放在editor.create();之前,放在之后获取不到上传的文件
var server = that.aliyun.host;
var ossData = new FormData();
var time = new Date().getTime();
var keyname = that.aliyun.dir + "/" + time + ".jpg";
ossData.append("key", keyname);
ossData.append("policy", that.aliyun.policy);
ossData.append("OSSAccessKeyId", that.aliyun.accessid);
ossData.append("success_action_status", 201);
ossData.append("signature", that.aliyun.signature);
console.log(file[0],file[0].name)
ossData.append("file", file[0], file[0].name);
//上一部分是直传oss 的格式,后面的参数为后端返回的一一对应,值得注意的是与element upload上传插件有所不同,得到的file是数组,upload是一个对象,里面的file也是一个对象,不能用...的方式获得,因此使用了file[0]
axios.post(server, ossData).then(res => {
var img = server + "/" + keyname;
//阿里云上传成功返回的是xml,为了得到https图片的地址使用拼接的方式得到img
console.log(img)
insert(img)//将https的图片插到富文本编辑器中
});
};
editor.create();
//总结起来,wangeditor 简单方便,前端直传减轻了服务器的压力,整体操作虽然遇到了很多问题,但是最终还是感觉代码挺简单,思路也比较清晰。获得file文件,调用上传方法,得到http地址图片放在富文本中,而上传方法要有
}
};