黄兵的个人博客

在summernote中使用codemirror

我的博客一直使用的是summernote富文本编辑器。

关于summernote如何配置，我这里就不讲了。如果不会，请看官方文档。

今天讲一下在summernote下如何配置codemirror切换到代码模式下，高亮显示代码。

效果如下：

首先看一下如何配置，代码如下：

@section css{
    @Styles.Render("~/Content/summernote/css/codemirror.css",
    "~/Content/summernote/css/monokai.css",
    "~/Content/summernote/dist/summernote-bs3.css",
    "~/Content/summernote/dist/summernote.css")
}
@section scripts{
    @Scripts.Render("~/bundles/SummernoteCode")
}

上面加载必要的css文件，之后看一下js加载了那些：

bundles.Add(new ScriptBundle("~/bundles/SummernoteCode").Include(
                "~/Content/summernote/codemirror/codemirror.js",
                "~/Content/summernote/codemirror/formatting.js",
                "~/Content/summernote/codemirror/xml.js",
                "~/Content/summernote/dist/summernote.js",
                "~/Content/summernote/dist/lang/summernote-zh-CN.js",
                "~/Content/summernote/summernote-initialization.js"
                ));

其他都是官方文件，看一下summernote-initialization.js文件的内容：

$(document).ready(function () {
    $('.summernote').summernote({
        lang: 'zh-CN',
        minHeight: 400,
        tabsize: 2,
        disableDragAndDrop: false,
        dialogsInBody: true,
        dialogsFade: true,
        codemirror: { // codemirror options
            lineNumbers: true,
            matchBrackets: true,
            styleActiveLine: true,
            theme: "monokai"
        },
        toolbar: [
            ['style', ['style']],
            ['font', ['bold', 'underline', 'clear']],
            ['fontname', ['fontname']],
            ['color', ['color']],
            ['para', ['ul', 'ol', 'paragraph']],
            ['height', ['height']],
            ['table', ['table']],
            ['insert', ['link', 'picture', 'video']],
            ['view', ['fullscreen', 'codeview', 'help']],
            ['myplugin', ['aceCodeEditor']]
        ],
        
        callbacks: {
            onImageUpload: function (files, editor, welEditable) {
                sendFile(files[0], editor, welEditable);
            }
        }
    }); 
});


//文件上传
function sendFile(file, editor, welEditable) {
    var data = new FormData();
    data.append("file", file);
    $.ajax({
        data: data,
        type: "POST",
        processData: false,
        contentType: false,
        cache: false,
        url: '/Manage/UploadImages',
        success: function (url) {
            $('.summernote').summernote('insertImage', url);         
        }
    });
};

最主要的就是这几行：

      codemirror: { // codemirror options
            lineNumbers: true,
            matchBrackets: true,
            styleActiveLine: true,
            theme: "monokai"
        },
    

lineNumbers:true 显示行号，matchBrackets: true 括号匹配，设置一下主题等。

黄兵的个人博客原创。

转载请注明出处：黄兵的个人博客 - 在summernote中使用codemirror