雨田博客

2024
雨田博客
首页 » 网站模板 » EMLOG 5.1代码高亮度与后台编辑器

EMLOG 5.1代码高亮度与后台编辑器

EMLOG 5.1代码高亮度与后台编辑器有冲突,从5.0直接升级到5.1.1,发现后台编辑器异常,用的IE10,网上查了一下发现是和代码高亮插件有冲突,没办法,要用代码高亮,还要用后台,网上找了一些资料终于解决了。

先禁用代码高亮插件,最好把插件目录下的syntaxHighlighter文件夹下的syntaxHighlighter.php文件删除,本人洁癖,因为用不到了,有这个文件后台插件那里还会显示代码高亮插件的存在,但不是把JS一类的文件删除了,因为还要用到。

在模板header.php文件HEAD区加入如下代码,说白了就是把原来通过插件调用的方形换成直接指定了。

lt;script type="text/javascript" src="<?php echo BLOG_URL; ?>content/plugins/syntaxHighlighter/brush/brush.js"></script>
<script type="text/javascript">SyntaxHighlighter.config.clipboardSwf = "<?php echo BLOG_URL; ?>content/plugins/syntaxHighlighter/brush/clipboard.swf"; SyntaxHighlighter.all(); </script>
<link rel="stylesheet" type="text/css" href ="<?php echo BLOG_URL; ?>content/plugins/syntaxHighlighter/brush/shCore.css" />
<link rel="stylesheet" type="text/css" href ="<?php echo BLOG_URL; ?>content/plugins/syntaxHighlighter/brush/shThemeDefault.css" />

这样以前写的代码又高亮了。后台编辑器也可以正常用了。网上有人说改模板加代码的没说清楚是那个目录,有朋友加到后台模板里去了。

编辑器自带的插入代码功能很鸡肋,这回除上一个我改造过的。

将些代码替换到根EMLOG根目录下admin/editor/plugins/code/code.js文件中。代码如下:

KindEditor.plugin('code', function(K) {
    var self = this, name = 'code';
    self.clickToolbar(name, function() {
        var lang = self.lang(name + '.'),
            html = ['<div style="padding:10px 20px;">',
                '<div class="ke-dialog-row">',
                '<select class="ke-code-type">',
                    '<option value="java">Java</option>',
                    '<option value="cpp">C/C++/Objective-C</option>',
                    '<option value="c#">C#</option>',
                    '<option value="js">JavaScript</option>',
                    '<option value="php">PHP</option>',
                    '<option value="perl">Perl</option>',
                    '<option value="python">Python</option>',
                    '<option value="ruby">Ruby</option>',
                    '<option value="html">HTML</option>',
                    '<option value="xml">XML</option>',
                    '<option value="css">CSS</option>',
                    '<option value="vb">ASP/Basic</option>',
                    '<option value="pascal">Delphi/Pascal</option>',
                    '<option value="scala">Scala</option>',
                    '<option value="groovy">Groovy</option>',
                    '<option value="lua">Lua</option>',
                    '<option value="sql">SQL</option>',
                    '<option value="cpp">Google Go</option>',
                    '<option value="as3">Flash/ActionScript/Flex</option>',
                    '<option value="sliverlight">WPF/SliverLight</option>',
                    '<option value="shell">Shell/批处理</option>',
                '</select>',
                '</div>',
                '<textarea class="ke-textarea" style="width:408px;height:260px;"></textarea>',
                '</div>'].join(''),
            dialog = self.createDialog({
                name : name,
                width : 450,
                title : self.lang(name),
                body : html,
                yesBtn : {
                    name : self.lang('yes'),
                    click : function(e) {
                        var type = K('.ke-code-type', dialog.div).val(),
                            code = textarea.val(),
                            cls = type === '' ? '' : type,
                            html = '<pre class="brush:' + cls + '; toolbar: true; auto-links: false;">\n' + K.escape(code) + '</pre> ';
                        if (K.trim(code) === '') {
                            alert(lang.pleaseInput);
                            textarea[0].focus();
                            return;
                        }
                        self.insertHtml(html).hideDialog().focus();
                    }
                }
            }),
            textarea = K('textarea', dialog.div);
        textarea[0].focus();
    });
});


 

文章如无特别注明均为原创! 作者: cache, 转载或复制请以 超链接形式 并注明出处 雨田博客
原文地址《 EMLOG 5.1代码高亮度与后台编辑器》发布于2013年5月26日

分享到:
打赏

评论

游客

看不清楚?点图切换