CKEditor

介绍

CKEditor 是一款功能强大的开源在线文本编辑器。它所见即所得的特点,使你在编辑时所看到的内容和格式,能够与发布后看到的效果完全一致。利用它,我们可以在 Web 上实现类似于 Microsoft Word 的许多强大的功能。CKEditor 完全是基于 JavaScript 开发的,因此不必在客户端进行任何安装,并且兼容各大主流浏览器,比如:IE,Firefox,Chrome,Safari,Opera。而且由于它是一个纯粹的 JavaScript 应用,所以无论用的是哪种服务器端技术(JSP,PHP,ASP 等等),都可以获得很好的支持。


最简单的, CK就是一个JS拓展。只要将CK放到你项目的目录中,再用

<script src=".ckeditorckeditor.js"></script>

引入到文件中,然后在HTML页面中创建一个<textarea class="ckeditor">就可以了。这个textarea会自动变成富文本编辑器CK。

这是所有人都能听得懂的部分,以下部分若听不懂也没啥关系,理解这一部分就行了。


CKEDITOR.replace("ID");

这是用JS生成CK的方法,replace的第一个参数是要替换元素的ID属性。

官方文档

这个文档相对简单,啃的动就啃,内容足够复杂,若实在不懂也不强求。


replance的第二个参数为编辑器配置,格式如下:

CKEDITOR.replance("ID",{configKey:value, ... })

CK获取某个CK编辑器元素:

CKEDITOR.instances.CKID

常见方法和配置

获得编辑器中的内容:getData();
设置编辑器中的内容:setData();
编辑器的宽度:config.width = 640;
编辑器的高度:config.height = 100;
全部菜单:config.toolbar = 'Full';
基础菜单:config.toolbar = 'Basic';
自定义菜单:config.toolbar_Full = []

官方文档-API-Config

以上文档包含了全部的API,需要的时候可以去查。

demo:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="ckeditor/ckeditor.js" type="text/javascript"></script>
<script type="text/javascript">

    </script>
</head>

<body>
    <form action="http://data.dreamelf.cn/php/request.php" method="post">
        <span>Demo:</span>
        <textarea id="editor" name="text">输入你要提交的内容</textarea>
        <input type="submit" />
    </form>
    <script type=text/javascript>
        CKEDITOR.replace("editor");
    </script>
</body>
</html>
最后修改:2020 年 06 月 24 日 03 : 22 PM
如果觉得我的文章对你有用,请随意赞赏