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

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

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

CKEditor+SWFUpload实现功能较为强大的编辑器(一)---CKEditor配置的更多相关文章

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

    在前面配置完CKEditor之后,就可以拥有一个功能挺强大的编辑器了 但是现在还不够,还要能够在发表文字中插入自己电脑上的图片 CKEditor自己好像有这个功能,但是实在是...没法说,很难用(这是 ...

  2. CKEditor+SWFUpload实现功能较为强大的编辑器(三)---后台接收图片流程

    在前台配置完CKEditor和SWFUpload之后就可以满足基本的需求了 在这里,我配置的接收异步上传的图片的页面为upload.ashx 在这个ashx中对上传的图片处理的流程如下: contex ...

  3. 网络编辑器插件ckeditor+ckfinder配置

    原帖地址 另外一个 去掉编辑器的下边栏 在config.js中加入: config.removePlugins = 'elementspath'; config.resize_enabled = fa ...

  4. 12.HTML编辑器(CKEditor、CKFinder集成)

    CKEditor原名为FckEditor,是著名的HTML编辑器,可以在线编辑HTML内容. 配置参考文档:主要将ckeditor中的lang.plugins.skins.ckeditor.js.co ...

  5. 富文本文件CKEDITOR增加上传图片功能(.net)

    如题,本身的CKEDITOR控件并没有开启上传图片的功能, 打开图像按钮,只有图像信息和高级两个table选项卡,版本不同,显示略有差异,我的实现是有两种方法都可以添加上传功能, 第一种方法使用CKE ...

  6. python模块之httplib(在py3中功能进一步强大,请详看文档)

    # -*- coding: utf-8 -*-#python 27#xiaodeng#python模块之httplib(在py3中功能进一步强大,请详看文档) import httplib#是较为底层 ...

  7. 推荐一个简单、轻量、功能非常强大的C#/ASP.NET定时任务执行管理器组件–FluentScheduler定时器

    在C#WINFORM或者是ASP.NET的WEB应用程序中,根据各种定时任务的需求,比如:每天的数据统计,每小时刷新系统缓存等等,这个时候我们得应用到定时器这个东东. .NET Framework有自 ...

  8. 功能更强大的格式化工具类 FormatUtils.java

    package com.util; import java.text.DecimalFormat; import java.text.ParseException; import java.text. ...

  9. drupal7中CKEditor开启上传图片功能

    在drupal建站中,所见即所得编辑器提供了友好的界面.也提高开发效率,而CKEditor是一款非常不错的编辑器.定制性相当高,在这推荐给大家. CKEditor和其它模块(IMCE)搭配下在文字排版 ...

随机推荐

  1. 洛谷 P4882 lty loves 96! 解题报告

    P4882 lty loves 96! 题目背景 众所周知,\(lty\)非常喜欢\(96\)这两个数字(想歪的现在马上面壁去),更甚于复读(人本复)! 题目描述 由于爱屋及乌,因此,\(lty\)对 ...

  2. 飞镖(bzoj 2335)

    Description 飞镖是在欧洲颇为流行的一项运动.它的镖盘上分为20个扇形区域,分别标有1到20的分值,每个区域中有单倍.双倍和三倍的区域,打中对应的区域会得到分值乘以倍数所对应的分数.例如打中 ...

  3. HDU1710---树(知前序遍历与中序遍历 求后序遍历)

    知前序遍历与中序遍历 求后序遍历 #include<iostream> #include<cstring> #include<queue> #include< ...

  4. HDU 4549 (费马小定理+矩阵快速幂+二分快速幂)

    M斐波那契数列 Time Limit: 1000MS   Memory Limit: 32768KB   64bit IO Format: %I64d & %I64u Submit Statu ...

  5. C#的泛型委托Predicate/Func/Action

    Predicate<T> 是一个委托,它代表了一个方法,它的定义是: namespace System {    // 摘要:    表示定义一组条件并确定指定对象是否符合这些条件的方法. ...

  6. 3.sql

    from odps import ODPS o = ODPS(access_id="LTASVb3aOF3ghjek", secret_access_key="FeUoz ...

  7. 查看 Laravel 的 SQL 语句的方法

    在使用 Laravel 的 Eloquent 进行数据查询的时候,很多小伙伴都想看到背后执行的 SQL 语句到底是什么样的,这小笔录就是解决这个小问题的: 在 Providers/AppService ...

  8. Jquery学习之路(一) 实现checkbox全选方法

    昨天早上有写到怎么利用Jquery实现全选 根据大家的意见对程序中一些写法不好的地方进行了修改,也是本人水平有限,存在各种考虑不到的地方. 文章最后我提出了一个问题,要写一个通用的方法来调用,于是就有 ...

  9. 牛客网 暑期ACM多校训练营(第二场)J.farm-STL(vector)+二维树状数组区间更新、单点查询 or 大暴力?

    开心.jpg J.farm 先解释一下题意,题意就是一个n*m的矩形区域,每个点代表一个植物,然后不同的植物对应不同的适合的肥料k,如果植物被撒上不适合的肥料就会死掉.然后题目将每个点适合的肥料种类( ...

  10. CF978C Letters【前缀和+二分查找/几房几号】

    [链接]:CF978C [分析]:在前缀和数组种二分找到>=询问数的位置,根据位置就好操作了 [代码]: #include<bits/stdc++.h> using namespac ...