利用编辑器处理完成后生成的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内容在前端如何实现代码高亮？的资料请关注九品源码其它相关文章！