织梦BUG

kindeditor编辑器显示高亮代码的方法

建站帮助2020-03-23
织梦教程简介:kindeditor4.x代码高亮功能默认使用的是prettify插件,prettify是Google提供的一款源代码语法高亮着色器,它提供一种简单的形式来着色HTML页面上的程序代码。...

kindeditor4.x代码高亮功能默认使用的是prettify插件,prettify是Google提供的一款源代码语法高亮着色器,它提供一种简单的形式来着色HTML页面上的程序代码。

实现方式如下:

首先在编辑器里面插入javascript代码

确定后会在编辑器插入这样的代码:

<pre class="prettyprint lang-js">&lt;script&gt;

var KE;

KindEditor.ready(function(K) {

   KE = K.create('#content',{

       filterMode : false

   });

});

&lt;/script&gt;</pre>

这里要主的就是class=”prettyprint lang-js”

接下来换web页面显示了,首先载入css和js

<link href="/include/kindeditor/plugins/code/prettify.css"  rel="stylesheet" type="text/css">
<script src="/include/kindeditor/plugins/code/prettify.js"></script>

注意:你的改成你自己的路径

然后在</body>的前面加:

<script type="text/javascript">
prettyPrint();
</script>

效果如下:

不过prettify感觉着色不是很好,所以决定要换一个,下一个我们将讲SyntaxHighlighter的的集成。

复制功能添加

以下JS和CSS代码分别复制粘贴到prettify.cssprettify.js最底部

js码如下

$(document).ready(function() {
   var copyimg = "https://www.dedecmsbug.com/style/images/page_copy.png";
   $("pre").each(function() {
       var id = $(this).attr("data");
       var prev = $(this).prev();
      var btn = '<img class="copycode" data-clipboard-target="' + id + '" src="' + copyimg + '" style="cursor: pointer;vertical-align: middle;" title="点击复制代码"> ';
        if (prev.hasClass("prism-show-language")) {
          prev.find("div").prepend(btn)
        } else {
            $(this).before('<div class="prism-show-language"><div class="prism-show-language-label" data-language="default">' + btn + "</div>")
        }
  });
   var clip = new ClipboardJS(".copycode", {
      target: function(trigger) {
           return trigger.parentNode.parentNode.nextSibling
       }
   });
   clip.on("success",
   function(e) {
       alert("复制成功");
      e.clearSelection()
   });
   clip.on("error",
   function(e) {
      alert("复制失败")
    })
   });
CSS代码如下
div.prism-show-language{position:relative;}
div.prism-show-language > div.prism-show-language-label[data-language]{color:black;background-color:#CFCFCF;display:inline-block;position:absolute;bottom:auto;left:auto;top:4.5px;right:0;width:auto;height:auto;font-size:0.9em;border-radius:0 0 0 5px;padding:0 0.6em;text-shadow:none;z-index:1;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;-webkit-transform:none;-moz-transform:none;-ms-transform:none;-o-transform:none;transform:none;}

版权声明

本文为站长原创文章,未经站长允许不得转载。本文地址:https://www.dedecmsbug.com/help/142.html