CKEdiotr入门级使用
CKEdiotr是一款不错的网页富文本编辑器,其内置的功能最大满足用户的需求,先将CKEditor的简单实用做个总结,以便于日后查看、使用。我用的是.net平台,故而以下介绍的是.net的CKEditor。
第一步:获取CKEditor工具。
1.1在官网的下载页面下载你所需要的语言的CKEditor,官网是:http://ckeditor.com/download ,选择CKEditor 3.6.4 for ASP.NET(若有最新版本,建议使用最新版本,下同)。
1.2 只有CKEditor还是不够的,因为CKEditor只有富文本编辑功能没有上传功能,所以下载一个与之配套的CKFinder,官网是:http://cksource.com/ckfinder/download ,选择.net版本。
第二步:引用到项目中
2.0 把CKEditor和CKFinder两个文件复制到项目的适当位置(建议是UI层的根目录)。
2.1 使用CKEditor的时候需要在页面引用js,在解压后的CKEditor文件夹的根目录下引用ckeditor.js、config.js、ckeditor_basic.js这三个文件。
2.2 同样,需要引用CKFinder里的js文件:ckfinder.js、ckfinder_v1.js。
2.3 找到解压后的CKEditor文件夹中的ckeditor_aspnet_3.6.4\bin\Release目录下的CKEditor.NET.dll文件,复制到项目的Bin文件夹下并引用
2.4 找到解压后CKFinder文件夹中的ckfinder\bin\Release目录下的CKFinder.dll文件,复制到项目Bin文件夹中并引用。
2.5 页面注册:<%@ Register Assembly="CKEditor.NET" Namespace="CKEditor.NET" TagPrefix="CKEditor" %>
第三步:配置CKEditor和CKFinder
3.1 CKEditor中的config.js文件是对CKEditor的配置,这里可以自定义一些自己所需要的功能,一般的,我们只需定义编辑器的语言、背景色、高度、宽度、样式、皮肤、工具栏等这些基础的东西,这些使用手写代码设置的,具体的代码如下:
config.language='zh-cn';//中文
config.skin='kama';//皮肤
//取消“拖拽改变尺寸”功能
config.resize_enabled = false;
config.width=900;//宽
config.height=400;//高
// config.uiColor = '#FFF'; //背景颜色
//全能工具栏
config.toolbar = "Full";
// 基础工具栏
// config.toolbar = "Basic";
config.font_names='宋体/宋体;黑体/黑体;仿宋/仿宋_GB2312;楷体/楷体_GB2312;隶书/隶书;幼圆/幼圆;微软雅黑/微软雅黑;'+ config.font_names;
// 自定义工具栏
// config.toolbar =
// [
// ['Source', '-', 'Preview'], ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord'], ['Undo', 'Redo', '-', 'Find', 'Replace', '-', 'SelectAll', 'RemoveFormat'], ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', 'Blockquote', 'ShowBlocks'], '/',
// ['Bold', 'Italic', 'Underline', 'Strike', '-', 'Subscript', 'Superscript'], ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'], ['Link', 'Unlink', 'Anchor'], ['Image', 'Flash', 'Table', 'HorizontalRule', 'SpecialChar'], '/',
// ['Styles', 'Format', 'Font', 'FontSize'], ['TextColor', 'BGColor'], ['Maximize', '-', 'About']
// ];
config.tabSpaces = 4;
config.resize_maxWidth = 600; //如果设置了编辑器可以拖拽 这是可以移动的最大宽度
config.toolbarCanCollapse = false; //工具栏可以隐藏
//config.toolbarLocation = 'bottom'; //可选:设置工具栏在整个编辑器的底部bottom
config.resize_minWidth = 600; //如果设置了编辑器可以拖拽 这是可以移动的最小宽度
config.resize_enabled = false; //如果设置了编辑器可以拖拽
//验证非法数据
config.protectedSource.push( /<\s*iframe[\s\S]*?>/gi ) ; // <iframe> tags.
config.protectedSource.push( /<\s*frameset[\s\S]*?>/gi ) ; // <frameset> tags.
config.protectedSource.push( /<\s*frame[\s\S]*?>/gi ) ; // <frame> tags.
config.protectedSource.push( /<\s*script[\s\S]*?\/script\s*>/gi ) ; // <SCRIPT> tags.
config.protectedSource.push( /<%[\s\S]*?%>/g ) ; // ASP style server side code
config.protectedSource.push( /<\?[\s\S]*?\?>/g ) ; // PHP style server side code
config.protectedSource.push( /(<asp:[^\>]+>[\s|\S]*?<\/asp:[^\>]+>)|(<asp:[^\>]+\/>)/gi ) ;
//config.startupFocus = true; //打开时就focus
注意:这些代码全部是在config.js文件中的CKEDITOR.editorConfig = function( config ){};方法内;
3.2在CKEditor中集成CKFinder
3.2.1 在CKEditor的config.js中CKEDITOR.editorConfig = function( config ){};函数内添加如下语句:
//集成CKFinder
CKFinder.SetupCKEditor(null, '../ckfinder/');//第二个参数是ckfinder文件夹的路径,注意路径要正确
这句就是在CKEditor中集成CKFinder的语句,该语句不可少。否则不能上传图片视频等。
3.2.2 打开 " \ckfinder\config.ascx ",修改 BaseUrl 为 BaseUrl = "~/ckfinder/userfiles/";
// 注意“~” 以 userfiles 为默认路径,其目录下会自动生成images、flash等子目录。
第四步:在项目中调用CKEditor
调用的时候有人说可以把CKEditor放入工具栏中,直接拖动使用,这个方法我没有做出来(找到了,见下文),所以又找了个方法:直接用TextBox控件,具体的使用方法如下代码:
<asp:TextBox id="txtContent" class="ckeditor" TextMode="MultiLine" Text='<%# Bind("info") %>' runat="server"></asp:TextBox>
这种使用方法与其他.net控件使用方法相同,设置Text='<%# Bind("info") %>' 可以方便与数据源进行交互;使用CKEditor必须定义class="ckeditor"
附加
F1、 常见错误及排除:
ckfind文件夹的config.ascx中找到如下语句
症状:因为安全原因,文件不可浏览。请联系系统管理员并检查CKFinder配置文件。
语句:
public override bool CheckAuthentication()
{
reture false;
}
原因:未设置用户身份验证或者用户未登录,设置为 reture true;(不进行用户身份验证)即可。
症状:未知错误
语句:
public override bool CheckAuthentication()
{
reture true;
}
原因:设置不进行用户身份验证,但是 BaseUrl 路径不对。
调试页面,出现“A potentially dangerous Request.Form value was detected from the client",按照经验,在web.config中增加
<system.web>
<pages validateRequest="false"/>
system.web>
还是同样错误,在页面头部加入,
还是出错。
后来终于试着在config.js文件中添加下面一行:
config.htmlEncodeOutput = true;
OK!
F2、 解压后的CKEditor和CKFinder文件释义,如下图
图F2-1 CKFinder文件夹
图F2-2 CKEditor文件夹
F3、Config.js文件里的其他设置
//自定义的一些表情图片,对应的也要将表情包中名词改变;
config.smiley_images = ['1.gif','2.gif','3.gif','4.gif','5.gif','6.gif','7.gif','8.gif','9.gif','10.gif','11.gif','12.gif','13.gif','14.gif','15.gif','16.gif',
'17.gif','18.gif','19.gif','20.gif','21.gif','22.gif','23.gif','24.gif','25.gif','26.gif','27.gif','28.gif','29.gif','30.gif',
'31.gif','32.gif','33.gif','34.gif','35.gif','36.gif','37.gif','38.gif','39.gif','40.gif','41.gif','42.gif','43.gif','44.gif',
'45.gif','46.gif',"47.gif",'48.gif','49.gif','50.gif','51.gif','52.gif','53.gif','54.gif','55.gif','56.gif','57.gif','58.gif',
'59.gif','60.gif','61.gif','62.gif','63.gif','64.gif','65.gif','66.gif','67.gif','68.gif','69.gif','70.gif','71.gif','72.gif'];
//设置工具栏里面的工具 最主要的config.toolbar = [
['Bold','Italic','Underline','Strike','FontSize','NumberedList','BulletedList','Outdent','Indent','JustifyLeft',
'JustifyCenter','JustifyRight','Link','Unlink','TextColor','BGColor','Image','Flash','Smiley','Table',
'RemoveFormat','Source']
];
工具设置:
config.toolbar =
[
['Bold', 'Italic', 'Underline', 'Strike', '-', 'Subscript', 'Superscript'],
['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', 'Blockquote'],
['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],
['Link', 'Unlink', 'Anchor'],
['Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak'],
['Font', 'FontSize'],
['TextColor', 'BGColor'],
[ 'Undo', 'Redo']
];
F4、把CKEditor放入VS的自定义工具栏
首先找到ckeditor_aspnet_3.6.4\bin\Release目录下的CKEditor.NET.dll文件,放在一个不容易删且合适的位置,在VS的工具栏中右击,然后选择添加选项卡,设置名字为CKEditor,在CKEditor选项卡中右击,选择“选择项”,在“.NET Framework组件”中浏览到你刚才放的dll文件,然后确定。OK搞定!现在CKEditorControl控件已经出现在你的工具选项卡里了,其使用你可以参考TextBox的使用。
CKEdiotr入门级使用的更多相关文章
- IDEA入门级使用教程
原文链接:https://blog.csdn.net/qq_31655965/article/details/52788374 最智能的IDE IDEA相对于eclipse来说最大的优点就是它比ecl ...
- Winform 控件的入门级使用(一)
开始总结一下控件的基本用法,方便以后查阅. 一.Label Label 的使用频率很高,基本上也没有什么难度. #region Winform //label label.Text = "这 ...
- XCube和X组件的入门级使用教程
我也是一个入门级的初学者,在学习魔方的时候,很多不是很懂的地方,而网上的资料又比较少.尤其是Newlife的论坛打不开的情况下 所以就想着把这个初级项目做完后,做一个入门级教程.保证人人都看得懂(.^ ...
- IDEA入门级使用教程----你怎么还在用eclipse?
http://blog.csdn.net/qq_31655965/article/details/52788374
- iconfont 入门级使用方法
iconfont : what? 阿里妈妈MUX倾力打造的矢量图标管理.交流平台.设计师将图标上传到Iconfont平台,用户可以自定义下载多种格式的icon,平台也可将图标转换为字体,便于前端工程师 ...
- ansible的入门级使用
author: headsen chen date: 2018-08-02 11:46:35 1,ansible的安装 yum install epel-release yum -y i ...
- git 入门级使用
git-book 全局配置:(配置完之后,进行一次密码设置之后,无需再使用密码进行分支管理) git config --global user.name "zhxj" git co ...
- vim入门级使用
1.刚进入是 command mode 命令行模式 2.i 进入插入 insert mode 模式 在插入模式下只能 输入内容,如果要删除内容,需要切换到命令行模式,移动光标进行删除. 3.esc ...
- Jetpack系列:LiveData入门级使用方法
Android APP开发中,开发者们都想有一个公共的组件,可以实现后台数据的监听,同时实时更新到UI进行显示,从而大大简化开发过程.Google针对这一开发需求,提供了Jetpack LiveDat ...
随机推荐
- 由于出现操作系统错误 3,进程无法读取文件D:\XXXX\X.pre (源: MSSQL_REPL,错误号: MSSQL_REPL20024)
最近着手做SqlServer2008的订阅发布,起初使用推送订阅很顺利,后来改成请求订阅出现了以下问题,折腾好长时间终于搞定,留下此文备日后查阅,或供遇相同问题的道友参考: 首先阐述以下问题: 1. ...
- LeetCode Degree of an Array
原题链接在这里:https://leetcode.com/problems/degree-of-an-array/description/ 题目: Given a non-empty array of ...
- zju 校队选拔 被虐记
选拔已经开始了三天才想起来写游记 QAQ.. 7.12 弱弱的Sky_miner来到了ZJU,过程中被热成狗... 然后见到了无数大二大三的大佬们,过程中被热成狗... 后来听靖哥哥说集训的注意事项, ...
- webpack新版本4.12应用九(配置文件之输出(output))
output 位于对象最顶级键(key),包括了一组选项,指示 webpack 如何去输出.以及在哪里输出你的「bundle.asset 和其他你所打包或使用 webpack 载入的任何内容」. ou ...
- fn project 运行时配置选项
Env Variables Description Default values DB_URL The database URL to use in URL format. SeeDatabases ...
- checkStype和findBugs校验
IDEA可以直接在setting中下载checkStyle和findBugs <plugin> <groupId>org.codehaus.mojo</groupId&g ...
- 洛谷 1514 (NOIp2010) 引水入城
题目:https://www.luogu.org/problemnew/show/P1514 如果有解,一个第一行的格子能覆盖第n行的一定是一个连续的区间. 因为如果不连续,则有围住了一些第n行的格子 ...
- spring mvc处理http请求报错:java.lang.IllegalStateException: getInputStream() has already been called for this request
发送post请求到controller处理失败,报错日志如下: java.lang.IllegalStateException: getInputStream() has already been c ...
- java数组求输入平均值
真是学了后面忘了前面,一维数组都忘了 package com.c2; //总结类型转换不对,导致运行报错 //以及没有new,导致空指针异常 //引入流. import java.io.*; publ ...
- json数据url传递到php后台
1.js进行encodeURI jsonData = encodeURI(jsonData); 2.php进行urldecode $urldecodeJson = urldecode($json); ...