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错误,如图所示


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

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

相关文章
|
2月前
|
JavaScript 开发工具 C++
探索 Visual Studio Code:开发者的多功能编辑器
Visual Studio Code(VS Code)是由微软开发的一款免费、开源的轻量级代码编辑器,支持 Windows、Linux 和 macOS。它内置了对多种编程语言的支持,并提供了代码高亮、智能补全、调试和 Git 集成等功能。VS Code 的强大之处还在于其丰富的插件生态系统,通过安装插件可以进一步扩展功能。此外,用户还可以通过定制设置来自定义编辑器的行为和外观,从而提升开发效率。本文将详细介绍 VS Code 的核心特性、推荐插件及定制化设置方法。
|
22天前
|
前端开发 开发者
大模型代码能力体验报告之贪吃蛇小游戏《二》:OpenAI-Canvas-4o篇 - 功能简洁的文本编辑器加一点提示词语法糖功能
ChatGPT 的Canvas是一款简洁的代码辅助工具,提供快速复制、版本管理、选取提问、实时编辑、代码审查、代码转写、修复错误、添加日志和注释等功能。相较于 Claude,Canvas 更加简单易用,但缺少预览功能,适合一般开发者使用。
|
3月前
|
自然语言处理 机器人 API
【Azure 机器人】微软Azure Bot 编辑器系列(4) : 使用语言生成功能[LG: Language Generation] (The Bot Framework Composer tutorials)
【Azure 机器人】微软Azure Bot 编辑器系列(4) : 使用语言生成功能[LG: Language Generation] (The Bot Framework Composer tutorials)
|
3月前
|
自然语言处理 机器人 API
【Azure 机器人】微软Azure Bot 编辑器系列(3) : 机器人对话流中加入帮助和取消按钮功能 (The Bot Framework Composer tutorials)
【Azure 机器人】微软Azure Bot 编辑器系列(3) : 机器人对话流中加入帮助和取消按钮功能 (The Bot Framework Composer tutorials)
|
4月前
|
JSON JavaScript 数据格式
文本-----wangEditor的使用,设置和获取内容,展示HTML无样式怎么办????console同步展示怎样写,Vue的配置在Vue3配置文件中的配置,是editor中的v-model绑定的值
文本-----wangEditor的使用,设置和获取内容,展示HTML无样式怎么办????console同步展示怎样写,Vue的配置在Vue3配置文件中的配置,是editor中的v-model绑定的值
|
5月前
|
UED
ONLYOFFICE 桌面编辑器 8.1重磅来袭:全新功能提升您的办公效率
ONLYOFFICE 桌面编辑器 8.1重磅来袭:全新功能提升您的办公效率
|
4月前
|
网络协议 Linux 开发工具
配置Linux固定IP地址,为什么要固定IP,因为他是通DHCP服务获取的,DHCP服务每次重启都会重新获取一次ip,VMware编辑中有一个虚拟网络编辑器
配置Linux固定IP地址,为什么要固定IP,因为他是通DHCP服务获取的,DHCP服务每次重启都会重新获取一次ip,VMware编辑中有一个虚拟网络编辑器
|
4月前
|
开发工具
vi编辑器,现在vi\vim是文本文件进行编辑的最佳选择,Vim是vi的加强的版本,兼容vi的所有指令,vim编辑器有三种工作模式,一开始进入的是命令模式,命令模式i是插入的意思,两下y+p复制内容
vi编辑器,现在vi\vim是文本文件进行编辑的最佳选择,Vim是vi的加强的版本,兼容vi的所有指令,vim编辑器有三种工作模式,一开始进入的是命令模式,命令模式i是插入的意思,两下y+p复制内容
|
5月前
|
开发工具
Vim 编辑器:高效文本编辑的瑞士军刀
**Vim 概览:** Vim 是一个功能丰富的文本编辑器,以其高度可定制性著称。文章介绍了 Vim 的高效使用技巧,包括快捷打开文件、命令行模式下的常用命令、查找与替换、删除和复制文本。还讨论了配置 `.vimrc` 文件以自定义设置,如改变 leader 键、设置缩进和高亮,并展示了安装插件如 vim-airline 和 vim-snazzy 的方法。通过这些技巧,用户能提升 Vim 使用效率。
63 5
|
5月前
|
Ubuntu 搜索推荐 Linux
Linux的Vim编辑器详解
Linux的Vim编辑器详解

相关课程

更多