• 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的功能= =是不是下错包了郁闷):

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


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

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

  • 相关阅读:
    Linux网络编程必看书籍推荐
    SpringMVC DispatcherServlet初始化过程
    freemarker写select组件(五)
    hdu 1009 FatMouse&#39; Trade
    新IOS编程语言 Swift 新编译器Xcode6
    NoSQL数据库:数据的一致性
    POJ 3041 Asteroids
    POJ 3342 Party at Hali-Bula (树形dp 树的最大独立集 判多解 好题)
    __repr__与__str__
    HDU 4950 Monster(公式)
  • 原文地址:https://www.cnblogs.com/jchubby/p/4429753.html
Copyright © 2020-2023  润新知