Advertisement

手把手教你用 CKEDITOR （2）: 初步安装与使用

阅读量：

下一期的文章已经成功获取了CKEditor软件包, 本次文章将向大家介绍它的基本操作方法。
CkEditor的操作极为简便, 只需完成几个基本操作流程即可实现功能。

  • 1、为了导入ckeditor的JavaScript文件和CSS样式表文件到你的HTML文档中。
  • 2、在你计划使用编辑器的位置上添加一个HTML文本输入框组件。
  • 3、通过在HTML文档的document ready事件中调用CKEditor.replace()方法来初始化编辑器。

让我们一步一步来做吧！

初始化

第一步，在解压后的目录中创建一个HTML文件，并将其命名为ckeditor_sample.html

这里写图片描述

2、编辑这个文件，输入以下代码：

复制代码 
    <html>
    <head></head>
    <body>
        <div>
            <textarea type="text" id="description" name="description"></textarea>
        </div>
        <script src="./ckeditor/ckeditor.js" type="text/javascript"></script>
        <script>
            $(document).ready(function () {
                CKEDITOR.replace('description', {
                });
            });
        </script>
    </body>
    </html>
    
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
    
    AI写代码

从这里可以看出，在文档中我们完成了三项操作：

  1. 通过添加元素为文档引入了一个文本域；
  2. 使用成功导入了ckeditor所需的JavaScript文件；
  3. 在document.addEventListener('ready')事件中调用CKEDITOR.replace方法，并将' description'文本域指定为替换目标。需要注意的是，在此过程中所使用的描述字段的id必须与之前定义的