异步load()加载 ckeditor 编辑器

最新推荐文章于 2021-09-14 12:27:02 发布

原创最新推荐文章于 2021-09-14 12:27:02 发布 · 2.7k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ckeditor #编辑器

JavaScript 专栏收录该内容

16 篇文章

订阅专栏

本文介绍如何异步加载CKEditor编辑器，并解决了CKEDITOR未定义、lang.contextmenu.options为空等常见问题。同时提供了加载编辑器的JavaScript代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

异步加载ckeditor 编辑器，注意事项：

第一.CKEDITOR 未定义：js未加载ckeditor.js

解决方案：

1.将 js文件放在父页面

2. 首次请求生成编辑器，再次加载时，需要销毁上次生成的编辑器，重新生成新的编辑器

 <textarea  id="Content" rows="6" cols="10"></textarea>
    <script type="text/javascript">

        jQuery(function ()
        {
             // 300 弹窗高调
             LoadCk(300);
           
        });

        function LoadCk(hh)
        {

            //加载CKeditor
            //判定 Content 是否存在
            var editor;
            if (!CKEDITOR.instances.Content) {
               
                var editor = CKEDITOR.replace('Content', { height: 300 });
                

            } else {
                
                addCkeditor("Content", hh);
            }

        }
      //新增CKEDITOR
        function addCkeditor(id, hh)
        {
            var editor2 = CKEDITOR.instances[id];
            //销毁编辑器 Content, 然后新增一个
            if (editor2) editor2.destroy(true);
            editor = CKEDITOR.replace(id, { height: hh });
            
        }
    </script>

参考：http://blog.sina.com.cn/s/blog_7795200201013cjt.html

第二：lang.contextmenu.options' 为空或不是对象

解决方案：实质ckeditor js文件引用问题

1.对官方ckeditor.js 进行修改，导致某些配置勿删

2.ckeditor.js 路径是否正确

第三： ckeditor.js文件配置详情

参考：http://blog.csdn.net/yangchaofeng1229/article/details/6723235

获取ckeditor全部文本

//必须为提交按钮绑定click事件，手动去更新----begin-----
		jQuery('#ckeditorSubmit').click(function() {
			//需要手动更新CKEDITOR字段
			for (instance in CKEDITOR.instances)
				CKEDITOR.instances[instance].updateElement();
			return true;
		});
		$("form").off("submit");
		$("form").on("submit", function() {
			$("form").ajaxSubmit(function() {
				$("form input").val(""); //清空表单的值
				$("form textarea").val("");
				alert("添加成功");
			});
			//阻止表单的默认提交行为
			return false;
		});