CKEditor集成入门

作者: 开心跳蚤 | 来源:发表于2019-05-11 00:54 被阅读0次

    简介

    富文本编辑器是基于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、完成后,在浏览器中打开测试页面。


    相关文章

      网友评论

        本文标题:CKEditor集成入门

        本文链接:https://www.haomeiwen.com/subject/yndfdftx.html