富文本编辑器在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写法不一样,只要对应的位置加上这个强制换行就可以了。

代码换行后，行号对不齐

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

网上看到人家给了一段 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文件，后面的代码为别人写的方法，这里拿来使用，可以解决问题