ckeditorckeditor入门


备注

CKEditor是一个基于JavaScript的WYSIWYG编辑器,用于在网页中使用。它是开源和基于插件的,使其既可定制又可扩展。

CKEditor网站可以在http://www.ckeditor.com找到,库的源代码可以在github上找到

可以在http://docs.cksource.com/Main_Page上找到CKEditor的官方文档

版本

笔记发布日期
4.2 JQuery Adapter,HiDPI图标,不再支持Internet Explorer 7和Firefox 3.6 2013年7月25日
4.2.1 2013年9月10日
4.2.2 二零一三年十月十四日
4.2.3 二零一三年十一月一十四日
4.3 小部件系统,Internet Explorer 11支持二〇一四年十一月十四日
4.3.1 二〇一三年十二月十日
4.3.2 2014年1月21日
4.3.3 2014年2月25日
4.3.4 2014年3月25日
4.3.5 2014年4月24日
4.4 Code Snippet插件,增强型图像插件,高级内容过滤器 2014年4月24日
4.4.1 二零一四年五月二十零日
4.4.2 2014年6月24日
4.4.3 2014年7月15日
4.4.4 2014年8月20日
4.4.5 2014年9月25日
4.4.6 情节中字
4.4.7 2015年1月27日
4.4.8 2015年7月2日
4.5 文件拖放支持,与本机剪贴板集成,新的低级API 2015年7月2日
4.5.2 2015年8月4日
4.5.3 2015年8月19日
4.5.4 2015年10月6日
4.5.5 2015年11月12日
4.5.6 2015年12月9日
4.5.7 2016年2月4日
4.5.8 2016年3月31日
4.5.9 2016年5月13日
4.5.10 2016年7月13日
4.5.11 2016年9月8日
4.6 新的默认皮肤,从Word重写粘贴,新插件:上传文件,气球面板 2016年11月15日
4.6.1 2016年12月8日

CKEditor - 内联编辑器示例

使用以下内容创建文件ckeditor-inline.html

<!DOCTYPE html>
<html>
<head>
    <title>CKEditor Inline Demo!</title>
</head>
<body>
    <script src="//cdn.ckeditor.com/4.6.1/basic/ckeditor.js"></script>
    <div id="editor1" contenteditable="true">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In est ipsum, elementum id ipsum vel, aliquam lobortis ligula. Nam vel purus eget nulla bibendum interdum at non orci. Nulla facilisi. Vivamus aliquet sapien risus. Mauris molestie efficitur pharetra. Aliquam erat volutpat. Fusce ac leo pretium, ornare libero et, tincidunt erat. Nunc tempus tortor eget ex ultricies, a cursus nibh fringilla.<br /><br />
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In est ipsum, elementum id ipsum vel, aliquam lobortis ligula. Nam vel purus eget nulla bibendum interdum at non orci. Nulla facilisi. Vivamus aliquet sapien risus. Mauris molestie efficitur pharetra. Aliquam erat volutpat. Fusce ac leo pretium, ornare libero et, tincidunt erat. Nunc tempus tortor eget ex ultricies, a cursus nibh fringilla.<br /><br />
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In est ipsum, elementum id ipsum vel, aliquam lobortis ligula. Nam vel purus eget nulla bibendum interdum at non orci. Nulla facilisi. Vivamus aliquet sapien risus. Mauris molestie efficitur pharetra. Aliquam erat volutpat. Fusce ac leo pretium, ornare libero et, tincidunt erat. Nunc tempus tortor eget ex ultricies, a cursus nibh fringilla.<br /><br />
    </div>
</body>
</html>
 

JSFiddle上的现场演示

代码说明

  1. 从CKEditor CDN加载CKEditor库:

        <script src="https://cdnjs.cloudflare.com/ajax/libs/ckeditor/4.6.1/ckeditor.js"></script>
     
  1. 使用编辑器中包含的所有内容创建一个新的DIV元素

    <div id="editor1" contenteditable="true">
    ALL CONTENT HERE
     </div>
     

这里要注意的重要一点是DIV 元素中的contenteditable="true" 。 CKEditor将使用内联编辑器自动替换具有contenteditable 属性的每个元素。

有关更多信息,请参阅文档

获取CKEditor的HTML内容

使用以下内容创建文件ckeditor-content.html

<!DOCTYPE html>
<html>
<head>
    <title>CKEditor Get Content Demo!</title>
