百度编辑器,ueditor富文本编辑器使用

在经常工功能,肯定有用到富文本编辑器的时候,富文本编辑器作用强大使用方便,我用的是百度富文本编辑器,首先必要下载好百度编辑器的demo,

ueditor UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,重视用户体验等特性,开源基于MIT协议,允许擅自使用和修改代码.

官网主页:http://ueditor.baidu.com/website/

demo:http://ueditor.baidu.com/website/onlinedemo.html
API:http://ueditor.baidu.com/doc/

一丶ueditor 百度编辑器

UEditor
是由百度「FEX前端研发公司」开发的所见即所得富文本web编辑器,具有轻量,可定制,着重用户体验等特性,开源基于MIT协议,允许擅自使用和修改代码。

下一场创设ueditor.html文件,引入百度编辑器,然后在html文件内引入,然后再用js实例化编辑器即可,代码如下:

特点

1.职能完善:涵盖流行富文本编辑器特色效益,独创多样簇新编辑操作形式。
2.包容性好:屏蔽各类浏览器之间的差别,提供精美的富文本编辑体验。
3.开源免费:开源基于MIT协议,扶助商业和非商业用户的免费应用和随意修改。
4.定制下载:细粒度拆分基本代码,提供可视化功用选取和自定义下载。
5.业内稳定:百度正式QA团队持续跟进,上千自动化测试用例扶助。


1.下载编辑器

到官网下载 UEditor
最新版:[官网地址]

<!DOCTYPE html>
<html>
<head>
<title>百度编辑器</title>
</head>
<body>
    <script type="text/javascript" charset="utf-8" src="ueditor/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="ueditor/ueditor.all.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="ueditor/lang/zh-cn/zh-cn.js"></script>
    <script id="editor" type="text/plain" name="gdesc" style="width:100%;height:350px;"></script>
    <script type="text/javascript">
        //实例化编辑器
        var ue = UE.getEditor('editor', {});
    </script>
</body>
</html>

目录介绍

[图片上传中。。。(1)]
dialogs: 弹出对话框对应的资源和JS文件

lang: 编辑器国际化突显的文书

jsp: 涉及到服务器端操作的后台文件

themes: 样式图片和样式文件

百度编辑器,ueditor富文本编辑器使用。third-party: 第三方插件(包蕴代码高亮,源码编辑等零件)

ueditor.all.js: 开发版代码合并的结果,目录下拥有文件的打包文件

ueditor.all.min.js: ueditor.all.js文件的压缩版,提出在专业安插时拔取

ueditor.config.js: 编辑器的安排文件,指出和编辑器实例化页面置于同一目录

ueditor.parse.js:
编辑的内容显示页面引用,会活动加载表格、列表、代码高亮等体制,具体看内容显示文档

ueditor.parse.min.js:
ueditor.parse.js文件的压缩版,提出在内容突显页正式安立即利用

1.官方文档,演示,下载地址:

2、创建demo文件

解压下载的包,在解压后的目录创设 demo.html 文件,填入上面的html代码

<!DOCTYPE HTML>
<html lang="en-US">

<head>
    <meta charset="UTF-8">
    <title>ueditor demo</title>
</head>

<body>
    <!-- 加载编辑器的容器 -->
    <script id="container" name="content" type="text/plain">
        这里写你的初始化内容
    </script>
    <!-- 配置文件 -->
    <script type="text/javascript" src="ueditor.config.js"></script>
    <!-- 编辑器源码文件 -->
    <script type="text/javascript" src="ueditor.all.js"></script>
    <!-- 实例化编辑器 -->
    <script type="text/javascript">
        var ue = UE.getEditor('container');
    </script>
</body>

</html>

到那里在浏览器打开上面的ueditor.html文件就能看出如下图所示:

使用

1.引入文件

<!-- 加载编辑器的容器 --><script id="container" name="content" type="text/plain">    这里写你的初始化内容</script><!-- 配置文件 --><script type="text/javascript" src="ueditor.config.js"></script><!-- 编辑器源码文件 --><script type="text/javascript" src="ueditor.all.js"></script><!-- 实例化编辑器 --><script type="text/javascript">    var ue = UE.getEditor('container');</script>

