留言板  |    文章总数=102  |    RSS订阅
喜欢一个人就去表白,万一成备胎了呢毒鸡汤

django使用百度ueditor编辑器代码无法高亮和代码无法换行的解决方法

2020-01-07     loonlog     357     0

富文本编辑器在web开发中是不可缺少的;django开发web项目时,在这里推荐大家使用DjangoUeditor,因为DjangoUeditor包含了很多强大的功能,如文件上传和图片上传、代码种类选择、排版等,在后台和前台一起使用等,非常方便。

但在使用过程中也遇到点问题,比如代码高亮、代码换行问题、行号对不齐的问题,在后端编辑的时候,还可以看到效果,但是在前端没有效果,这需要我们手动做些变动:

代码高亮问题

1、代码高亮的 js 和 css 文件在 ueditor 安装目录里面,具体路径为:DjangoUeditor/static/ueditor/third-party/SyntaxHighlighter,目录下的两个文件分别是 shCore.js 和 shCoreDefault.css,直接复制 SyntaxHighlighter 文件夹到项目 static 静态目录下的 js 文件夹下,路径为:/static/js/SyntaxHighlighter;

2、在 templates 模版目录里面,在你的 base.html 文件中 head 代码块中添加如下代码:

<link href="{% static 'js/SyntaxHighlighter/shCoreDefault.css' %}" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="{% static 'js/SyntaxHighlighter/shCore.js' %}"></script>
<script>
    SyntaxHighlighter.all();//执行代码高亮
</script>

至于路径问题,大家可自定义,但肯定必须在 static 静态目录中(开发django的你,相信你已经知道static静态目录了)

重启uwsgi,相信效果已经呈现。

代码换行问题

找到代码高亮显示的css文件  /static/js/SyntaxHighlighter/shCoreDefault.css ,这个上面已经设置过,打开进行编辑:

源代码

.syntaxhighlighter{width:100%!important;margin:.3em 0 .3em 0!important;position:relative!important;overflow:auto!important;background-color:#f5f5f5!important;border:1px solid #ccc!important;border-radius:4px!important;border-collapse:separate!important;}

他这个css代码,去除了所有换行缩进之类的格式,据说是可以使css打开更快,但是看起来有点乱,就用Ctrl+F寻找吧;

修改代码后

.syntaxhighlighter{width:100%!important;margin:.3em 0 .3em 0!important;position:relative!important;overflow:auto!important;background-color:#f5f5f5!important;border:1px solid #ccc!important;border-radius:4px!important;border-collapse:separate!important;word-break:break-all;}

其实就是在最后增加一句css换行代码:

word-break:break-all;

可能不同的ueditor版本css写法不一样,只要对应的位置加上这个强制换行就可以了。

代码换行后,行号对不齐

换行问题解决,又来一个问题,看下图:因为一行代码显示成两行了,而左侧的行号并未跟着换行。这样就会造成高度不统一而错位了。

image.png

网上看到人家给了一段 js 代码,可以修复行号错位问题,加入上面截图的这段代码后面即可:

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
    $(function(){
        SyntaxHighlighter.highlight();
        $("table.syntaxhighlighter").each(function () {
            if (!$(this).hasClass("nogutter")) {
                var $gutter = $($(this).find(".gutter")[0]);
                var $codeLines = $($(this).find(".code .line"));
                $gutter.find(".line").each(function (i) {
                    $(this).height($($codeLines[i]).height());
                    $($codeLines[i]).height($($codeLines[i]).height());
                });
            }
        });
    });
</script>

第一行是在线加载jquery.js文件,后面的代码为别人写的方法,这里拿来使用,可以解决问题

image.png

django

    觉得有用?请点击页面顶部广告支持我!

您可能感兴趣的文章

发表评论(关于评论)

评论列表,共 0 条评论

  • 暂无评论