Vue整合CKeditor配置污筷、初始化颓屑、虛擬dom無法通過id獲取等問題解決

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以后再來配合id獲取組件的原生dom瞧哟。 比如我在使用drawer的自組件的show函數里面勤揩,這個show函數是供父組件調用的函數陨亡,在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.nextTick(() => {(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;
}

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
  • 序言:七十年代末禽篱,一起剝皮案震驚了整個濱河市躺率,隨后出現的幾起案子,更是在濱河造成了極大的恐慌慎框,老刑警劉巖笨枯,帶你破解...
    沈念sama閱讀 218,204評論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡压彭,警方通過查閱死者的電腦和手機壮不,發(fā)現死者居然都...
    沈念sama閱讀 93,091評論 3 395
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來家凯,“玉大人如失,你說我怎么就攤上這事褪贵。” “怎么了动雹?”我有些...
    開封第一講書人閱讀 164,548評論 0 354
  • 文/不壞的土叔 我叫張陵,是天一觀的道長茸塞。 經常有香客問我钾虐,道長效扫,這世上最難降的妖魔是什么荡短? 我笑而不...
    開封第一講書人閱讀 58,657評論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮闪盔,結果婚禮上辱士,老公的妹妹穿的比我還像新娘颂碘。我一直安慰自己头岔,他們只是感情好峡竣,可當我...
    茶點故事閱讀 67,689評論 6 392
  • 文/花漫 我一把揭開白布颂碧。 她就那樣靜靜地躺著载城,像睡著了一般肌似。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上诉瓦,一...
    開封第一講書人閱讀 51,554評論 1 305
  • 那天锈嫩,我揣著相機與錄音,去河邊找鬼垦搬。 笑死,一個胖子當著我的面吹牛艳汽,可吹牛的內容都是我干的猴贰。 我是一名探鬼主播河狐,決...
    沈念sama閱讀 40,302評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼米绕,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了馋艺?” 一聲冷哼從身側響起栅干,我...
    開封第一講書人閱讀 39,216評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎捐祠,沒想到半個月后碱鳞,有當地人在樹林里發(fā)現了一具尸體,經...
    沈念sama閱讀 45,661評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡踱蛀,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,851評論 3 336
  • 正文 我和宋清朗相戀三年窿给,在試婚紗的時候發(fā)現自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片率拒。...
    茶點故事閱讀 39,977評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡崩泡,死狀恐怖,靈堂內的尸體忽然破棺而出猬膨,到底是詐尸還是另有隱情角撞,我是刑警寧澤,帶...
    沈念sama閱讀 35,697評論 5 347
  • 正文 年R本政府宣布勃痴,位于F島的核電站谒所,受9級特大地震影響,放射性物質發(fā)生泄漏召耘。R本人自食惡果不足惜百炬,卻給世界環(huán)境...
    茶點故事閱讀 41,306評論 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望污它。 院中可真熱鬧剖踊,春花似錦庶弃、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,898評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至梆造,卻和暖如春缴守,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背镇辉。 一陣腳步聲響...
    開封第一講書人閱讀 33,019評論 1 270
  • 我被黑心中介騙來泰國打工屡穗, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人忽肛。 一個月前我還...
    沈念sama閱讀 48,138評論 3 370
  • 正文 我出身青樓村砂,卻偏偏與公主長得像,于是被迫代替她去往敵國和親屹逛。 傳聞我的和親對象是個殘疾皇子础废,可洞房花燭夜當晚...
    茶點故事閱讀 44,927評論 2 355