Ckeditor4编辑器 下载、安装、使用教程

由于项目以前用的是Simditor编辑器,顾客不满意,要求用Ckeditor编辑器,Ckeditor分为:Ckeditor4与Ckeditor5,经过全盘考虑+兼容,最终选择用Ckeditor4编辑器比较好。

 

Ckeditor4也是一款非常好的HTML编辑器。先给大家展示一下我最终实现的功能,自带的功能我就不多说了,我就说一些与众不同的功能。

 

1、表格。

Ckeditor4表格

 

2、插入代码段:语法高亮+编程语言选择。

Ckeditor4插入代码段

 

3、可以直接在编辑器内调整插入的图像的大小,是正比缩略。

Ckeditor4图像大小调整

 

4、自动保存与字数统计。

Ckeditor4自动保存与字数统计

 

一、Ckeditor4 下载

官方下载网址:https://ckeditor.com/ckeditor-4/download/

 

下载的时候,建议大家选择“Full Package”,如果你想私人定制,又不怕踩坑的话,就选择“Customize”。Full Package

 

由于我用的是私人定制,很多插件以及相应的配置我都设置好了,效果就如上面所说的那样,如果你也想拥有这些功能,下面我将分享给大家:

百度网盘下载链接: https://pan.baidu.com/s/1sO35EV7xMOIg_7dvzOjiQA

提取码: k8yg

解压密码:www.fujieace.com

如果网盘链接有失效,请评论区留言或Q上主动联系我!

 

二、Ckeditor4 安装

主要是把ckeditor4部署到我们的应用程序中去。

 

第一步:将ckeditor4解压,并将整个文件夹放到网站资源目录下。

例如:网站根目录/admin/ckeditor4

Ckeditor4文件目录

 

第二步:在要添加ckeditor的网页head头部引入ckeditor.js。

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>后台管理系统 - 付杰博客</title>
    <script src="/admin/ckeditor/ckeditor.js?x61917"></script>  
</head>

 

第三步:创建经典编辑器。

重点看textarea与JS代码,那里很重要。

filebrowserBrowseUrl与filebrowserUploadUrl这是编辑器自带集成的CKFinder文件管理器+上传路径。

filebrowserWindowWidth与filebrowserWindowHeight是设置CKFinder文件管理器的宽与高。

 <div class="layui-form-item layui-form-text">
      <label class="layui-form-label">正文内容</label>
      <div class="layui-input-block">
          <textarea name="contents" id="editor1" rows="10" cols="80"></textarea>
      </div>

</div>
<script>
           // Replace the <textarea id="editor1"> with a CKEditor 4
           // instance, using default configuration.
         var editor = CKEDITOR.replace( 'editor1', {
               filebrowserBrowseUrl: '/ckfinder/ckfinder.html',
               filebrowserUploadUrl: '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files',
               filebrowserWindowWidth: '80%',
               filebrowserWindowHeight: '70%'
           } );

           editor.on( 'change', function( evt ) {
               CKEDITOR.instances.editor1.updateElement();
               //console.log(evt.editor.getData());
               //console.log( document.getElementById( 'editor1' ).value ); // The current editor data.
           });
</script>

 

三、Ckeditor4 使用

编辑器虽然显示出来了,但是想要好好的使用还不是那么的简单?请看下面的知识:

 

1、JS获取编辑器的内容,获取值

CKEDITOR.instances.editor1.getData(); 

document.getElementById( 'editor1' ).value

 

注意:如果想要时实更新获取编辑器的内容,必须要先更新,需要用以下代码:

CKEDITOR.instances.editor1.updateElement();

这也就是为什么,我最上面的代码需要用上change事件。

 

2、赋值

CKEDITOR.instances.editorid.setData();

 

友情提示:

很多新人在使用 CKEDITOR.instances.editor1.getData();  的时候,有时候会出现获取不到值,那是因为你没有利用事件来触发获取值,不能直接获取的。

    A+
发布日期:2021年04月15日 18:49:49  所属分类:Ckeditor编辑器
最后更新时间:2024-02-01 15:00:37
标签:
付杰
  • ¥ 298.0元
  • 市场价:498.0元
  • ¥ 199.0元
  • 市场价:179.0元
  • ¥ 89.0元
  • 市场价:129.0元
  • ¥ 189.0元
  • 市场价:269.0元

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:2   其中:访客  0   博主  0

  1. 头像 熊熊 0

    大哥,百度网盘下载的文件解压需要密码,可是密码在哪儿呢~~

    • 付杰 付杰

      @熊熊 解压密码一般是以下这个网址:www.fujieace.com