记VueJs中调用Ckeditor4一坑

最新推荐文章于 2024-05-14 09:37:42 发布

lirui0081

最新推荐文章于 2024-05-14 09:37:42 发布

阅读量5.4k

点赞数 4

分类专栏： VueJs

本文链接：https://blog.csdn.net/lirui0081/article/details/88987227

版权

VueJs 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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

lirui0081

关注

4
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
记VueJs中调用Ckeditor4一坑

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

扫一扫