解决vue.js使用ckeditor的样式路径问题

最近在vue.js项目中使用ckeditor编辑器遇到样式加载路径不对的问题，说说我的解决办法。

我把editor单独封装成一个组件去调用，ckeditor.vue代码如下：

<template>
	<div id="ckeditor" style="width:100%;height:500px"></div>
</template>
<script >
	import '../../../static/ckeditor/ckeditor.js'
	import '../../../static/ckeditor/config.js'
	import '../../../static/ckeditor/lang/zh-cn.js'
	import '../../../static/ckeditor/styles.js'
	import init from '../../../static/ckeditor/init'
	
	export default{
		data(){
			return {

			}
		},
		created(){

		},
		mounted: function () {
			this.$nextTick(function () {
			 	init.run()
			})
		},
		methods:{

		}
	}
</script>
<style scoped>
	@import '../../../static/ckeditor/css/samples.css'
</style>

调用的时候发现没有效果，f12控制台也没有报错，看了下element编辑器确实是已经实例化了，那应该就是样式问题了。element继续往下展开，发现原来这哥们是用frame来实现的啊

看来我的猜测没错，样式路径有问题，咋办勒？当然看文档啊！ckeditor作为一个比较专业的富文本编辑器，文档还是比较专业的。打开官方文档地址：https://docs.ckeditor.com

，寻寻觅觅找到了这篇“Specifying the Editor Path"

正好是我们要找的，“By default, CKEditor is looking for the ckeditor.js file in the <script> tags present in the page in order to automatically retrieve its installation path. If it is not able to find it, just like in the cases presented above, the editor will simply not work.”，虽然我英文不咋样，好歹是过了四级，大概意思还是看得懂的，意思是说默认情况下，其他资源的路径都是以引入ckeditor.js的页面为根路径的，所以才出现了我们上面的样式路径问题，我的ckeditor.js确实是在http://localhost:8088/#/contract/页面引用的，人家已经给出了解决方法：加个全局变量 CKEDITOR_BASEPATH。

我们在index.html中加上这个全局变量

 <script type="text/javascript">
    	var CKEDITOR_BASEPATH = '/static/ckeditor/'
 </script>

我的编辑器文件是放在static/ckeditor，可根据你的实际情况更改。

有一点得注意，这个变量必须在引入ckeditor文件之前声明，否则没起到作用，文档已经作了说明。

“Note that this global JavaScript variable must be set before you include the CKEditor code. In the example above the variable definition was placed in-page, but it could also be included inside the all_my_scripts.js file, at the beginning (or in any case — before the editor code).”

最后的效果图：