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)搭配下在文字排版 ...
随机推荐
- 洛谷 P4882 lty loves 96! 解题报告
P4882 lty loves 96! 题目背景 众所周知,\(lty\)非常喜欢\(96\)这两个数字(想歪的现在马上面壁去),更甚于复读(人本复)! 题目描述 由于爱屋及乌,因此,\(lty\)对 ...
- 飞镖(bzoj 2335)
Description 飞镖是在欧洲颇为流行的一项运动.它的镖盘上分为20个扇形区域,分别标有1到20的分值,每个区域中有单倍.双倍和三倍的区域,打中对应的区域会得到分值乘以倍数所对应的分数.例如打中 ...
- HDU1710---树(知前序遍历与中序遍历 求后序遍历)
知前序遍历与中序遍历 求后序遍历 #include<iostream> #include<cstring> #include<queue> #include< ...
- HDU 4549 (费马小定理+矩阵快速幂+二分快速幂)
M斐波那契数列 Time Limit: 1000MS Memory Limit: 32768KB 64bit IO Format: %I64d & %I64u Submit Statu ...
- C#的泛型委托Predicate/Func/Action
Predicate<T> 是一个委托,它代表了一个方法,它的定义是: namespace System { // 摘要: 表示定义一组条件并确定指定对象是否符合这些条件的方法. ...
- 3.sql
from odps import ODPS o = ODPS(access_id="LTASVb3aOF3ghjek", secret_access_key="FeUoz ...
- 查看 Laravel 的 SQL 语句的方法
在使用 Laravel 的 Eloquent 进行数据查询的时候,很多小伙伴都想看到背后执行的 SQL 语句到底是什么样的,这小笔录就是解决这个小问题的: 在 Providers/AppService ...
- Jquery学习之路(一) 实现checkbox全选方法
昨天早上有写到怎么利用Jquery实现全选 根据大家的意见对程序中一些写法不好的地方进行了修改,也是本人水平有限,存在各种考虑不到的地方. 文章最后我提出了一个问题,要写一个通用的方法来调用,于是就有 ...
- 牛客网 暑期ACM多校训练营(第二场)J.farm-STL(vector)+二维树状数组区间更新、单点查询 or 大暴力?
开心.jpg J.farm 先解释一下题意,题意就是一个n*m的矩形区域,每个点代表一个植物,然后不同的植物对应不同的适合的肥料k,如果植物被撒上不适合的肥料就会死掉.然后题目将每个点适合的肥料种类( ...
- CF978C Letters【前缀和+二分查找/几房几号】
[链接]:CF978C [分析]:在前缀和数组种二分找到>=询问数的位置,根据位置就好操作了 [代码]: #include<bits/stdc++.h> using namespac ...