VueJs 2.3 开发一项目，过程中需要富文本编辑结果上传，在工程中index.html导入资源后，组件调用CKEDITOR.replace('editor1');初始化console.log显示如下错误。
Uncaught TypeError: Cannot set property 'dir' of undefined
这个问题很是困扰，前后翻腾了很久。把Google上这个主题的帖子都看了一遍，大概是知道了问题出在 CKEDITOR_BASEPATH 的配置，但是这个怎么配置却讲得太少。按照Stack Overflow上一个帖子的示例“/startic/ckeditor.js”，但是还是不行依旧报错。问题转折就在这里，以为不是这个问题，遍挖空心思去查找其他蛛丝马迹。
而后用官方示例建了本地文件：
<html>
<head>
<meta charset="utf-8">
<title>CKEditor Sample</title>
<script src="./ckeditor.min.js"></script>
</head>
<body id="main">
<form>
<textarea name="editor1" id="editor1" rows="10" cols="40">
This is my textarea to be replaced with CKEditor.
</textarea>
<script>
// Replace the <textarea id="editor1"> with a CKEditor
// instance, using default configuration.
CKEDITOR.replace('editor1');
</script>
</form>
<script>
</script>
</body>
</html>使用Chrome的开发工具DevTool 分析网络请求：
相反再分析自己项目中Ckeditor发起的请求：
这里不够细心，没有细细想Ckeditor为什么发起资源请求的地址不对。既然ckeditor.js还是那个ckeditor.js那没有道理不在相对地址上请求资源。于是就没有去查找官方文档关于path、url等关键词的描述。更没有去看CKEDITOR_BASEPATH的配置方式。（后来https://stackoverflow.com/questions/8807029/how-do-you-define-the-path-which-ckeditor-uses-to-search-for-config-language-f 其实已经讲得很清楚了）
直到搜索到文档中alert( CKEDITOR.basePath )，对比单文件和项目的结果才发现不同。项目中vuejs开启了hash模式，所以basePath是"http://localhost/notice/#/",window.location.href也是如此，特别地有了window.location.hash=‘#/’。同时按照要求哟啊在ckeditor.js 载入前设定。
<script>
window.CKEDITOR_BASEPATH = '<%= BASE_URL %>/static/ckeditor/';
</script>
<script src="static/ckeditor/ckeditor.min.js"></script>至此，ckeditor正常初始化。
另外发现vuejs的hash路由模式产生问题的时候，尝试开启history模式，但是发现渲染不出来，全是白屏，尚未找到原因。
扫一扫
1225
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
