因为我个人是使用的古腾堡编辑器，经典编辑器个人认为不好编辑文章。
所以这个方法收集给你们。
效果图
经典编辑器编辑处添加一个代码高亮的框。
点击后，弹出下面的的高亮框。
这样插入代码就可以了。
PS：我记得有个插件可以直接实现这种功能。
教程
//后台代码
require_once get_theme_file_path('/Inc/plugins/tinymce/code-button.php');引入路径自己修改
code-button.php
<?php
if (in_array($pagenow, array('post.php', 'post-new.php', 'page.php', 'page-new.php'))) {
add_action('init', 'becode_addbuttons');
}
function becode_addbuttons() {
if (get_user_option('rich_editing') == 'true') {
add_filter("mce_external_plugins", "add_becode_tinymce_plugin", 5);
add_filter('mce_buttons', 'register_becode_button', 5);
}
}
function register_becode_button($buttons) {
array_push($buttons, "separator", "becode");
return $buttons;
}
function add_becode_tinymce_plugin($plugin_array){
$plugin_array['becode'] = B2_CHILD_URI . '/Inc/plugins/tinymce/editor-code.js';
return $plugin_array;
}editor-code.js
(function() {
tinymce.create('tinymce.plugins.becode', {
init: function(ed, url) {
ed.addCommand('becode',
function() {
ed.windowManager.open({
title: '插入代码',
file: url + '/insert-code.php',
width: 500,
height: 420,
inline: 1
},
{
plugin_url: url // Plugin absolute URL
});
});
ed.addButton('becode', {
title: '代码高亮',
cmd: 'becode',
icon: 'code'
});
},
createControl: function(n, cm) {
return null;
},
getInfo: function() {
return null;
}
});
tinymce.PluginManager.add('becode', tinymce.plugins.becode);
})();insert-code.php
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>插入代码</title>
<base target="_self"/>
<style type='text/css'>
body {
font: 14px "Microsoft YaHei", Helvetica, Arial, Lucida Grande, Tahoma, sans-serif;
background-color: #f1f1f1;
color: #222;
}
.codeArea {
margin: 5px;
}
textarea {
margin-top: 10px;
width: 100%;
height: 320px;
}
.button-primary {
float: right;
display: inline-block;
text-decoration: none;
font-size: 13px;
line-height: 26px;
height: 28px;
margin: 0;
padding: 0 10px 1px;
cursor: pointer;
border-width: 1px;
border-style: solid;
-webkit-appearance: none;
-webkit-border-radius: 3px;
border-radius: 3px;
white-space: nowrap;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: #00a0d2;
border-color: #0073aa;
-webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,.5),0 1px 0 rgba(0,0,0,.15);
box-shadow: inset 0 1px 0 rgba(120,200,230,.5),0 1px 0 rgba(0,0,0,.15);
color: #fff
}
.button-primary.focus,.button-primary.hover,.button-primary:focus,.button-primary:hover {
background: #0091cd;
border-color: #0073aa;
-webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,.6);
box-shadow: inset 0 1px 0 rgba(120,200,230,.6);
color: #fff
}
.submitdelete {
float: left;
}
</style>
</head>
<body id="link" >
<form name="becode" action="#">
<div class="codeArea">
<label for="lang">选择语言：</label>
<select id="becode_mode" name="becode_main" style="padding: 3px;">
<option value="markup">html/xml</option>
<option value="javascript" >javascript</option>
<option value="css">css</option>
<option value="php">php</option>
<option value="ruby">ruby</option>
<option value="python">python</option>
<option value="java">java</option>
<option value="c">C</option>
<option value="csharp">C#</option>
<option value="cpp">C++</option>
</select>
<textarea id="becode_code" autofocus></textarea>
<p>
<input type="submit" id="insert" name="insert" value="确定" class="button button-primary" onclick="insertbecodecode();"/>
<input type="button" id="cancel" name="cancel" value="取消" class="submitdelete" onclick="javascript:window.parent.tinyMCE.activeEditor.windowManager.close();"/>
</p>
</div>
</form>
<script>
var html = window.parent.tinyMCE.activeEditor.selection.getContent();
document.getElementById('becode_code').value = html;
function escapeHtml(text) {
return text.replace(/&/g, "&").replace(/"/g, """).replace(/'/g, "'").replace(/</g, "<").replace(/>/g, ">");
}
function insertbecodecode() {
var tagtext;
var modename_ddb = document.getElementById('becode_mode');
var modename = modename_ddb.value;
var html = escapeHtml(document.getElementById('becode_code').value);
tagtext = '<pre class="language-' + modename + '" ><code>' + html + '</code></pre>';
window.parent.tinyMCE.activeEditor.execCommand('mceInsertContent', 0, tagtext);
window.parent.tinyMCE.activeEditor.windowManager.close();
return;
}
</script>
</body>
</html>声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
