在vue中使用ckeditor富文本,实现上传本地图片
哦,俺使的是ckeditor4-vue,应该差不多吧,记录一下吧,有同样用这个插件的大佬也可以跟着一起研究一下(废话不多说)下载安装ckeditor4-vuenpm i ckeditor4-vue@1.0.1或者"ckeditor4-vue": "^1.0.1",将这个代码放到package.json中,然后npm i想要实现本地图片,最重要的就是(反正我这最重要)"ajax-hook": "^2
·
哦,俺使的是ckeditor4-vue,应该差不多吧,记录一下吧,有同样用这个插件的大佬也可以跟着一起研究一下(废话不多说)
- 下载安装ckeditor4-vue
npm i ckeditor4-vue@1.0.1
或者"ckeditor4-vue": "^1.0.1",
将这个代码放到package.json中,然后npm i
- 想要实现本地图片,最重要的就是(反正我这最重要)
"ajax-hook": "^2.0.3",
安装这个玩意
至于ckeditor的使用
在main.js中:
import CKEditor from 'ckeditor4-vue';
然后就引用就可以直接用了,没有去搞plugins
在需要使用的页面调用
// css:
<ckeditor class="ckeditor" v-model="editortxt" :config='config'></ckeditor>
// editortxt是绑定的,不必解释
// config配置项,具体看官网,展示一下我的吧
data(){
return{
editortxt:'',
api:url,
config: {
height: 200,
// 富文本功能项
extraPlugins: 'colorbutton, colordialog, font, indent, justify, showblocks, image2, uploadimage',
// 本地图片上传(ckeditor官网有解释)
filebrowserImageUploadUrl: '',
filebrowserUploadUrl: ''
},
}
}
关键来了
// 先引入proxy
import {proxy, unProxy} from 'ajax-hook'
mounted(){
unProxy()
proxy({
// 请求发起前进入
onRequest: (config, handler) => {
// console.log(config)
handler.next(config)
},
// 请求发生错误时进入,比如超时;注意,不包括http状态码错误,如404仍然会认为请求成功
onError: (err, handler) => {
handler.next(err)
},
// 请求成功后进入
onResponse: (response, handler) => {
// console.log(response);
if (response.config.url === 'http://192.168.2.71:6218/ocean-ranch/rest/files/rich-files') {
response.response = JSON.parse(response.response)
// console.log('url');
response.response = JSON.stringify({
fileName: response.response.result.fileName,
uploaded: 1,
// 拼接后台穿给的文件路径,至于文件路径,一会给你们贴图展示一下,baseUrl 就是ip+端口号
url: baseUrl + response.response.result.filePath
})
//**// console.log(response.response,'response.response');
}
handler.next(response)
}
})
}
要不要解释一下啊,我怕我解释不明白
// 本地图片上传(ckeditor官网有解释) filebrowserImageUploadUrl: '', filebrowserUploadUrl: ''
这两行如果不添加的话,给你们上图看一下吧
没有本地上传的按钮,如果添加这两行的话:
需要先上传图片,然后点击上传服务器,此刻proxy的作用就是拦截你的请求,然后你需要做的就是将后台返回的文件路径拼接成一个完整的url
写一写plugins的方法吧,如果想直接生成plugins文件夹以及文件,直接使用vue add ckeditor4-vue
具体使用方法参考百度(其实没啥屁用,就是改变一下目录的结构)
// 在src文件夹下面创建ckeditor.js
// 在ckeditor.js中:
import Vue from 'vue'
import CKEditor from 'ckeditor4-vue/dist/legacy.js'
Vue.use(CKEditor)
然后在main.js中
import './plugins/CKEditor.js'
更多推荐
已为社区贡献3条内容
所有评论(0)