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)搭配下在文字排版 ...
随机推荐
- 2017 多校3 hdu 6061 RXD and functions
2017 多校3 hdu 6061 RXD and functions(FFT) 题意: 给一个函数\(f(x)=\sum_{i=0}^{n}c_i \cdot x^{i}\) 求\(g(x) = f ...
- 在HTML网页上打印需要的内容
首先在head里面加入下面一段js代码: function preview(oper) { if (oper < 10) { bdhtml = window.document.body.inne ...
- CI的多级目录的功能
https://segmentfault.com/q/1010000008317555?_ea=1621531
- Nodejs 基础知识 浅析
1. 模块化 ①常用模块化规范 CommonJS + nodejs AMD(Asynchronous Module Definition) + RequireJS CMD(Common Module ...
- ubuntu 解压
.tar 解包:tar xvf FileName.tar 打包:tar cvf FileName.tar DirName (注:tar是打包,不是压缩!) ---------------------- ...
- HDU1263 map二维运用
#include <iostream> #include <cstdio> #include <cstring> #include <map> #inc ...
- [bzoj1051][HAOI2006]受欢迎的牛——强连通分量
题目大意: 给定一个有向图,求能够被其他所有点访问到的点的个数. 题解: 首先,这个题我在洛谷上AC了,但是bzoj上WA,不知道为什么. 说一下解法. 首先,我们进行scc分解,可以知道, 如果一个 ...
- error C4996: ‘Json::Reader::Char’: Use CharReader and CharReaderBuilder instead
1.编译下面代码时,遇到标题中的错误 const char* str = "{\"name\":\"xiaoming\",\"age\&qu ...
- andrio
## 以eclipse -clean命令从命令行启动 eclipse ## 配置Android模拟器 点击上图右边的按钮(像个手机一样的),打开AVD管理器后,点击 New 新建一个模拟器,输入Nam ...
- MFC/C++/C中字符类型CString, int, string, char*之间的转换
1 CString,int,string,char*之间的转换 string 转 CString CString.format("%s", string.c_str()); cha ...