利用编辑器处理完成后生成的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 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 style="text-align: justify; line-height: 2.2;">学习到这里是因为自己写了，九品源码，www.19jp.com</li>
<li style="text-align: justify; line-height: 2.2;">一个TinyMCE纯文本粘贴插件，</li>
<li 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.19jp.com", //作者网址
};
}
};
});</code></pre>
<p 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内容在前端如何实现代码高亮？的详细内容，更多关于TinyMCE生成的HTML内容在前端如何实现代码高亮？的资料请关注九品源码其它相关文章！