文档章节

Ueditor和CKeditor 两款编辑器的使用与配置

短短的歼击机
 短短的歼击机
发布于 2014/08/24 19:06
字数 1181
阅读 234
收藏 0

一丶ueditor 百度编辑器


1.官方文档,演示,下载地址:http://ueditor.baidu.com/website/index.html

2.百度编辑器的好:Editor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点。

3.如果想定制你想要的编辑器功能:查看官方网站的下载页面即可。

4.编辑器展示:


 

 


5.百度编辑器配置。


     1.载入js,css文件

<script src="ueditor/editor_config.js" type="text/javascript"></script>
    <script src="ueditor/editor_all.js" type="text/javascript"></script>
    <link href="ueditor/themes/default/ueditor.css" rel="stylesheet" type="text/css" />

      2.页面配置

<div id="myEditor"></div>   //可以是aspx控件 只要id正确即可<script type="text/javascript">
        var ue = new baidu.editor.ui.Editor();
        ue.render("myEditor");   //这里填写要改变为编辑器的控件id</script>

       3.editor_config.js  文件中的路径配置

    var tmp = window.location.pathname;
    URL = window.UEDITOR_HOME_URL || "/SomePackage/Ueditor/ueditor/"; //这里你可以配置成ueditor目录在您网站的相对路径或者绝对路径(指以http开头的绝对路径)

       4.如果你要使用传图片功能,还需要修改net文件下的几个文件截图说明吧(这个路径可以直接删除的,试试。不行了自己再调整下)。

改为-->

        同理将net文件下其它文件类似的错误更正后即可上传图片。 

        图片上传默认位置为:net文件夹下。上传一张打开即可发现一个upload文件夹。

       5.ueditor 的很多默认配置都在 editor_config.js这个文件中,细心看的话,开启或关闭其中的配置是可以解决很多问题的。

       6.我在使用过程中还遇到过编辑器内容影响整体页面的布局问题,这问题是在editor_all.js这个文件中修改的默认样式问题的。         

复制代码

  me = , options = ( container.constructor ==== useBodyAsViewport = ie && browser.version < 9= ( ie && browser.version < 9 ? '' : '<!DOCTYPE html>') +
                                '<html xmlns=\'http://www.w3.org/1999/xhtml\'' + (!useBodyAsViewport ? ' class=\'view\'' : '') + '><head>' +? '<link rel=\'stylesheet\' type=\'text/css\' href=\'' + utils.unhtml( options.iframeCssUrl ) + '\'/>' : '' ) +
                                '<style type=\'text/css\'>' +                            
                            
                                '.selectTdClass{background-color:#3399FF !important;}' +
                                'table.noBorderTable td{border:1px dashed #ddd !important}' +                            
                                'table{clear:both;margin-bottom:10px;border-collapse:collapse;word-break:break-all;}' +                            
                                '.pagebreak{display:block;clear:both !important;cursor:default !important;width: 100% !important;margin:0;}' +                            
                                '.anchorclass{background: url(\'' + me.options.UEDITOR_HOME_URL + 'themes/default/images/anchor.gif\') no-repeat scroll left center transparent;border: 1px dotted #0000FF;cursor: auto;display: inline-block;height: 16px;width: 15px;}' +                            
                                '.view{padding:0;word-wrap:break-word;cursor:text;height:100%;}\n' +                            
                                'body{margin:8px;font-family:\'宋体\';font-size:16px;}' +                            
                                'li{clear:both}' +                            
                                'p{margin:5px 0;}'
                                + ( options.initialStyle || '' ) +
                                '</style></head><body' + (useBodyAsViewport ? ' class=\'view\'' : '') + '></body>';

复制代码

最后对这个编辑器总结下:很好用的,代码很容易读懂,便于修改配置为自己喜欢的想要的。 


二丶CKEditor丶CKFinder 国外知名编辑器 


 1.官方文档,演示,下载地址:http://ckeditor.com/download 丶 http://ckfinder.com/download

2.百度编辑器的好:是一个专门使用在网页上属于开放源代码的所见即所得文字编辑器。它志于轻量化,不需要太复杂的安装步骤即可使用。

3.编辑器展示:


 

    


4.配置步骤以及一些常用配置


          1.引入<script src="ckeditor/ckeditor.js" type="text/javascript"></script>

          2.页面代码

复制代码

    <!--第一个--->
    <textarea id="TextArea1" cols="20" rows="2" class="ckeditor"></textarea>
    <!--第二个--->
    <div id="editorSpace"></div>  <!--直接设置class好像也行的可以试试--->
    <script type="text/javascript">
        CKEDITOR.appendTo('editorSpace');    </script>

复制代码

          3.配置ckeditor的一些常用配置,在config.js这个文件中,所有的属性配置都可以查阅官方的API:http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html

          4.列出一些常用的属性配置:

复制代码