</head>
<body>
    <script src="//cdn.ckeditor.com/4.6.1/basic/ckeditor.js"></script>
    <div id="editor1" contenteditable="true">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In est ipsum, elementum id ipsum vel, aliquam lobortis ligula. Nam vel purus eget nulla bibendum interdum at non orci. Nulla facilisi. Vivamus aliquet sapien risus. Mauris molestie efficitur pharetra. Aliquam erat volutpat. Fusce ac leo pretium, ornare libero et, tincidunt erat. Nunc tempus tortor eget ex ultricies, a cursus nibh fringilla.<br /><br />
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In est ipsum, elementum id ipsum vel, aliquam lobortis ligula. Nam vel purus eget nulla bibendum interdum at non orci. Nulla facilisi. Vivamus aliquet sapien risus. Mauris molestie efficitur pharetra. Aliquam erat volutpat. Fusce ac leo pretium, ornare libero et, tincidunt erat. Nunc tempus tortor eget ex ultricies, a cursus nibh fringilla.<br /><br />
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In est ipsum, elementum id ipsum vel, aliquam lobortis ligula. Nam vel purus eget nulla bibendum interdum at non orci. Nulla facilisi. Vivamus aliquet sapien risus. Mauris molestie efficitur pharetra. Aliquam erat volutpat. Fusce ac leo pretium, ornare libero et, tincidunt erat. Nunc tempus tortor eget ex ultricies, a cursus nibh fringilla.<br /><br />
    </div>
    <button id="btn1">Click to get the content</button>
    <script>
        document.getElementById('btn1').addEventListener('click', function() {
            content = CKEDITOR.instances.editor1.getData()
            console.log(content);
        }, false);
    </script>
</body>
</html>
 

JSFiddle上的现场演示

代码说明

  1. 从CKEditor CDN加载CKEditor库:

        <script src="https://cdnjs.cloudflare.com/ajax/libs/ckeditor/4.6.1/ckeditor.js"></script>
     
  1. 使用编辑器中包含的所有内容创建一个新的DIV元素

    <div id="editor1" contenteditable="true">
    ALL CONTENT HERE
     </div>
     
  2. 向我们的按钮添加一个click 侦听器,一旦单击 - 获取ckeditor的HTML内容。

     <script>
         document.getElementById('btn1').addEventListener('click', function() {
             content = CKEDITOR.instances.editor1.getData()
             console.log(content);
         }, false);
     </script>
     
  1. CKEDITOR.instances.editor1 编辑器editor1 的名称是我们使用的元素的id 属性的值( <div id="editor1" ... >
  2. 请注意console.log 的用法 - console.log 的HTML内容将在控制台中可用(您可以通过单击F12键打开控制台)

有关更多信息,请参阅内联文档页面。

入门

使用以下内容创建文件ckeditor.html

<!DOCTYPE html>
<html>
<head>
    <title>CKEditor Demo!</title>
</head>
<body>
    <script src="//cdn.ckeditor.com/4.6.1/basic/ckeditor.js"></script>
    <div id="editor1">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In est ipsum, elementum id ipsum vel, aliquam lobortis ligula. Nam vel purus eget nulla bibendum interdum at non orci. Nulla facilisi. Vivamus aliquet sapien risus. Mauris molestie efficitur pharetra. Aliquam erat volutpat. Fusce ac leo pretium, ornare libero et, tincidunt erat. Nunc tempus tortor eget ex ultricies, a cursus nibh fringilla.<br /><br />
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In est ipsum, elementum id ipsum vel, aliquam lobortis ligula. Nam vel purus eget nulla bibendum interdum at non orci. Nulla facilisi. Vivamus aliquet sapien risus. Mauris molestie efficitur pharetra. Aliquam erat volutpat. Fusce ac leo pretium, ornare libero et, tincidunt erat. Nunc tempus tortor eget ex ultricies, a cursus nibh fringilla.<br /><br />
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In est ipsum, elementum id ipsum vel, aliquam lobortis ligula. Nam vel purus eget nulla bibendum interdum at non orci. Nulla facilisi. Vivamus aliquet sapien risus. Mauris molestie efficitur pharetra. Aliquam erat volutpat. Fusce ac leo pretium, ornare libero et, tincidunt erat. Nunc tempus tortor eget ex ultricies, a cursus nibh fringilla.<br /><br />
    </div>
    
    <script>
    CKEDITOR.replace( 'editor1' );
    </script>
</body>
</html>
 

JSFiddle上的现场演示

代码说明

  1. 从CKEditor CDN加载CKEditor库:

        <script src="https://cdnjs.cloudflare.com/ajax/libs/ckeditor/4.6.1/ckeditor.js"></script>
     
  1. 使用编辑器中包含的所有内容创建一个新的DIV元素

    <div id="editor1">
    ALL CONTENT HERE
     </div>
     
  1. 告诉CKEDITOR 对象用一个WYSIWYG编辑器(CKEditor)用id editor1 替换该元素。

     <script>
     CKEDITOR.replace( 'editor1' );
     </script>
     

有关更多信息,请参阅CKEditor文档页面。