1.ckeditor和ckfinder下载地址:http://up.2cto.com/2012/0306/20120306084548836.rar
解压后按目录ckeditor_aspnet_3.6.2/_samples打开 : 打开文件为: 2.把ckeditor,ckfinder和bin文件夹粘贴到项目根目录中; 3.修改ckeditor中config.js文件:(绿色字体为可修改项,剩余的直接复制即可)
CKEDITOR.editorConfig = function( config ) { // Define changes to default configuration here. For example: // config.language = 'fr'; config.extraPlugins += (config.extraPlugins ? ',lineheight' : 'lineheight'); //行间距(就在csdn上下一个插件:http://download.csdn.net/detail/biological2012/4974300,放在ckeditor/plugins中)
config.uiColor = 'gray'; //文本编辑器颜色(个人喜欢灰色) config.language = 'zh-cn'; //语言(简体中文) config.font_names = '宋体;楷体_GB2312;新宋体;黑体;隶书;幼圆;微软雅黑;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana'; //字体
config.filebrowserBrowseUrl= '/ckfinder/ckfinder.html'; //上传文件时浏览服务文件夹 config.filebrowserImageBrowseUrl= '/ckfinder/ckfinder.html?Type=Images'; //上传图片时浏览服务文件夹 config.filebrowserFlashBrowseUrl= '/ckfinder/ckfinder.html?Type=Flash'; //上传Flash时浏览服务文件夹 config.filebrowserUploadUrl = '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files'; //上传文件按钮(标签) config.filebrowserImageUploadUrl= '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images'; //上传图片按钮(标签) config.filebrowserFlashUploadUrl= '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash'; //上传Flash按钮(标签)
config.toolbar_Full = [ ['Source', '-', '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', 'CreateDiv'], ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'], ['Link', 'Unlink', 'Anchor'], ['Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak'], '/', ['Styles', 'Format', 'Font', 'FontSize','lineheight'], //行间距 必须要加 ['TextColor', 'BGColor'], ['Maximize', 'ShowBlocks', '-', 'About'] ]; config.toolbar_Basic = [ ['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink', '-', 'About'] ]; }; 4.然后直接从工具箱拖入CKEditorControl控件并在〈head〉</head>标签中添加以下代码:
<script language="C#" runat="server"> protected override void OnLoad(EventArgs e) {
CKFinder.FileBrowser _FileBrowser = new CKFinder.FileBrowser();
_FileBrowser.BasePath = "ckfinder/"; //控件路径
_FileBrowser.SetupCKEditor(CKEditor1); CKEditor1.Height = 400; //控件的高度(编辑区域),config.js内设置无效 CKEditor1.Width = 830; //控件的宽度 } </script> 打开ckfinder/config.ascx文件, 在public override void SetConfig()方法中设置 BaseUrl = "~/";(假如你的图片放在根目录下的images文件夹中,这里就配置为:"~/";假如在根目录下的file文件的images文件中:"~/file/");
type = ResourceType.Add( "Images" ); type.Url = BaseUrl + "images/"; //红色区域为图片所在文件夹名称 type.Dir = BaseDir == "" ? "" : BaseDir + "images/"; //红色区域为图片所在文件夹名称
OK!到此完毕!成功!
|
CKEditor3.62+ASP.NET配置(图片存在指定文件夹,设置行间距)
最新推荐文章于 2016-01-22 16:02:00 发布