下载源代码

项目结构说明

05d615d29d

页面引入配置

引入ckeditorckfinder

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

引入代码高亮的样式(vs样式高亮代码,在 ckeditor/plugins/codesnippet/lib/highlight/styles/ 目录下面还有其它的一些高亮样式)

//高亮插件的JS包
<link href="ckeditor/plugins/codesnippet/lib/highlight/styles/vs.css" rel="stylesheet" />
<script type="text/javascript" src="ckeditor/plugins/codesnippet/lib/highlight/highlight.pack.js"></script>
//高亮插件的调用方法
<script type="text/javascript">hljs.initHighlightingOnLoad();</script>

页面标签

<textarea cols="80" id="editor1" name="editor1" rows="10" style="word-break: break-all; word-wrap: break-word;"></textarea>
    var config = {
        toolbar: 'DefaultTool',
        toolbar_AutoTool:
        [
            ['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink', 'Image']
        ]
    };
    var editor = CKEDITOR.replace('editor1', config);//调用ckeditor生成富文本编辑器
    CKFinder.setupCKEditor(editor, '../ckfinder');  //绑定上传控件 路径相对当前页面   

这里 config={ 这里可自己配置(配置后会覆盖默认配置),也可以不用配置(在config.js包里面有默认的配置)}

富文本的值

//纯文本(不包括html,有点小问题,插入图片了也是空)
var tText = editor1.document.getBody().getText();

//带html的内容
var tHtml = CKEDITOR.instances.editor1.getData();

//给富文本赋值
CKEDITOR.instances.editor1.setData("");

在ckeditor富文本里面的config.js包里面配置富文本(默认配置,后期可在引用也再配置,会覆盖这里的配置)

CKEDITOR.editorConfig = function (config) {
    config.language = 'zh-cn';  // 中文
    config.tabSpaces = 4;       // 当用户键入TAB时,编辑器走过的空格数,当值为0时,焦点将移出编辑框
    config.forcePasteAsPlainText = false //不去除 //是否强制复制来的内容去除格式
    config.smiley_columns = 13;  //表情列

    // 设置是使用绝对目录还是相对目录,为空为相对目录
    config.baseHref = ''

    //搜索高亮样式
    config.find_highlight = {
        element: 'span',
        styles: { 'background-color': '#ff0', 'color': '#00f' }
    };

    config.skin = 'flat'; //皮肤
    config.uiColor = '#ffffff';  // 背景颜色    
    config.font_defaultLabel = 'Arial'; //默认的字体
    config.fontSize_defaultLabel = '14px'; //默认字体大小  

    config.toolbarCanCollapse = true;//工具栏收缩
    config.toolbarStartupExpanded = true;//工具栏默认是否展开

    //附加 代码高亮插件 | 皮肤
    config.extraPlugins = "codesnippet";
    config.codeSnippet_theme = "vs";

    config.toolbar = 'DefaultTool';    // 工具条配置
    config.toolbar_DefaultTool =
    [
        ['Source', 'Preview', 'Print'],
        ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', 'Undo', 'Redo', 'Find'],
        ['Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton'],
        ['CreateDiv', 'HiddenField', 'Form', 'Iframe'],
        '/',
        ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', 'RemoveFormat'],
        ['NumberedList', 'BulletedList', 'Outdent', 'Indent', 'Blockquote'],
        ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', 'BidiLtr', 'BidiRtl'],
        ['HorizontalRule', 'PageBreak', 'SpecialChar', 'Table'],
        ['Anchor', 'Link', 'Unlink', 'Image', 'Flash', 'Smiley'],
        '/',
        ['Styles', 'Format', 'Font', 'FontSize'],
        ['TextColor', 'BGColor'],
        ['ShowBlocks', 'CodeSnippet', 'Maximize']
    ];
};

Ckfinder文件上传管理里面已去掉版权文字

Ckfinder文本上传里面的配置说明 config.ascx

public override bool CheckAuthentication()
{
    return true;
}
//19行的位置,return true; 默认返回 false (能不能浏览文件管理)
public override void SetConfig()
{
    // 上传文件路径
    BaseUrl = "/datafile/bbs/";

    acl.FolderView = true;
    acl.FolderCreate = false;//创建文件夹
    acl.FolderRename = false;//重命名
    acl.FolderDelete = false;//删除

    acl.FileView = true;
    acl.FileUpload = true;//上传
    acl.FileRename = false;
    acl.FileDelete = false;
}
//这里就是文件夹管理权限的配置 文件夹的创建、重命名、删除    文件的重命名、删除、上传

留言

ˆ