ckeditor学习(二)

2023-12-01 10:32
文章标签 学习 ckeditor

本文主要是介绍ckeditor学习(二),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!


部署:
将CKeditor下载下来,解压网站/ckeditor/下面(当然名字可以修改,只是需要修改相应config文件来设置新路径)
调用:
在页面的head中调用
  <script type="text/javascript"src="/ckeditor/ckeditor.js"></script>
然后在需要编辑器的地方放置一下代码:
复制代码 代码如下:
<textarea cols="80" id="Text" name="Text"rows="10">这里是默认值,修改文本的内容是放在这里。html需要进行HTMLEncode编码</textarea>
<script type="text/javascript">
var editor = CKEDITOR.replace('Text');
</script>

搞定,就这么简单,CKEDITOR.replace('Text')就是创建编辑器的代码,CKEDITOR.replace()方法中还可以设置编辑器的样式,设置如下
复制代码 代码如下:
var editor = CKEDITOR.replace( 'Text',
{
language:'zh-cn',//简体中文
toolbar ://工具栏设置
[
['Source'],
'/',
['Cut','Copy','Paste','PasteText','PasteFromWord'],
['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
['TextColor','BGColor'],
]
});


具体的设置有很多,具体的可以查看他的帮助:http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html
这个设置可以在/ckeditor/config.js中设置,在这里设置之后,就修改了编辑器的默认默认设置,而上面设置只应用于当前编辑器。
具体的设置方法如下


复制代码 代码如下:
CKEDITOR.editorConfig = function( config )
{
// Define changes to default configuration here. For example:
config.language = 'zh-cn'; //配置语言
//config.uiColor = '#FFF'; //背景颜色
config.width = 500; //宽度
config.height = 400; //高度
config.skin='v2'; //设置编辑器的风格,不太喜欢现在的样子,还是喜欢v2版本的样子,干净、清爽。
//工具栏
config.toolbar =
[
['Source'],
'/',
['Cut','Copy','Paste','PasteText','PasteFromWord'],
['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
['TextColor','BGColor'],
]
};

数据提交
到这里我们已经基本上设置好了。如果调用的话后台可以使用request["text"]来获取编辑器的文本。
在fckeditor(Ver 2.0)中时,它提供了一个web控件,可以直接使用,但是在3.x中好像没有提供,好在我用的Asp.net Mvc所以有没有的对我来说没有任何问题。
提到上面的一句是因为,默认的asp.net是禁止上传带有html标签的文本的,当然可以通过修改页面的配置来实现,但是在fckeditor(Ver 2.0)中他在提交数据前对内容进行了HTMLEncode(将&<>分别替换成了&<>),确实是一个非常棒的方法,这样就不需要对asp.net的默认设置进行修改。
但是在CKeditor中默认提交就是将原始的数据直接post了,后来通过以前老版本的代码发现其实CKeditor提供了一个方法可以进行 HTMLEncode,它就是CKEDITOR.tools.htmlEncode(string),如果直接使用form表填submit就没有办法实 现了,所以只能采用JavaScript进行提交。我的选择是使用jQuery的ajax方式提交。代码如下:
复制代码 代码如下:
$(function(){
$("#btSubmit").click(function(){//$("#btSubmit")获取的是提交按钮,这里绑定提交按钮的click事件
var oEditor = CKEDITOR.instances.Text;//获得编辑器对象
var text = oEditor.getData();//获取编辑器的数据
text = CKEDITOR.tools.htmlEncode(text);//进行HTMLEncode编码
$.post("PostUrl",{Text:text},callback);//提交数据,具体的调用方式和返回类型请查阅jQuery的帮助
function callback(data){}//回调函数
});
})

提交到服务器在进行反向的编码就可以了。
安全性
通过上面的提交虽然很好,但是绕过了系统默认的安全防御,很容易被提交恶意代码,所以在服务器端还需要进行安全的验证。
虽然CKeditor提供了验证的设置方法,但是我没有试验成功(Ver2时代就没成功),不晓得他是怎么运作的,有时间好好研究下,代码如下:
复制代码 代码如下:
//在/ckeditor/config.js文件的CKEDITOR.editorConfig中添加一下代码
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 sidecode
config.protectedSource.push( /<\?[\s\S]*?\?>/g ) ; // PHP style serverside code
config.protectedSource.push(/(<asp:[^\>]+>[\s|\S]*?<\/asp:[^\>]+>)|(<asp:[^\>]+\/>)/gi) ;

服务器端的验证项目跟上面提到的一样,都是根据标签名称来判断是否允许提交。
文件上传
在新版本中文件上传方式有了很大的改变。它采用CKfinder这个插件来实现,首先还是需要下载一个CKfinder解压到网站/CKfinder/下面
路径也可以修改,修改后需要调用代码、/CKfinder/config.ascx文件、/CKfinder/ckfinder.js文件
/CKfinder/config.ascx文件需要修改BaseUrl = "/新文件夹名/userfiles/";
/CKfinder/ckfinder.js文件需要修改CKFinder.DEFAULT_BASEPATH ='/新文件夹名/';
调用方式:
复制代码 代码如下:
<textarea cols="80" id="Text" name="Text"rows="10"></textarea>
<script type="text/javascript">
var editor = CKEDITOR.replace( 'Text');
CKFinder.SetupCKEditor(editor, '/新文件夹名(或默认)/');
</script>

现在在打开编辑器的图片、链接、flash,窗口就多了一个上传选项卡,可以选择上传,还提供了浏览功能。
因为涉及到文件夹的访问权限,功能与我的网站需求不符,所以我没有使用它提供的默认上传,对他进行了修改。
上传方式的修改
我的图片服务器是image.tiyu.cc而网站的服务器是http://www.jb51.net/,也不需要它提供的浏览功能,而且除了图片上传,不允许上传其他的文件。
这样就需要有三个地方需要修改,1.修改默认上传2.取消浏览功能3.取消文件、flash上传功能。
CKeditor的上传路径设置在/CKfinder/ckfinder.js中,有一项设置是CKFinder.SetupCKEditor,它的下面有以下代码,可以设置是否需要图片、文件、flash的浏览路径以及上传路径。
复制代码 代码如下:
//设置文件的浏览路径
editorObj.config.filebrowserBrowseUrl = url ;
//设置图片的浏览路径
editorObj.config.filebrowserImageBrowseUrl = url + qs + 'type=' + ( imageType|| 'Images' ) ;
//设置flash文件浏览路径
editorObj.config.filebrowserFlashBrowseUrl = url + qs + 'type=' + ( flashType|| 'Flash' ) ;
//设置文件上传文件地址
editorObj.config.filebrowserUploadUrl = dir + "core/connector/" +ckfinder.ConnectorLanguage + "/connector."
+ ckfinder.ConnectorLanguage + "?command=QuickUpload&type=Files";
//设置图片文件上传地址
editorObj.config.filebrowserImageUploadUrl = dir + "core/connector/"+ ckfinder.ConnectorLanguage + "/connector."
+ ckfinder.ConnectorLanguage + "?command=QuickUpload&type=" + (imageType || 'Images' ) ;
//设置flash文件上传地址
editorObj.config.filebrowserFlashUploadUrl = dir + "core/connector/"+ ckfinder.ConnectorLanguage + "/connector."
+ ckfinder.ConnectorLanguage + "?command=QuickUpload&type=" + (flashType || 'Flash' ) ;

根据CKeditor是根据上传路径的有无来控制是否显示相应的上传标签,浏览按钮也是。
根据上面的需求,设置如下:
复制代码 代码如下:
//设置文件的浏览路径
editorObj.config.filebrowserBrowseUrl = "";
//设置图片的浏览路径
editorObj.config.filebrowserImageBrowseUrl = "";
//设置flash文件浏览路径
editorObj.config.filebrowserFlashBrowseUrl = "";
//设置文件上传文件地址
editorObj.config.filebrowserUploadUrl = "";
//设置图片文件上传地址
editorObj.config.filebrowserImageUploadUrl = "新地址";
//设置flash文件上传地址
editorObj.config.filebrowserFlashUploadUrl = "";

设置到这里再次打开编辑器的相应窗口就会发现除了图片上传按钮外其他的浏览上传都隐藏掉了。
创建新的上传文件
具体步骤是,首先创建一个新的上传接收文件,接受并保存上传的文件,然后将文件的路径反馈给编辑器。
编辑器的接收是通过一个方法实现的,具体如下:
  CKEDITOR.tools.callFunction(fnID, 'FileUrl','Message');</script>
其中fnID是调用的实际方法的编号,不同的浏览器,CKeditor调用不同的方法。
我们只需要调用上面的方法就可以了,具体上传成功后,在页面上输出一下代码
<script type="text/javascript">window.parent.CKEDITOR.tools.callFunction(fnID,'http://www.jb51.net/image.jpg', '上传成功');</script>
FileUrl、Message,可以只有一个,也可以同时存在。Message主要应用于上传失败时的提示信息。
关于fnID,这个具体的说明不是很清楚,但是通过代码发现FF浏览器它的值是2,其他的浏览器是1,通过这个可以得出结论是,通过它来告知CKeditor来调用哪个方法接受上传反馈信息。
这个值,可以通过我们自己的程序去获得。但是更好的方式是CKeditor给我们提供的值,当我们设置editorObj.config.filebrowserImageUploadUrl = "新地址"时CKeditor会自动为我们增加几个个url参数:
新地址?CKEditor=Text&CKEditorFuncNum=2&langCode=zh-cn
其中CKEditorFuncNum就是我们需要的fnID,我们可以直接获取到,然后反馈回来就好了。
如果选择跨域上传,只需要在当前域(http://www.jb51.net/)设置一个GetFile.aspx他有三个参数,分别是接受fnID,FileUrl、Message这三个值,在我们的editorObj.config.filebrowserImageUploadUrl中设置成http://Image.jb51.net/upfile.aspx?backUrl=http://www.jb51.net/GetFile.aspx,就可以了,image.jb51.net域的upfile.aspx接受到文件,处理完成之后:
复制代码 代码如下:
ImageUrl="http://image.jb51.net/UpFile/2009/11/1/2009111201346_695.jpg"
Message="根据错误与否,设置,没有错误可以为空"
CKEditorFuncNum=request("CKEditorFuncNum")
response.Redirect("http://www.jb51.net/GetFile.php?ImageUrl="+ImageUrl + "&Message=" + Message + "&CKEditorFuncNum="+ CKEditorFuncNum)

 

这篇关于ckeditor学习(二)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/440825

相关文章

Java深度学习库DJL实现Python的NumPy方式

《Java深度学习库DJL实现Python的NumPy方式》本文介绍了DJL库的背景和基本功能,包括NDArray的创建、数学运算、数据获取和设置等,同时,还展示了如何使用NDArray进行数据预处理... 目录1 NDArray 的背景介绍1.1 架构2 JavaDJL使用2.1 安装DJL2.2 基本操

HarmonyOS学习(七)——UI(五)常用布局总结

自适应布局 1.1、线性布局(LinearLayout) 通过线性容器Row和Column实现线性布局。Column容器内的子组件按照垂直方向排列,Row组件中的子组件按照水平方向排列。 属性说明space通过space参数设置主轴上子组件的间距,达到各子组件在排列上的等间距效果alignItems设置子组件在交叉轴上的对齐方式,且在各类尺寸屏幕上表现一致,其中交叉轴为垂直时,取值为Vert

Ilya-AI分享的他在OpenAI学习到的15个提示工程技巧

Ilya(不是本人,claude AI)在社交媒体上分享了他在OpenAI学习到的15个Prompt撰写技巧。 以下是详细的内容: 提示精确化:在编写提示时,力求表达清晰准确。清楚地阐述任务需求和概念定义至关重要。例:不用"分析文本",而用"判断这段话的情感倾向:积极、消极还是中性"。 快速迭代:善于快速连续调整提示。熟练的提示工程师能够灵活地进行多轮优化。例:从"总结文章"到"用

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

学习hash总结

2014/1/29/   最近刚开始学hash,名字很陌生,但是hash的思想却很熟悉,以前早就做过此类的题,但是不知道这就是hash思想而已,说白了hash就是一个映射,往往灵活利用数组的下标来实现算法,hash的作用:1、判重;2、统计次数;

零基础学习Redis(10) -- zset类型命令使用

zset是有序集合,内部除了存储元素外,还会存储一个score,存储在zset中的元素会按照score的大小升序排列,不同元素的score可以重复,score相同的元素会按照元素的字典序排列。 1. zset常用命令 1.1 zadd  zadd key [NX | XX] [GT | LT]   [CH] [INCR] score member [score member ...]

【机器学习】高斯过程的基本概念和应用领域以及在python中的实例

引言 高斯过程(Gaussian Process,简称GP)是一种概率模型,用于描述一组随机变量的联合概率分布,其中任何一个有限维度的子集都具有高斯分布 文章目录 引言一、高斯过程1.1 基本定义1.1.1 随机过程1.1.2 高斯分布 1.2 高斯过程的特性1.2.1 联合高斯性1.2.2 均值函数1.2.3 协方差函数(或核函数) 1.3 核函数1.4 高斯过程回归(Gauss

【学习笔记】 陈强-机器学习-Python-Ch15 人工神经网络(1)sklearn

系列文章目录 监督学习:参数方法 【学习笔记】 陈强-机器学习-Python-Ch4 线性回归 【学习笔记】 陈强-机器学习-Python-Ch5 逻辑回归 【课后题练习】 陈强-机器学习-Python-Ch5 逻辑回归(SAheart.csv) 【学习笔记】 陈强-机器学习-Python-Ch6 多项逻辑回归 【学习笔记 及 课后题练习】 陈强-机器学习-Python-Ch7 判别分析 【学

系统架构师考试学习笔记第三篇——架构设计高级知识(20)通信系统架构设计理论与实践

本章知识考点:         第20课时主要学习通信系统架构设计的理论和工作中的实践。根据新版考试大纲,本课时知识点会涉及案例分析题(25分),而在历年考试中,案例题对该部分内容的考查并不多,虽在综合知识选择题目中经常考查,但分值也不高。本课时内容侧重于对知识点的记忆和理解,按照以往的出题规律,通信系统架构设计基础知识点多来源于教材内的基础网络设备、网络架构和教材外最新时事热点技术。本课时知识

线性代数|机器学习-P36在图中找聚类

文章目录 1. 常见图结构2. 谱聚类 感觉后面几节课的内容跨越太大,需要补充太多的知识点,教授讲得内容跨越较大,一般一节课的内容是书本上的一章节内容,所以看视频比较吃力,需要先预习课本内容后才能够很好的理解教授讲解的知识点。 1. 常见图结构 假设我们有如下图结构: Adjacency Matrix:行和列表示的是节点的位置,A[i,j]表示的第 i 个节点和第 j 个