1.首先准备所需要的插件

(1). CKEditor4.4.5  下载地址:http://ckeditor.com/download。如果不想下载直接引用CKEditor的CDN也是可以的。cdn地址:<script src="//cdn.ckeditor.com/4.4.5/standard/ckeditor.js"></script>

(2). 自从4.1版发布之后,插入高亮代码功能已经提供相应的功能。不用用户在自己去写扩展组件。只是需要用户下载codesnippet插件放到CKEditor的plugins目录即可。

  Code Snippet的下载地址:http://ckeditor.com/addon/codesnippet

  Code Snippet是CKEditor4.4.1的新插件,主要提供添加代码片段高亮显示的功能。另外注意一点的是,Code Snippet只是作为CKEditor的插件,真正实现代码高亮的是highlight.js这个代码高亮JS库。

  Code Snippet只是将highlight.js作为默认的高亮库,由于highlight.js已经集成在Code Snippet中,所以我们在使用CKEditor时候是不需要另外再引用highlight.js这个库。(点击这里查看highlight.js的官方网站)。

  以前的CKEditor版本由于没有比较好的代码高亮插件,都是自己自定义插件,当时用的是SyntaxHighlighter这个代码高亮库。大家也可网上搜下SyntaxHighlighter的资料。

然后设置下ckeditor的config.js配置文件,将插件添加进去即可,代码如下(这里只设置了一个插件属性,其他属性可根据需要设置):

也可以设置高亮样式:config.codeSnippet_theme = 'zenburn'; 默认的是defualt;

这里有一点需要注意,如果按照上面添加插件的步骤而出现下面这两个错误:关于lineutils和widget 的,意思是找不到这两个插件。这时需要我们去官网下载这个插件加入即可:

lineutils 下载地址: http://ckeditor.com/addon/lineutils

widget 下载地址:http://ckeditor.com/addon/widget

下载页面如图所示:

这里提供两个方式可以加入此插件,1就是直接下载,2.点击Add to my editor按钮。在线添加插件。

此时高亮代码已经添加成功l.

第二部分上传图片

和以往的版本不同。4.4.5版本上传图片也增加了叫ckfinder的插件。

CKFinder 下载地址: http://cksource.com/ckfinder/download,注意:根据自己情况下载不同语言版本的。

稍后更新。没时间了。

CKEditor4.4.5 插入高度代码及上传图片的更多相关文章

  1. Html页面插入flash代码

    转自:http://www.educity.cn/jianzhan/402117.html 转自:http://www.cnblogs.com/yxc_fj/articles/1390621.html ...

  2. XSS代码触发条件,插入XSS代码的常用方法

    1.脚本插入 (1)插入javascript和vbscript正常字符. 例1:<img src=”javascript:alert(/xss/)”> 例2:<table backg ...

  3. kindeditor自定义插件插入视频代码

    kindeditor自定义插件插入视频代码 1.添加插件js 目录:/kindeditor/plugins/diy_video/diy_video.js KindEditor.plugin('diy_ ...

  4. 小程序插入html代码

    转自:https://blog.csdn.net/BetterGG/article/details/81027291 一.首先,html 分 2 种情况: 1.我在做详情页开发的时候发现获取到的数据是 ...

  5. 在Latex中插入Python代码

    这里指的插入是指最终能在生成的pdf中显示高亮的Python代码. 在Latex中插入Python代码,需要一个第三发的宏包pythonhighlight: https://github.com/ol ...

  6. 使用<script>标签在HTML网页中插入JavaScript代码

    新朋友你在哪里(如何插入JS) 我们来看看如何写入JS代码?你只需一步操作,使用<script>标签在HTML网页中插入JavaScript代码.注意, <script>标签要 ...

  7. 使用xcodeproj 动态插入第三方代码

    # 为什么这么做? 现在有这么一个使用场景,基线能生成项目A,项目B,项目C...如果只有项目A中使用SDK_A,其他项目都不使用,这时候就需要对基线进行差分,只有当我切换到项目A时,才插入SDK_A ...

  8. [杂记]如何在ppt里插入高亮代码

    在为c语言习题课准备课件的时候发现需要向ppt内插入代码,简单的文本粘贴没有高亮,格式也很混乱需要自己慢慢调,于是自己鼓捣了一下,实现了向ppt内插入高亮代码. [所需软件]Office PowerP ...

  9. html中插入flash代码详解(转载)

    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://down ...

随机推荐

  1. 市场上主流的BI产品的“答案之书”

    本文来自网易云社区. 从20世纪80年代开始,商业智能的定义出现在人们面前,早期商业智能十分基础和杂乱,不仅仅会把数据处理放进去.还包含有一些可视化方面内容等.这个时期的BI主要的功能是支持多维分析和 ...

  2. 几款Web服务器性能压力测试工具

    一.http_load 程序非常小,解压后也不到100K http_load以并行复用的方式运行,用以测试web服务器的吞吐量与负载. 但是它不同于大多数压力测试工具,它可以以一个单一的进程运行,一般 ...

  3. nginx添加缓存以及判断是否缓存生效

    location ~.*\.(js|css|html|png|jpg|gif)$ { expires 3d; } expires    3d; //表示缓存3天 expires    3h; //表示 ...

  4. PyCharm中的Console调整字体大小

    file-->settings-->Editor-->color Scheme-->Console Font -->  size  调整大小

  5. uoj#119. 【UR #8】决战圆锥曲线(线段树+复杂度分析)

    题解 传送门 题解 然而要我来说我感觉只是个爆搜啊-- //minamoto #include<bits/stdc++.h> #define R register #define ll l ...

  6. [51nod1222] 最小公倍数计数(莫比乌斯反演)

    题面 传送门 题解 我此生可能注定要和反演过不去了--死都看不出来为啥它会突然繁衍反演起来啊-- 设\(f(n)=\sum_{i=1}^n\sum_{j=1}^n[{ij\over\gcd(i,j)} ...

  7. luogu4430 小猴打架

    假硕讲了个prufer编码和Caylay公式 我为了证明prufer编码没用 所以用矩阵树定理证明了Caylay公式 让我们用矩阵树定理推一波 首先这个小猴打架最后会打成一棵树,这棵树是N个点的完全图 ...

  8. 何为 “元组”(Tuple)?

    元组是关系数据库中的基本概念,关系是一张表,表中的每行(即数据库中的每条记录)就是一个元组,每列就是一个属性.  在二维表里,元组也称为记录.

  9. hdu1698 线段树(区间更新~将区间[x,y]的值替换为z)

    Just a Hook Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total ...

  10. Linux下如何使用Wireshark进行抓包

    1. 安装wireshark Ubuntu 14.04.3 缺省安装后, 不包含Wireshark抓包软件,因此首先需要手工进行Wireshark的安装:     apt-get update apt ...