ckeditor5自定义 vue_vue中的富文本编辑器CKEditor5
image.png
image.png
1、安裝
官網已經四種版本，也給出了下載安裝的方法，參考官網安裝
https://ckeditor.com/ckeditor-5/download/
2、引用
在組件中引用
import CKEditor from '@ckeditor/ckeditor5-build-classic'
import '@ckeditor/ckeditor5-build-classic/build/translations/zh-cn' //中文包
3、html
4、方法
因為圖片要上傳到我們的服務器，要重置一下上傳路徑，方法如下
export default {
data() {
return {
editor: null, // 編輯器實例
}
},
mounted() {
this.initCKEditor()
},
methods: {
initCKEditor() {
class UploadAdapter {
constructor(loader) {
this.loader = loader
}
upload() { //重置上傳路徑
return new Promise((resolve, reject) => {
var fileName = 'goods' + this.loader.file.lastModified
client().put(fileName, this.loader.file).then(result => {
resolve({
default: result.url
})
}).catch(err => {
console.log(err)
})
})
}
abort() {
}
}
//初始化編輯器
CKEditor.create(document.querySelector('#editor'), {
removePlugins: ['MediaEmbed'], //除去視頻按鈕
language: 'zh-cn', // 中文
ckfinder: {
'uploaded': 1, 'url': '/'
// 后端處理上傳邏輯返回json數據,包括uploaded(選項true/false)和url兩個字段
}
}).then(editor => {
const toolbarContainer = document.querySelector('#toolbar-container')
toolbarContainer.appendChild(editor.ui.view.toolbar.element)
// 加載了適配器
editor.plugins.get('FileRepository').createUploadAdapter = (loader) => {
return new UploadAdapter(loader)
}
this.editor = editor // 將編輯器保存起來，用來隨時獲取編輯器中的內容等，執行一些操作
}).catch(error => {
console.error(error)
})
},
}
4、獲得編輯器中的數據
this.editor.getData()
5、初始化編輯器中的數據
this.editor.setData(contentVal)
6、編輯器只讀
this.editor.isReadOnly = true; //將編輯器設為只讀
網友補充，如果在上傳之前需要做限制，參考如下：(感謝網友的分享)
class MyUploadAdapter {
constructor(loader) {
self.loader = loader;
self.oldValue = self.editor.getData();//保存原來的內容
}
upload() {
return new Promise((resolve, reject) => {
let size = self.loader.file.size;
if (size / 1024 > 2048) {
self.$message({
message: '圖片不能大于2M'
});
self.editor.setData(self.oldValue);
return false;
}
const data = new FormData();
data.append('imageFile', self.loader.file);
self.fullscreenLoading = true;
self.$http.post('/editor/uploadImg', data).then(res => {
self.fullscreenLoading = false;
if (res) {
if (res.data.code == 200) {
resolve({
default: res.data.data
});
} else {
self.$message({
message: res.data.msg
});
self.editor.setData(self.oldValue);
}
} else {
self.$message({
message: 'can not upload file: ' + self.loader.file.name
});
self.editor.setData(self.oldValue);
}
})
}).catch(error => {
console.log(error);
});
}
abort() {
}
}
總結
以上是生活随笔為你收集整理的ckeditor5自定义 vue_vue中的富文本编辑器CKEditor5的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 诗佛是指哪位诗人 诗佛表示哪位诗人
- 下一篇： html5倒计时秒杀怎么做,vue 设