[澳门葡京备用网址,图片上传中。。。(2)]

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

3、在浏览器打开demo.html

假使见到了下边那样的编辑器,恭喜您,初次布署成功!

澳门葡京备用网址 1

demo.png

澳门葡京备用网址 2

来得数据

方法1:

<script id="myEditor1" type="text/plain">${(report.reContent)?if_exists}</script>  

方法2:

<script id="myEditor1" type="text/plain"></script> 
var ue = UE.getEditor('myEditor1');
ue.addListener( 'ready', function( editor ) {
    var documentContent = $('#documentContent').html();
    UE.getEditor('myEditor1').setContent(documentContent);
    UE.getEditor('myEditor1').setHeight(800);
 } ); 

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

4、传入自定义的参数

编辑器有好多可自定义的参数项,在实例化的时候可以流传给编辑器:

var ue = UE.getEditor('container', {
    autoHeight: true,
    ……
});

布置项也可以通过 ueditor.config.js 文件修改,具体请看 6

那是实例化后的先导编辑器,里面的作用有不少,其中有局地或许是我们完全用不到的,想定制如何是好吧?别捉急,百度提供了可以定制的听从,将地点实例化编辑器的js代码改为以下代码:

定制工具栏图标

1.方法一:修改 ueditor.config.js 里面的 toolbars

toolbars: [
    ['fullscreen', 'source', 'undo', 'redo'],
    ['bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc']
]

[图片上传中。。。(3)]
2.措施二:实例化编辑器的时候传出 toolbars 参数

var ue = UE.getEditor('container', {
    toolbars: [
        ['fullscreen', 'source', 'undo', 'redo', 'bold']
    ]
});

4.编辑器展现:

5、设置和读取编辑器的情节

var ue = UE.getContent();
//对编辑器的操作最好在编辑器ready之后再做
ue.ready(function() {
    //设置编辑器的内容
    ue.setContent('hello');
    //获取html内容,返回: <p>hello</p>
    var html = ue.getContent();
    //获取纯文本内容,返回: hello
    var txt = ue.getContentTxt();
});
    <script type="text/javascript">
        //实例化编辑器
        var ue = UE.getEditor('editor', {
        toolbars: [
            [
                'undo', //撤销
                'bold', //加粗
                'underline', //下划线
                'preview', //预览
                'horizontal', //分隔线
                'inserttitle', //插入标题
                'cleardoc', //清空文档
                'fontfamily', //字体
                'fontsize', //字号
                'paragraph', //段落格式
                'simpleupload', //单图上传
                'insertimage', //多图上传
                'attachment', //附件
                'music', //音乐
                'inserttable', //插入表格
                'emotion', //表情
                'insertvideo', //视频
                'justifyleft', //居左对齐
                'justifyright', //居右对齐
                'justifycenter', //居中对
                'justifyjustify', //两端对齐
                'forecolor', //字体颜色
                'fullscreen', //全屏
                'edittip ', //编辑提示
                'customstyle', //自定义标题
                'template', //模板
                 ]
            ]
        });
    </script>

付出表单

和一般性的表单元素看似,只要将ueditor放在form中即可
[图片上传中。。。(4)] ##主意列表

[图片上传中。。。(5)] ##自定义工具栏菜单


6、配置项修改表达

  1. 方法一:修改 ueditor.config.js 里面的 toolbars ;
  2. 措施二:实例化编辑器的时候传出 toolbars 参数
  • 大致列表:

toolbars: [
    ['fullscreen', 'source', 'undo', 'redo', 'bold']
]
  • 多行列表

