记VueJs中调用Ckeditor4一坑

 

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

©️2020 CSDN 皮肤主题: 大白 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值