ckeditor使用教程【简单快捷】

ckeditor是一款由javascript编写的富文本网页编辑器，它可以填写文字、插入图片、视频、Excel等富媒体信息，也可以在源码方式下填写内容，在各个网站中应用非常广泛。

下面就来说说ckeditor到底是怎么使用的。

• 首先百度中输入ckeditor，第一个链接就是它的官网，点击进入。

图片.png

• 点击右侧的download按钮。

图片.png

• 接下来会提示要下载哪种类型的包，建议第三种full package，因为这个全，点击Download CKEditor将它下载下来。

  
  图片.png

• 解压下载后的zip包，可以看到它里面有好多的js和css。 接下来就要进行配置了。

  
  图片.png

第一步：将ckeditor整个文件夹放到网站资源目录下，

第二步：在要添加ckeditor的网页上加入ckeditor.js，如下图。

图片.png

第三步：在要转换成富文本的textarea下方编写，刷新页面就可以看到了 不过这时候你会清楚的发现他有一个自带的保存按钮 一直灰色不可点击 ，所以这时候 有两种解决方案，可以重写保存方法 也可以机智的隐藏掉这个按钮 自己写一个保存按钮 这样会更加的直观 方便
js：CKEDITOR.replace('textarea的name')

  CKEDITOR.replace( 'rich_text')

第四步：在页面中即时设置编辑器

<script type="text/javascript">
                // 示例1：设置工具栏为基本工具栏，高度为70
                CKEDITOR.replace( 'rich_text',
                        {
                            toolbar :
                                    [
                                        //加粗     斜体，     下划线      穿过线      下标字        上标字
                                        ['Bold','Italic','Underline','Strike','Subscript','Superscript'],
                                        // 数字列表          实体列表            减小缩进    增大缩进
                                        ['NumberedList','BulletedList','-','Outdent','Indent'],
                                        //左对 齐             居中对齐          右对齐          两端对齐
                                        ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
                                        //超链接  取消超链接 锚点
                                        ['Link','Unlink','Anchor'],
                                        //图片    flash    表格       水平线            表情       特殊字符        分页符
                                        ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
                                        '/',
                                        // 样式       格式      字体    字体大小
                                        ['Styles','Format','Font','FontSize'],
                                        //文本颜色     背景颜色
                                        ['TextColor','BGColor'],
                                        //全屏           显示区块
                                        ['Maximize', 'ShowBlocks','-']
                                    ],height:400
                        }
                );
                </script>