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: '发布HTML5视频',
title: 'HTML5视频',
infoLabel: '视频信息',
allowed: '支持格式: MP4, WebM, Ogv',
urlMissing: '视频url',
videoProperties: '视频属性',
upload: '上传视频',
btnUpload: '上传',
advanced: '高级',
autoplay: '自动播放',
poster:'测试',
loop:'循环播放',
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;
}

最后编辑于：2021.11.20 08:06:05