开发者社区> xiaohei.info> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

CKEditor+SWFUpload实现功能较为强大的编辑器(一)---CKEditor配置

简介: 版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq1010885678/article/details/37512171 C...
+关注继续查看
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq1010885678/article/details/37512171

CKEditor爆表的强大功能大家都有目共睹,号称最强大的在线编辑器,只要将文件复制到项目中,在添加引用,在一句代码就可以将普通的textarea变成华丽的编辑器
所谓一复制,一拖,一换就大功告成


但是普通的CKEditor由于会产生诸如<,>这样的危险符号,在用asp.net时必须在页面头的标签的ValidateRequest属性设置为false
在WebConfig文件中的httpRuntime节点配置requestValidateMode="2.0",否则会报错。


这样虽然功能可是实现,但是有可能造成XSS跨站脚本攻击,这是十分危险的

所以普通的CKEditor一般是给网站的管理员使用的(=。=管理员应该不会去做某些危险的事情吧)

给用户使用的都是UBB编译器

网上可以找到很多很多UBB编译器,但是现在的CKEditor中集成了这个功能,所以使用起来比较得心应手

现在进入主题

CKEditor3.6.5版本下载地址(最新版本的CKEditor我没有找到UBB的功能= =是不是下错包了郁闷):

CKEditor3.6.5

下面是具体的使用流程:

1.下载完之后打开_samples文件夹,这里面有所有插件的使用方法,可以根据自己的需要进行选择,这里选择bbcode.htm

2.在你的页面上必须有一个textarea文本域,取好id之后(这里以editor1为例)在这个文本域的后面添加一段js代码,或者在window.onload()里面添加也是一样的

3.在bbcode.htm页面右键查看源,找到textarea后面的那段js代码

这里将它贴出来示众一下(快跟大家问好= 。=)

<script type="text/javascript">
			//<![CDATA[

			// Replace the <textarea id="editor"> with an CKEditor
			// instance, using the "bbcode" plugin, shaping some of the
			// editor configuration to fit BBCode environment.
			CKEDITOR.replace( 'editor1',
				{
					extraPlugins : 'bbcode',
					// Remove unused plugins.
					removePlugins : 'bidi,button,dialogadvtab,div,filebrowser,flash,format,forms,horizontalrule,iframe,indent,justify,liststyle,pagebreak,showborders,stylescombo,table,tabletools,templates',
					// Width and height are not supported in the BBCode format, so object resizing is disabled.
					disableObjectResizing : true,
					// Define font sizes in percent values.
					fontSize_sizes : "30/30%;50/50%;100/100%;120/120%;150/150%;200/200%;300/300%",
					toolbar :
					[
						['Source', '-', 'Save','NewPage','-','Undo','Redo'],
						['Find','Replace','-','SelectAll','RemoveFormat'],
						['Link', 'Unlink', 'Image', 'Smiley','SpecialChar'],
						'/',
						['Bold', 'Italic','Underline'],
						['FontSize'],
						['TextColor'],
						['NumberedList','BulletedList','-','Blockquote'],
						['Maximize']
					],
					// Strip CKEditor smileys to those commonly used in BBCode.
					smiley_images :
					[
						'regular_smile.gif','sad_smile.gif','wink_smile.gif','teeth_smile.gif','tounge_smile.gif',
						'embaressed_smile.gif','omg_smile.gif','whatchutalkingabout_smile.gif','angel_smile.gif','shades_smile.gif',
						'cry_smile.gif','kiss.gif'
					],
					smiley_descriptions :
					[
						'smiley', 'sad', 'wink', 'laugh', 'cheeky', 'blush', 'surprise',
						'indecision', 'angel', 'cool', 'crying', 'kiss'
					]
			} );

			//]]>
			</script>

4.现在要做的就是把CKEDITOR.replace( 'editor1',   这个editor1替换成自己定义的文本域的id就ok了

现在在重新打开一下测试的页面,是不是发现textarea已经变成了一个UBB编译器啦

需要注意的是:这时候这个textarea已经不是一个文本域了,而是被替换成了一个编辑器

不能再使用window,getElementById("editor1").value;或者$("#editor1").val()这种方式来获得里面输入的值了

而是要使用

var oEditor = CKEDITOR.instances.editor1;

oEditor .getData();

这种方式来获取

设置通过oEditor .setData();来控制

随便输入几个文字,添加点样式,然后转换到源码模式,传说中的ubb代码就出现了~

最后,由于在我的项目中引用了很多js文件,而且都是必须的,然后不知道怎么滴。。CKEDITOR一直报错,而且还不止一个,怎么搞都不行

最后只能换了一个包试试,竟然神奇的可以用了,但是老是出现一个NotSupportedError错误,如图所示


唉,最后疯了直接在浏览器点了不在显示此消息。。。眼不见心不烦

希望有高手知道这是怎么回事,求教育!!

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
使用editorconfig配置你的编辑器
使用editorconfig配置你的编辑器
23 0
Ace 基于Web的代码编辑器
Ace是一个基于Web的代码编辑器。Ace编辑器支持自定义快捷键绑定,支持多种流行语言的语法高亮显示如:PHP,Javascript,HTML,CSS,Java,Ruby,C++,Python等。提供与桌面编辑器相似或更好的体验。它其实是为著名的Cloud9 IDE 而开发,并能够轻松集成到任何网页中。
80 0
ueditor编辑器asp版不能上传图片的解决方法 500错误
第一步,先去IIS 中,打开ASP 设置页面,把错误信息发送到浏览器,有助于找到问题。 使用百度开源ueditor编辑器不能上传图片并报服务器500错误 初看是 Uploader.Class 的 fs.CreateFolder( path ) 这条语句不能创建目录,怀疑权限问题,提供所有权限后,依然不行。
2229 0
Atom 编辑器系列视频课程
此课程为 Atom 编辑器系列课程,主要介绍了 Atom 的高效开发技巧以及必备插件。 课程列表 Atom编辑器系列课程 #1 - Atom简介 Atom编辑器系列课程 #2 - 设置简介 Atom编辑器系列课程 #3 - 快速格式化代码插件 atom-beautify [#4 - 即将更新]...
806 0
Github Atom开源文本代码编辑器- 由 Github 打造的下一代编程开发利器
个人理解:Github 热度超凡的一个项目Atom,electron是整个atom的核心,对于electron可以理解成 electron =io.js + Chromium    通过 Electron 可以方便的打造基于Web,跨平台的Desktop应用。
1492 0
fckeditor编辑器的使用
关于fckeditor的文件及dll在下面这个地址下载: http://download.csdn.net/source/3425245 主要步骤: 1、解压文件后,将fckeditor文件夹拷贝到根目录下,然后添加引用,浏览到dll文件夹中对应的dll即可。
776 0
+关注
163
文章
1
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载