CKEditor集成入门

简介

富文本编辑器是基于web的文本编辑器,其功能同样可以很强大,一些功能比较强大的富文本编辑器还被称为在线的office word。本文针对CKEditor富文本编辑器进行学习。

CKEditor是国外开源的富文本编辑器,其功能非常强大,支持内容编辑和文件上传,最关键的是它是不收费的。同样功能很强的富文本编辑器还有tinyMCE,其速度比CKEditor快,同样可以上传文件,不过这个要用到其官网的插件,插件时收费的,此处不作说明。

下面开始进入入门操作:

下载

我们可以访问CKEditor官网下载,对于普通的应用环境,我们可以选择默认的标准安装包进行下载。如果想要使用更多的编辑功能,则可以下载完整套件

实现

1、将下载的.zip文档解压,将解压后的ckeditor文件夹放入项目中。
2、创建一个包含<textarea>元素的简单HTML页面,然后完成以下两个动作
    ①使用<script>标签在页面中加载CKEditor
    ②使用CKEDITOR.replace()方法,将<textarea>元素转变为CKEditor编辑器

代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>A Simple Page with CKEditor</title>
<!-- 确保引入的js文件路径正确 -->
<script src="ckeditor/ckeditor.js"></script>
</meta>
</head>
<body>
    <form>
        <textarea name="myEdit" id="myEdit" rows="10" cols="80"> Hellow CKEditor </textarea>
        <script>
            <!-- Replace the <textarea id="myEdit"> with a CKEditor -->
             CKEDITOR.replace( 'myEdit' );
        </script>
    </form>
</body>
</html>

目录结构


3、完成后,在浏览器中打开测试页面。


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 28,543评论 1 45
  • 说说我为什么要坚持读书写书评。 ❤ 人生在世无非就是读书、历事、见人、行路,而这四种方法都能让我们学习到新的知识,...
    方知书影阅读 934评论 0 4
  • 20181219 去一家寿司店试工,整个过程能量完全紧缩,四个小时后出门,卡得死死的。心里想了半天要不要在这样的地...
    在通往内心的路上阅读 408评论 0 0
  • 30年前,他跟父母一起看奥斯卡颁奖典礼,父亲问他,你拿了全世界这么多电影奖项,什么时候也拿一个小金人啊?他笑着答道...
    联动书匠阅读 316评论 0 0
  • 忘了当初是怎么开始 只记得恍惚中有那个穿白衣的梦 为它,那么多年在书本题海中遨游 当梦想照进现实的时候 惊觉 那一...
    叫我云姐姐阅读 197评论 2 3

友情链接更多精彩内容