var options = {
    initialFrameWidth: 766, //初化宽度(内容750)
    initialFrameHeight: 400, //初化高度
    focus: false, //初始化时,是否让编辑器获得焦点true或false
    maximumWords: 9999, //允许的最大字符数
    pasteplain: false, //是否默认为纯文本粘贴。false为不使用纯文本粘贴,true为使用纯文本粘贴
    catchRemoteImageEnable: true, //是否开启远程图片抓取,默认开启
    //readonly : false, //编辑器初始化结束后,编辑区域是否是只读的,默认是false
    topOffset:0, //浮动时工具栏距离浏览器顶部的高度,用于某些具有固定头部的页面
    toolbars: [
        ['fullscreen', 'source', '|', 'undo', 'redo', '|',
            'selectall', 'cleardoc', 'removeformat', 'formatmatch', '|',
            'blockquote', 'pasteplain', '|',
            'simpleupload', 'insertimage', 'emotion', 'scrawl', 'insertvideo', 'music', 'background', '|',
            'link', 'unlink', 'anchor', '|',
            'horizontal', 'wordimage', '|',
            'inserttable', 'deletetable', 'mergecells', 'splittocells', 'charts'],
        ['bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', '|',
            'paragraph', 'indent', '|',
            'fontfamily', 'fontsize', '|',
            'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase']
    ]
};
editor = new UE.ui.Editor(options);
editor.render("goods_content");  //  指定 textarea 的  id 为 goods_content
//配置项里用竖线 '|' 代表分割线

下边的例证:

澳门葡京备用网址 3

ueidtor.png

刷新ueditor.html页面你就会看出变化了:

1.在ueditor.config.js文件中修改 toolbars:[图表上传中。。。(6)]

 澳门葡京备用网址 4

7、完整的按钮列表

toolbars: [
    [
        'anchor', //锚点
        'undo', //撤销
        'redo', //重做
        'bold', //加粗
        'indent', //首行缩进
        'snapscreen', //截图
        'italic', //斜体
        'underline', //下划线
        'strikethrough', //删除线
        'subscript', //下标
        'fontborder', //字符边框
        'superscript', //上标
        'formatmatch', //格式刷
        'source', //源代码
        'blockquote', //引用
        'pasteplain', //纯文本粘贴模式
        'selectall', //全选
        'print', //打印
        'preview', //预览
        'horizontal', //分隔线
        'removeformat', //清除格式
        'time', //时间
        'date', //日期
        'unlink', //取消链接
        'insertrow', //前插入行
        'insertcol', //前插入列
        'mergeright', //右合并单元格
        'mergedown', //下合并单元格
        'deleterow', //删除行
        'deletecol', //删除列
        'splittorows', //拆分成行
        'splittocols', //拆分成列
        'splittocells', //完全拆分单元格
        'deletecaption', //删除表格标题
        'inserttitle', //插入标题
        'mergecells', //合并多个单元格
        'deletetable', //删除表格
        'cleardoc', //清空文档
        'insertparagraphbeforetable', //"表格前插入行"
        'insertcode', //代码语言
        'fontfamily', //字体
        'fontsize', //字号
        'paragraph', //段落格式
        'simpleupload', //单图上传
        'insertimage', //多图上传
        'edittable', //表格属性
        'edittd', //单元格属性
        'link', //超链接
        'emotion', //表情
        'spechars', //特殊字符
        'searchreplace', //查询替换
        'map', //Baidu地图
        'gmap', //Google地图
        'insertvideo', //视频
        'help', //帮助
        'justifyleft', //居左对齐
        'justifyright', //居右对齐
        'justifycenter', //居中对齐
        'justifyjustify', //两端对齐
        'forecolor', //字体颜色
        'backcolor', //背景色
        'insertorderedlist', //有序列表
        'insertunorderedlist', //无序列表
        'fullscreen', //全屏
        'directionalityltr', //从左向右输入
        'directionalityrtl', //从右向左输入
        'rowspacingtop', //段前距
        'rowspacingbottom', //段后距
        'pagebreak', //分页
        'insertframe', //插入Iframe
        'imagenone', //默认
        'imageleft', //左浮动
        'imageright', //右浮动
        'attachment', //附件
        'imagecenter', //居中
        'wordimage', //图片转存
        'lineheight', //行间距
        'edittip ', //编辑提示
        'customstyle', //自定义标题
        'autotypeset', //自动排版
        'webapp', //百度应用
        'touppercase', //字母大写
        'tolowercase', //字母小写
        'background', //背景
        'template', //模板
        'scrawl', //涂鸦
        'music', //音乐
        'inserttable', //插入表格
        'drafts', // 从草稿箱加载
        'charts', // 图表
    ]
]

