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

最新推荐文章于 2024-07-31 15:32:16 发布

iMyWhale

最新推荐文章于 2024-07-31 15:32:16 发布

阅读量2.6k

点赞数 1

分类专栏：手把手教你用CkEditor 文章标签： ckeditor jquery js java script

本文链接：https://blog.csdn.net/iMyWhale/article/details/79495174

版权

本文介绍如何初步安装和使用CKEDITOR。通过引入JS和CSS包，创建textarea，然后在document.ready事件中使用CKEDITOR.replace进行初始化。在遇到jQuery依赖问题时，引入jQuery库解决问题。同时，讲解了获取和设置编辑器值的方法，为读者提供了CKEDITOR的基础操作指南。

摘要由CSDN通过智能技术生成

上一篇，我们已经下载了CKEditor，这一篇，我们来看看怎么使用吧！
CkEditor的使用非常简单，只需要几个步骤：

1、在你的html文档中引入ckeditor的js包与css包
2、在你需要使用编辑器的地方，放置一个 textarea 控件
3、在html文档的document.ready事件中，使用CKEditor.replace命令初始化

让我们一步一步来做吧！

初始化

1、首先在解压缩出来的目录上，新建一个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>

从这里我们可以看到，我们根据文档的提示做了三个事情：
1、用<textarea type="text" id="description" name="description"></textarea>在文档中放置了一个文本域；
2、用<script src="./ckeditor/ckeditor.js" type="text/javascript"></script>引入了ckeditor所需要的js文件；
3、在document.ready函数中，用CKEDITOR.replace('description', {});来初始化了CKEDITOR，这个方法，会把id名称为‘description’的文本域，替换为CKEDITOR。注意，这里面的参数description要和上文中textarea控件的id严格一致！

现在，用浏览器打开这个ckeditor_sample.html看一下什么效果吧：