CKEDITOR.editorConfig = function( config )
{    // Define changes to default configuration here. For example:
    // config.language = 'fr';
    // config.uiColor = '#AADC6E';
    //config.width=700;   
    //config.height=400;
    //config.skin='v2';   //自带皮肤种类有3种:Kama(默认) , Office 2003 , v2
   //config.font_names = '宋体;楷体 _GB2312;新宋体;黑体;隶书;幼圆;微软雅黑;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana';



    //如果上传图片或者flash则需要,下面配置ckfinder
    var ckfinderPath = "/SomePackage/FCKeditor/ckfinder";  //配置为绝对路径   
    config.filebrowserBrowseUrl = ckfinderPath + "/ckfinder.html";
    config.filebrowserImageBrowseUrl = ckfinderPath + "/ckfinder.html?Type=Image";
    config.filebrowserFlashBrowseUrl = ckfinderPath + "/ckfinder.html?Type=Flash";
    config.filebrowserUploadUrl = ckfinderPath + "/core/connector/aspx/connector.aspx?command=QuickUpload&Type=Files";
    config.filebrowserImageUploadUrl = ckfinderPath + "/core/connector/aspx/connector.aspx?command=QuickUpload&Type=Images";
    config.filebrowserFlashUploadUrl = ckfinderPath + "/core/connector/aspx/connector.aspx?command=QuickUpload&Type=Flash";
};

复制代码

         5.如果上传图片则需在项目中添加ckfinder文件

         6.第四步为配置上传图片的第一步

         7.改变ckfinder文件夹下的config.ascx,内容如下:

复制代码

public override bool CheckAuthentication()
    {        //object str = session["username"];        //if (str != null & Convert.ToBoolean(str) == true)        //{        //    return true;        //}
        return true;   //不建议直接返回true,最好做下用户验证判断在返回true(安全),上面为验证的一个实例
    }

复制代码

          8.这样就行了,由于ckfinder不是免费的,所以默认情况下会在上传页面中有红色的广告提示,虽然不影响使用,但总是觉得不爽。
          9.去除广告方法:找到ckfinder/core/js/ckfinder_ie.js及ckfinder_gecko.js,将其中的 en.call(window,qo);去掉

最后对这个编辑器总结下:很强大,很好用。世界各地都在用的。


本文转载自:http://www.cnblogs.com/knowledgesea/archive/2012/11/19/2776957.html

短短的歼击机

短短的歼击机

粉丝 82
博文 262
码字总数 265749
作品 0
武汉
高级程序员
私信 提问
我的网站搭建 (第六天) Ckeditor编辑器

富文本编辑器,Rich Text Editor, 简称 RTE, 是一种可内嵌于浏览器,所见即所得的文本编辑器,这是百度百科的对富文本编辑器的解释。我们可以借助富文本编辑器,编辑出来一个包含html的页面,...

代码打碟手
2018/08/27
0
0
我的网站搭建 (第22天) 改写评论框样式

一、前言 在上一篇内容网站搭建 (第21天) 评论功能设计,已经将评论的模型使用,ajax的加载以及ckeditor评论样式大致都介绍了一遍。其实不管是ckeditor还是ueditor都非常的好用,在学会了如何...

代码打碟手
01/04
0
0
CKEditor3.x 在Java项目中配置、包括图片上传(支持FTP、图片压缩)

CKEditor 3.x配置说明 一、基本使用: 1、所需文件架包 A. Ckeditor基本文件包,比如:ckeditor_3.6.2.zip 下载地址:http://ckeditor.com/download 2、配置使用 A.将下载下来的CKEditor压缩...

一枚Sir
2014/05/29
0
0
CKEditor SDK 发布,包括示例,文档和 API

CKEditor SDK 发布,现已提供下载。CKEditor SDK 是巨大的资源集合,帮助你熟悉所有编辑器的特性和实现过程,能更好的帮助你配置和集成 CKEditor 到你的项目中。最重要的是,完全免费! CKEd...

oschina
2014/10/25
7.1K
0
在Django项目中使用富文本编辑器

1 开发要点 现在网上有很多的富文本编辑器,包括Markdown、tinymce、UEditor、KindEditor、ckeditor等等。在项目中使用这些编辑器主要有以下几个问题: 编辑页面 在HTML页面渲染编辑器; 定制...

Kinegratii
2014/08/31
0
0

没有更多内容

加载失败,请刷新页面

加载更多

威胁快报|新兴挖矿团伙借助shodan作恶,非web应用安全再鸣警钟

近日,阿里云安全发现了一个使用未授权访问漏洞部署恶意Docker镜像进行挖矿的僵尸网络团伙。我们给这一团伙取名为Xulu,因为该团伙使用这个字符串作为挖矿时的用户名。 Xulu并不是第一个攻击...

阿里云官方博客
30分钟前
3
0
MD5 加密需要注意编码格式!!!

相信做过MD5加密的童鞋都遇到过字符编码的坑,一般加密出来的结果和其他人不一样都是字符编码不一致导致的,比如类文件的字符编码、浏览器的字符编码等和对方不一致,所以就需要转码统一字符...

jason_kiss
32分钟前
2
0
python中字符串的操作

https://www.jianshu.com/p/7fc851b6a7ee

writeademo
41分钟前
1
0
如何制定 Java 性能调优标准?

想让你的程序更快更稳,但是系统经常出各种 bug,无从下手?Java 性能调优全攻略来啦! 我有一个朋友,有一次他跟我说,他们公司的系统从来没有经过性能调优,功能测试完成后就上线了,线上也...

Java领航员
42分钟前
3
0
java博客项目

项目地址:https://github.com/otale/tale 项目演示地址:https://tale.biezhi.me/ 项目介绍:Tale使用轻量级mvc框架Blade进行开发,默认主题使用漂亮的pinghsu, 特征 设计简洁,界面美观 ...

编程资源库
42分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部