澳门葡京备用网址 5

2在ueditor.all.js中修改:

 

8.附录

情节编排人士有时偷懒,不协调编排,而是复制粘贴,也有点重视细节。为了让文档在前者突显格式统一,一般须求给文档加有的自定义样式。大概如下:

//移动端css
* {margin:0;padding:0;}
body,html {
    width:100%;
    overflow-x:hidden;
} 
a {text-decoration:none;}
.view {
    padding:0 .12rem;
    background-color:#fff;
    /*解决app调用H5时滑动不灵敏*/
    -webkit-overflow-scrolling: touch;
} 
/*基础文本样式*/
.content{
    padding: .1rem;
    font-size: .16rem !important;
    line-height: .24rem;
    color: #555;
    /*解决英文及数字不换行问题/
    word-wrap:break-word;
    overflow: hidden;
}
/*标题*/
.content h1{
    margin: .2rem 0;
    font-size: .2rem !important;
    font-weight: 800;
    text-align: center;
}
.content h2{
    margin: .18rem 0 .12rem;
    font-size: .18rem !important;
    font-weight: 800;
}
.content h3{
    margin: .16rem 0 .12rem;
    font-size: .17rem !important;
}
.content p{
    margin: .12rem 0;
}
/*图片显示,小图标在文字中间*/
.content p img{
    margin: .15rem 0;
    max-width: 100% !important;
    height: auto !important;
    vertical-align: middle;
}
/*引用*/
.content blockquote{
    padding: .1rem .2rem;
    margin: 0;
    font-size: .16rem !important;
    border-left: .05rem solid #eee;
}
.content blockquote p{
    margin: 0;
}
/*插图*/
.content figure{
    margin: .12rem 0;
    font-size: .14rem !important;
}
.content figure img{
    max-width: 100% !important;
}
/*插图文本*/
.content figcaption {
    margin-top: .05rem;
    padding: 0 .2rem;
    font-weight: 400;
    clear: both;
    color: #999;
    font-size: .12rem !important;
    line-height: .2rem;
    text-align: center;
    display: block;
}

更加多详细文档:
UEditor
官网:http://ueditor.baidu.com
UEditor API
文档:http://ueditor.baidu.com/doc
UEditor Github
地址:http://github.com/fex-team/ueditor

想定制什么效益,只要求参考上边下载的编辑器demo内的ueditor.config.js文件中toolbars属性,将相应的字符串添加进去即可:

2.1挂号命令

[图形上传中。。。(7)]


        //工具栏上的所有的功能按钮和下拉框,可以在new编辑器的实例时选择自己需要的重新定义
        , toolbars: [[
            'fullscreen', 'source', '|', 'undo', 'redo', '|',
            'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
            'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
            'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
            'directionalityltr', 'directionalityrtl', 'indent', '|',
            'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',
            'link', 'unlink', 'anchor', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
            'simpleupload', 'insertimage', 'emotion', 'scrawl', 'insertvideo', 'music', 'attachment', 'map', 'gmap', 'insertframe', 'insertcode', 'webapp', 'pagebreak', 'template', 'background', '|',
            'horizontal', 'date', 'time', 'spechars', 'snapscreen', 'wordimage', '|',
            'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', 'charts', '|',
            'print', 'preview', 'searchreplace', 'drafts', 'help'
        ]]
2.2添加命令监听

UE.commands[‘pagenumber’] = {

execCommand: function(cmd){

    console.log('添加页码:'+cmd);

    var html = "页码";

    this.execCommand("inserthtml", html);

}    

};

3.在/lang/zh-cn.js里添加汉语语言援救:
[图表上传中。。。(8)]

5.百度编辑器配置。

ueditor.config.js文件可以定制编辑器的许多作用,只必要将对应属性前面的’//’去掉,true为打开,false为关门进行设置即可.比如:


        //elementPathEnabled
        //是否启用元素路径,默认是显示
        ,elementPathEnabled : false
        //wordCount
        ,wordCount:false          //是否开启字数统计
        //,maximumWords:10000       //允许的最大字符数

 
   1.载入js,css文件

遵从上边代码修改完ueditor.config.js文件,刷新页面你会看出不均等的地点:

<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" />

澳门葡京备用网址 6

      2.页面配备

上面的因素路径和字数总括都毁灭了,是否越来越美观了呢O(∩_∩)O~

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

实则行使时大家还有可能在一个域名下上传百度编辑器编辑的情节(例如:在www.52lnamp.com域名下上传了一张图片),而需求不单单是要在这域名下展示,还须求可以在任何域名下显得,那时就会产出图片不设有的意况,

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

那是因为百度编辑器的陈设文件中默许的上传路径是相对路径,也就是说上边上传的图纸的地址是周旋于当下的域名进行上传的,唯有在你上传的域名下得以显得,其余域名是显示不出来的,

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

假如要在其它一个域名上浮现的话只要求修改配置文件为相对路径就足以了,打开下边下载的demo,找到php/config.json文件,打开后您会看到

     
 4.万一您要动用传图片功用,还索要修改net文件下的多少个公文截图申明呢(这么些途径可以直接删除的,试试。不行了和谐再调整下)。

澳门葡京备用网址 7

澳门葡京备用网址 8改为–>澳门葡京备用网址 9

个中imageUrlPrefix这些特性加上域名即可:”imageUrlPrefix”:
“”, /* 图片访问路径前缀 */

        同理将net文件下其余文件类似的荒谬改正后即可上传图片。 

内需专注的是添加域名的时候必须带上http or
https,唯有这么写出来的才能正常突显,不加的话在您引用的时候会在眼前重复加上一个域名,基本驾驭了这么些足以因对一般的急需,有任何另类的须求可以参考百度编辑器文档,也欢迎补充互学.

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

       5.ueditor 的好多默许配置都在
editor_config.js那几个文件中,细心看的话,开启或关闭内部的配置是可以化解许多标题标。

     
 6.我在行使进度中还遇上过编辑器内容影响全体页面的布局难题,那难题是在editor_all.js这几个文件中修改的默许样式难点的。 
       

 /**
         * 渲染编辑器的DOM到指定容器,必须且只能调用一次
         * @public
         * @function
         * @param {Element|String} container
         */
        render:function ( container ) {
            var me = this, options = me.options;
            if ( container.constructor === String ) {
                container = document.getElementById( container );
            }
            if ( container ) {
                var useBodyAsViewport = ie && browser.version < 9,
                        html = ( ie && browser.version < 9 ? '' : '<!DOCTYPE html>') +
                                '<html xmlns=\'http://www.w3.org/1999/xhtml\'' + (!useBodyAsViewport ? ' class=\'view\'' : '') + '><head>' +
                                ( options.iframeCssUrl ? '<link rel=\'stylesheet\' type=\'text/css\' href=\'' + utils.unhtml( options.iframeCssUrl ) + '\'/>' : '' ) +
                                '<style type=\'text/css\'>' +
                            //这些默认属性不能够让用户改变
                            //选中的td上的样式
                                '.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/defaultnchor.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的处理
                                'li{clear:both}' +
                            //设置段落间距
                                'p{margin:5px 0;}'
                                + ( options.initialStyle || '' ) +
                                '</style></head><body' + (useBodyAsViewport ? ' class=\'view\'' : '') + '></body>';

说到底对那个编辑器总计下:很好用的,代码很不难读懂,便于修改配置为温馨喜好的想要的。 


二丶CKEditor丶CKFinder
国外资深编辑器 


 1.官方文档,演示,下载地址: 丶 

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

3.编辑器显示:


 

 澳门葡京备用网址 10 
 


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:

          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);去掉

最终对那些编辑器计算下:很强大,很好用。世界各市都在用的。


 

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*
*
Website