CKEditor+SWFUpload实现功能较为强大的编辑器(一)---CKEditor配置
CKEditor爆表的强大功能大家都有目共睹,号称最强大的在线编辑器,只要将文件复制到项目中,在添加引用,在一句代码就可以将普通的textarea变成华丽的编辑器
所谓一复制,一拖,一换就大功告成
但是普通的CKEditor由于会产生诸如<,>这样的危险符号,在用asp.net时必须在页面头的标签的ValidateRequest属性设置为false
在WebConfig文件中的httpRuntime节点配置requestValidateMode="2.0",否则会报错。
这样虽然功能可是实现,但是有可能造成XSS跨站脚本攻击,这是十分危险的
所以普通的CKEditor一般是给网站的管理员使用的(=。=管理员应该不会去做某些危险的事情吧)
给用户使用的都是UBB编译器
网上可以找到很多很多UBB编译器,但是现在的CKEditor中集成了这个功能,所以使用起来比较得心应手
现在进入主题
CKEditor3.6.5版本下载地址(最新版本的CKEditor我没有找到UBB的功能= =是不是下错包了郁闷):
下面是具体的使用流程:
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错误,如图所示
唉,最后疯了直接在浏览器点了不在显示此消息。。。眼不见心不烦
希望有高手知道这是怎么回事,求教育!!
CKEditor+SWFUpload实现功能较为强大的编辑器(一)---CKEditor配置的更多相关文章
- CKEditor+SWFUpload实现功能较为强大的编辑器(二)---SWFUpload配置
在前面配置完CKEditor之后,就可以拥有一个功能挺强大的编辑器了 但是现在还不够,还要能够在发表文字中插入自己电脑上的图片 CKEditor自己好像有这个功能,但是实在是...没法说,很难用(这是 ...
- CKEditor+SWFUpload实现功能较为强大的编辑器(三)---后台接收图片流程
在前台配置完CKEditor和SWFUpload之后就可以满足基本的需求了 在这里,我配置的接收异步上传的图片的页面为upload.ashx 在这个ashx中对上传的图片处理的流程如下: contex ...
- 网络编辑器插件ckeditor+ckfinder配置
原帖地址 另外一个 去掉编辑器的下边栏 在config.js中加入: config.removePlugins = 'elementspath'; config.resize_enabled = fa ...
- 12.HTML编辑器(CKEditor、CKFinder集成)
CKEditor原名为FckEditor,是著名的HTML编辑器,可以在线编辑HTML内容. 配置参考文档:主要将ckeditor中的lang.plugins.skins.ckeditor.js.co ...
- 富文本文件CKEDITOR增加上传图片功能(.net)
如题,本身的CKEDITOR控件并没有开启上传图片的功能, 打开图像按钮,只有图像信息和高级两个table选项卡,版本不同,显示略有差异,我的实现是有两种方法都可以添加上传功能, 第一种方法使用CKE ...
- python模块之httplib(在py3中功能进一步强大,请详看文档)
# -*- coding: utf-8 -*-#python 27#xiaodeng#python模块之httplib(在py3中功能进一步强大,请详看文档) import httplib#是较为底层 ...
- 推荐一个简单、轻量、功能非常强大的C#/ASP.NET定时任务执行管理器组件–FluentScheduler定时器
在C#WINFORM或者是ASP.NET的WEB应用程序中,根据各种定时任务的需求,比如:每天的数据统计,每小时刷新系统缓存等等,这个时候我们得应用到定时器这个东东. .NET Framework有自 ...
- 功能更强大的格式化工具类 FormatUtils.java
package com.util; import java.text.DecimalFormat; import java.text.ParseException; import java.text. ...
- drupal7中CKEditor开启上传图片功能
在drupal建站中,所见即所得编辑器提供了友好的界面.也提高开发效率,而CKEditor是一款非常不错的编辑器.定制性相当高,在这推荐给大家. CKEditor和其它模块(IMCE)搭配下在文字排版 ...
随机推荐
- 阿里云Centos 7 FTP(vsftp)服务安装及配置
#检查vsftpd是否安装 rpm -qa | grep vsftpd #检查vsftpd版本并安装 yum list vsftpd yum install vsftpd #设置开机启动 system ...
- bootstrap3基本了解
使用 BootCDN 提供的免费 CDN 加速服务(同时支持 http 和 https 协议) Bootstrap 中文网 为 Bootstrap 专门构建了免费的 CDN 加速服务,访问速度更快.加 ...
- 由做网站操作日志想到的HttpModule应用
背景 在以前的Web项目中,记录用户操作日志,总是在方法里,加一行代码,记录此时用户操作类型与相关信息.该记录日志的方法对原来的业务操作侵入性较强,也比较零散,不便于查看和管理.那么有没有更加通用点的 ...
- 【Tomcat】一台电脑上运行多个tomcat
效果: 1.首先需要安装Tomcat7,Tomcat8. Tomcat7: Tomcat8: 2.添加两个环境变量,添加CATALINA_HOME1和CATALINA_BASE1指向E:\tomcat ...
- ajax验证前端页面
1.html页面 用ajax验证表单的时候不需要form标签,并把提交按钮由type=“submit ”改为type=“button” 数据表结构 ajax.html <!DOCTYPE htm ...
- 【linux高级程序设计】(第十三章)Linux Socket网络编程基础 3
使用之前的函数实现的简单聊天程序 TCP协议 双方实时发送/接收消息 实现后的问题: 可能是我虚拟机的IP地址配得有问题吧.在一台电脑上面开两个终端,用127.0.0.1的IP收发可以互通.但是两个虚 ...
- springBoot Feign Hystrix
1.引入依赖包 <!-- 引入关于 hystrix的依赖 --> <dependency> <groupId>org.springframework.cloud&l ...
- [scrapy] 爬了第一页就停止 filtered off site request to
我碰到这个问题的原因是 allowed_domains 写错了 至于还有没有别的原因就不知道了
- (1)C#工具箱-公共控件1
公共控件 InitializeComponent() 先说下InitializeComponent()这个方法,它在form1.cs里调用这个方法对控件进行初始化,控件的方法要在这个方法之后,否则会因 ...
- 「kuangbin带你飞」专题十八 后缀数组
layout: post title: 「kuangbin带你飞」专题十八 后缀数组 author: "luowentaoaa" catalog: true tags: - kua ...