ckeditor文本编辑器Go代码高亮后续

作者:guoxj
浏览:498

上一篇文章初步解决方案

    这一次去改源码,直接开始。

    其实上次去看的只是static目录,而不是nginx实际代理的collected_static目录,这个目录搞过Django的应该都明白。

    找到这个路径

ckeditor对应文件路径
ckeditor对应文件路径

    图中的plugin.js下载至本地用vscode打开格式化后内容如下(只保留了对这篇文章有价值的部分代码)

/*
 Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved.
 For licensing, see LICENSE.md or http://ckeditor.com/license
*/
(function () {
  ...
  var k = !CKEDITOR.env.ie || 8 < CKEDITOR.env.version;
  CKEDITOR.plugins.add("codesnippet", {
    requires: "widget,dialog",
    lang: "ar,bg,ca,cs,da,de,el,en,en-gb,eo,es,et,fa,fi,fr,fr-ca,gl,he,hr,hu,it,ja,km,ko,ku,lt,lv,nb,nl,no,pl,pt,pt-br,ro,ru,sk,sl,sq,sv,th,tr,tt,ug,uk,vi,zh,zh-cn",
    icons: "codesnippet",
    hidpi: !0,
    beforeInit: function (a) {
      a._.codesnippet = {};
      this.setHighlighter = function (b) {
        a._.codesnippet.highlighter = b;
        b = a._.codesnippet.langs =
          a.config.codeSnippet_languages || b.languages;
        a._.codesnippet.langsRegex = RegExp(
          "(?:^|\\s)language-(" +
            CKEDITOR.tools.objectKeys(b).join("|") +
            ")(?:\\s|$)"
        );
      };
    },
    onLoad: function () {
      CKEDITOR.dialog.add("codeSnippet", this.path + "dialogs/codesnippet.js");
    },
    init: function (a) {
      a.ui.addButton &&
        a.ui.addButton("CodeSnippet", {
          label: a.lang.codesnippet.button,
          command: "codeSnippet",
          toolbar: "insert,10",
        });
    },
    afterInit: function (a) {
      var b = this.path;
      l(a);
      a._.codesnippet.highlighter ||
        this.setHighlighter(
          new CKEDITOR.plugins.codesnippet.highlighter({
            // 重要内容!!!!!!!!!!!!!!!!!
            // 重要内容!!!!!!!!!!!!!!!!!
            // 重要内容!!!!!!!!!!!!!!!!!
            languages: {
              apache: "Apache",
              bash: "Bash",
              coffeescript: "CoffeeScript",
              cpp: "C++",
              cs: "C#",
              css: "CSS",
              diff: "Diff",
              html: "HTML",
              http: "HTTP",
              ini: "INI",
              java: "Java",
              javascript: "JavaScript",
              json: "JSON",
              makefile: "Makefile",
              markdown: "Markdown",
              nginx: "Nginx",
              objectivec: "Objective-C",
              perl: "Perl",
              php: "PHP",
              python: "Python",
              ruby: "Ruby",
              sql: "SQL",
              vbscript: "VBScript",
              xhtml: "XHTML",
              xml: "XML",
            },
            init: function (c) {
              var h = this;
              k &&
                CKEDITOR.scriptLoader.load(
                  b + "lib/highlight/highlight.pack.js",
                  function () {
                    h.hljs = window.hljs;
                    c();
                  }
                );
              a.addContentsCss &&
                a.addContentsCss(
                  b +
                    "lib/highlight/styles/" +
                    a.config.codeSnippet_theme +
                    ".css"
                );
            },
            highlighter: function (a, b, d) {
              (a = this.hljs.highlightAuto(
                a,
                this.hljs.getLanguage(b) ? [b] : void 0
              )) && d(a.value);
            },
          })
        );
    },
  });
  CKEDITOR.plugins.codesnippet = { highlighter: d };
  d.prototype.highlight = function () {
    var a = arguments;
    this.ready
      ? this.highlighter.apply(this, a)
      : this.queue.push(function () {
          this.highlighter.apply(this, a);
        });
  };
})();
CKEDITOR.config.codeSnippet_codeClass = "hljs";
CKEDITOR.config.codeSnippet_theme = "default";

    于是图中重要内容部分我们添加go: "golang"键值对即可,顺便把Python和Go的位置放到最前面,方便后续的文章撰写。

    直接改服务器上的代码了

plugin.js修改
plugin.js修改

刷新不太行,control+R强刷搞定,修改之前的在上一篇文章,可以对比着看。

修改后下拉框
修改后下拉框

    完结撒花!!laugh




登录后回复

共有0条评论