码迷,mamicode.com
首页 > Web开发 > 详细

ASP.NET CKEditor和CKFinder配置

时间:2014-09-16 15:59:20      阅读:266      评论:0      收藏:0      [点我收藏+]

标签:ckeditor和ckfinder配置   ckeditor   ckfinder   ckeditor配置   ckfinder配置   

第一次搞这个真的搞的头大,好歹最后也学会了。下面分享一下步骤

第一步:

官网下载CKEditor最新的和CKFinder最新的 都是Net版本的

 

第二步:

解压2个复制文件到网站下面,最好平级

bubuko.com,布布扣

 

第三步,记得引用下ckfinder 下面的dll

bubuko.com,布布扣

 

第四步:

配置ckEdit的工具条

在ckedit 下面的config.js 里面  我的是简单的工具栏

config.language = ‘zh-cn‘;
    config.uiColor = ‘#DBEEF5‘;
    config.toolbar = ‘Full‘;
    config.height = 400;
    config.resize_enabled = false;
    config.toolbar_Full = [
        [‘Bold‘, ‘Italic‘, ‘Underline‘, ‘Strike‘, ‘-‘, ‘Subscript‘, ‘Superscript‘],
        [‘NumberedList‘, ‘BulletedList‘, ‘-‘, ‘Outdent‘, ‘Indent‘],
        [‘JustifyLeft‘, ‘JustifyCenter‘, ‘JustifyRight‘, ‘JustifyBlock‘],
        [‘Format‘, ‘FontSize‘],
        [‘TextColor‘, ‘BGColor‘],
        [‘Image‘]
    ];

对应图片

bubuko.com,布布扣

 

下面这是所有的工具栏配置自己选

config.toolbar_Full = [
[‘Source‘,‘-‘,‘Save‘,‘NewPage‘,‘Preview‘,‘-‘,‘Templates‘],
[‘Cut‘,‘Copy‘,‘Paste‘,‘PasteText‘,‘PasteFromWord‘,‘-‘,‘Print‘, ‘SpellChecker‘, ‘Scayt‘],
[‘Undo‘,‘Redo‘,‘-‘,‘Find‘,‘Replace‘,‘-‘,‘SelectAll‘,‘RemoveFormat‘],
[‘Form‘, ‘Checkbox‘, ‘Radio‘, ‘TextField‘, ‘Textarea‘, ‘Select‘, ‘Button‘, ‘ImageButton‘, ‘HiddenField‘],
‘/‘,
[‘Bold‘,‘Italic‘,‘Underline‘,‘Strike‘,‘-‘,‘Subscript‘,‘Superscript‘],
[‘NumberedList‘,‘BulletedList‘,‘-‘,‘Outdent‘,‘Indent‘,‘Blockquote‘],
[‘JustifyLeft‘,‘JustifyCenter‘,‘JustifyRight‘,‘JustifyBlock‘],
[‘Link‘,‘Unlink‘,‘Anchor‘],
[‘Image‘,‘Flash‘,‘Table‘,‘HorizontalRule‘,‘Smiley‘,‘SpecialChar‘,‘PageBreak‘],
‘/‘,
[‘Styles‘,‘Format‘,‘Font‘,‘FontSize‘],
[‘TextColor‘,‘BGColor‘]
];

 

 

第五步与ckfinder集成 

还是在ckeditr里面config里面配置

    // 在 CKEditor 中集成 CKFinder,注意 ckfinder 的路径选择要正确。
    config.filebrowserBrowseUrl = location.hash + ‘/admin/ckfinder/ckfinder.html‘;
    config.filebrowserImageBrowseUrl = location.hash + ‘/admin/ckfinder/ckfinder.html?Type=Images‘;
    config.filebrowserUploadUrl = location.hash + ‘/admin/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files‘;
    config.filebrowserImageUploadUrl = location.hash + ‘/admin/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images‘;
    config.filebrowserWindowWidth = ‘800‘;
    config.filebrowserWindowHeight = ‘500‘;

 

bubuko.com,布布扣

 

然后配置ckfinder 在 里面找到config.ascx 把这个方法返回为true 允许上传

以及设置图片上传的路径

bubuko.com,布布扣

 

最后使用

引用2个js

<script src="ckeditor/ckeditor.js" type="text/javascript"></script>
    <script src="ckfinder/ckfinder.js" type="text/javascript"></script>

控件上加class="ckeditor 就OK了

<asp:TextBox ID="tbContent" runat="server" TextMode="MultiLine" class="ckeditor"></asp:TextBox>

bubuko.com,布布扣

ASP.NET CKEditor和CKFinder配置

标签:ckeditor和ckfinder配置   ckeditor   ckfinder   ckeditor配置   ckfinder配置   

原文地址:http://blog.csdn.net/qq873113580/article/details/39317417

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!