1.npm install --save我是實用的npm來安裝的ckeditor,然后從本地保存的目錄中復制了一個出來用的罗侯。
2.引用非常簡單钩杰。<script src="/res/lib/ckeditor/ckeditor.js"></script>就全局可用CKEDITOR這個對象了讲弄。
3.在vue組件中使用的時候可能會存在一個虛擬dom無法通過id獲取的問題避除。
這里如果能直接將CKEDITOR做replace上去的瓶摆,那么直接就成功了群井。如果不能书斜,比如我用的是element ui的drawer就不行荐吉∩耘鳎可以使用nextTick以后可以拿到原生的dom組件负蠕,這樣就可以順利的render上去了遮糖。用ref應該也能拿到原生組件“鸥牛可以試試看罢洲。
show(row) {
if (row) {
const rowStr = JSON.stringify(row);
this.currentRow = JSON.parse(rowStr);
this.loadFiles();
} else {
this.initRow();
this.fileList = [];
}
this.isShowEdit = true;
this.(function () {
// 這里寫jquery代碼
CKEDITOR.replace("editor")
})
})
},
4.CKeditor上傳圖片與視頻的方法
CKeditor的配置文件是config.js
我們補充文件上傳的功能
//文件上傳
config.filebrowserImageUploadUrl = 'http://127.0.0.1:7201/F3323/ajax5';
//上傳音視頻插件
config.extraPlugins = 'html5video';
config.filebrowserHtml5videoUploadUrl = "http://127.0.0.1:7201/F3323/ajax5";
這里需要注意一個html5video的一個插件,需要下載一下鸽粉,放進ckeditor的插件目錄触机,默認這個插件實用的語言里面沒有中文儡首,可以編輯一下插件的源碼蔬胯,在配置語言的地方加上lang配置處加上zh-cn氛濒,即可顯示中文舞竿。
這樣配置過后窿冯,ckeditor的圖片和視頻上傳都搞定醒串。接下來是服務端的問題芜赌。
html5video的中文語言包里面少了一個loop項目的配置缠沈,需要額外進行一下增加
CKEDITOR.plugins.setLang( 'html5video', 'zh-cn', {
button: '發(fā)布HTML5視頻',
title: 'HTML5視頻',
infoLabel: '視頻信息',
allowed: '支持格式: MP4, WebM, Ogv',
urlMissing: '視頻url',
videoProperties: '視頻屬性',
upload: '上傳視頻',
btnUpload: '上傳',
advanced: '高級',
autoplay: '自動播放',
poster:'測試',
loop:'循環(huán)播放',
allowdownload: '允許下載',
advisorytitle: '提示語',
yes: '是',
no: '否',
responsive: '自動寬度',
controls: '顯示控件'
} );
服務端
@PostMapping("/F3323/ajax5")
public CommonResult ajax5(@RequestParam("upload") MultipartFile file) {
CommonResult result = new CommonResult();
try {
//1.上傳文件到指定位置
String destFilePath = System.getProperty("user.dir") + "/res/tmp/";
String destFileName = file.getOriginalFilename();
FileUtil.mkdir(destFilePath);
file.transferTo(new File(destFilePath + destFileName));
result.put("uploaded",1);
result.put("fileName",file.getOriginalFilename());
result.put("url","/res/tmp/"+file.getOriginalFilename());
} catch (Exception ignored) {
}
return result;
}