记VueJs中调用Ckeditor4一坑

VueJs 2.3 开发一项目，过程中需要富文本编辑结果上传，在工程中index.html导入资源后，组件调用CKEDITOR.replace('editor1');初始化console.log显示如下错误。Uncaught TypeError: Cannot set property 'dir' of undefined这个问题很是困扰，前后翻腾了很久。把Google上这个主...

lirui0081

5520人浏览 · 2019-04-03 09:04:05

lirui0081 · 2019-04-03 09:04:05 发布

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模式，但是发现渲染不出来，全是白屏，尚未找到原因。

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^