TinyMCE生成的HTML内容在前端如何实现代码高亮？

更新：2022-11-13 16:40:57

人气：1191

来源：本站原创

A+

利用编辑器处理完成后生成的HTML代码需要放在前端显示，而且格式和样式能与编辑器显示的保持一致才是应用的关键。本文主要讲TinyMCE生成的HTML内容在前端如何实现代码高亮，最主要实现代码高亮插件是prism.js的引用，及工具条的复制功能。这个示例里面包含了JS文件及代码高亮的样式css文件，在我分享的代码里还多放了几种样式，可以自己调用，从李雷博客分享的百度云下载即可。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>tinyMCE前端显示效果</title>
<script src="js/jquery.min.js"></script>
<script src="js/prism.js"></script>
<link href="css/prism-Okaidia.css" rel="stylesheet" type="text/css" /><!--代码高亮样式 -->
<link href="css/prism-toolbar.css" rel="stylesheet" type="text/css" /><!--复制工具条 -->
<style>
pre[class*="language-"].line-numbers {
    position: relative;
    padding-left: 3.8em;
    counter-reset: linenumber;
}
pre[class*="language-"].line-numbers > code {
    position: relative;
    white-space: inherit;
}
.line-numbers .line-numbers-rows {
    position: absolute;
    pointer-events: none;
    top: 0;
    font-size: 100%;
    left: -3.8em;
    width: 3em; /* works for line-numbers below 1000 lines */
    letter-spacing: -1px;
    border-right: 1px solid #999;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.line-numbers-rows > span {
    display: block;
    counter-increment: linenumber;
}
.line-numbers-rows > span:before {
    content: counter(linenumber);
    color: #999;
    display: block;
    padding-right: 0.8em;
    text-align: right;
}
blockquote {
    border-left: 3px solid #ccc;
    margin-left: 1.8rem;
    padding: 0.1rem 1rem 0.1rem 1rem;
    background:#F4F4F4;
    line-height:2.2
}
ol li{
    line-height:2;
    margin-left: 0.7rem;
    text-indent:none;
}
pre{
    line-height:1.5!important;
    font-size:13px!important;
}
</style>
</head>
<body>
<p class="layoutFV" style="text-align: justify; text-indent: 2em; line-height: 2.2;">学习到这里是因为自己写了一个TinyMCE纯文本粘贴插件，用于给编辑器做纯文本粘贴开启关闭的功能切换，希望点击按钮后一直被选中表示当前为纯文本粘贴状态，再次点击取消。</p>
<pre class="language-plsql"><code>select MAX(id) AS maxid from dangxiao_zichan_guzi_2_cg_5 where zhangtao</code></pre>
<ol style="list-style-type: lower-alpha;">
<li class="layoutFV" style="text-align: justify;  line-height: 2.2;">学习到这里是因为自己写了，李雷博客，www.mdaima.com</li>
<li class="layoutFV" style="text-align: justify;  line-height: 2.2;">一个TinyMCE纯文本粘贴插件，</li>
<li class="layoutFV" style="text-align: justify;  line-height: 2.2;">用于给编辑器做纯文本粘贴开启关闭的功能切换，希望点击按钮后一直被选中表示当前为纯文本粘贴状态，再次点击取消。</li>
</ol>
<pre class="language-javascript"><code>tinymce.PluginManager.add('change_text_paste', function(editor) {
   editor.ui.registry.addToggleButton('change_text_paste', {
        icon: 'paste-text',
        tooltip:"切换粘贴模式",
    return {
        getMetadata: function () {
            return  {
                name: "切换纯文本粘贴模式",//插件名称
                url: "https://www.mdaima.com", //作者网址
            };
        }
    };
});</code></pre>
<p class="layoutFV" style="text-align: justify; text-indent: 2em; line-height: 2.2;">学习到这里是因为自己写了一个TinyMCE纯文本粘贴插件，用于给编辑器做纯文本粘贴开启关闭的功能切换，希望点击按钮后一直被选中表示当前为纯文本粘贴状态，再次点击取消。</p>
<p style="text-align: justify; text-indent: 2em; line-height: 2.2;"><strong>TinyMCE纯文本粘贴插件优化实现了：</strong></p>
<blockquote>
<p style="text-align: justify;  line-height: 2.2;">1、随时开启关闭纯文本粘贴功能；</p>
<p style="text-align: justify;  line-height: 2.2;">2、按钮点击后有选中效果带有背景颜色；</p>
<p style="text-align: justify;  line-height: 2.2;">3、有弹窗提示当前切换的状态且3秒后关闭；</p>
</blockquote>
<script type="text/javascript">
    $('pre').addClass("line-numbers").css("white-space", "pre-wrap");
    $('pre').attr("data-prismjs-copy","复制");
    $('pre').attr("data-prismjs-copy-error","按Ctrl+C复制");
    $('pre').attr("data-prismjs-copy-success","复制成功");
</script>
</body>
</html>

链接：https://pan.baidu.com/s/1Lk0YHh6rD-T3wvDSA7Ns6g?pwd=9h2s

提取码：9h2s

转载请注明：TinyMCE生成的HTML内容在前端如何实现代码高亮？ | 李雷博客 - PHP博客

LODOP不同打印机出现偏移问题

TinyMCE增加修复插件实现在最后增加一个段落标签

Win7如何简单的关闭445端口及445端口入侵详解

# 发表我的评论

/ /

# 最近评论

暂时还没有评论，要不要说点什么？

Ads by Google

随手记

PHP经验分享

联系博主

Hello，本博客系统采用PHP和MySql开发，程序开发完全是因为个人爱好，是自己纯手写PHP源代码，未采用任何PHP框架！

QQ：858353007 微信号：lileihot123

标签：PHP技术博客 PHP经验分享

网站地图 XML地图随手记本站声明博客移动版	会员服务 PHP经验分享帮助中心	关于我们联系我们获取积分 QQ：858353007	广告服务广告优势付款方式 mdaima@126.com	加我微信	移动端访问


Copyright © 2014- 2025 www.mdaima.com All Rights Reserved. 李雷博客，专注PHP经验、PHP教程及PHP源代码开源下载分享的PHP博客！ ICP备案号：京ICP备10202169号-4