button跳转php页面技巧_wordpress优化之结合prismjs为编辑器自定义按钮转化代码

查了下资料，牛逼的人们总是啥都会整出来，看到Prism.js，处理一下只须要引用50KB不到的js，而且不依赖jquery，非常nice，利用prism.js的详细过程请看这篇文章：wordpress无插件实现sublime代码高亮显示

用过的同学就会创造，尼玛纵然那样做了，在后台编辑文章时的体验特差啊啊啊，意气消沉！
由于要在文本模式下插入指定的代码，再切换回可视化，而这样切换，光标及可编辑的位置就变得模糊而不可调度，切实其实了，而且添加的代码还要将标签转义才能够正常显示。
巨坑！

后来动动脑筋想到，自己手动写个转化工具网页不也是可以？于是就开始动手了。

实现的目的只想把代码拷进去，点一下按钮，再点一下复制就可以去粘贴代码到编辑器 了

于是构造看起来是这样的：

<div class=\"大众box\公众>\r <div class=\"大众h\公众>\r 选择措辞：<select id=\"大众lang\"大众></select>\r <a href=\公众javascript:;\公众 id=\公众copy\"大众>复制代码</a>\r <a href=\"大众javascript:;\公众 id=\公众render\"大众>转化</a>\r </div>\r\r <textarea id=\"大众code\"大众 placeholder=\"大众粘贴源代码\"大众></textarea>\r <textarea id=\公众box\"大众 placeholder=\"大众复制天生后的代码\公众></textarea>\r</div>\r

关于措辞选择当然不能写去世，万一往后要增加呢，以是我们定义数组动态添加：

var la = [\"大众html\"大众, \公众js\"大众, \"大众css\"大众, \"大众php\"大众, \"大众java\公众, \"大众jsx\"大众, \公众git\公众, \"大众nginx\公众, \"大众yaml\"大众, \"大众scss\"大众, \公众sass\公众, \公众c\"大众, \公众c++\公众, \"大众CoffeeScript\"大众, \公众go\"大众, \"大众jade\"大众, \公众sql\"大众, \"大众json\公众, \"大众less\"大众, \"大众python\公众];\r\rfor (var i =0; i < la.length; i++) {\r str = document.createElement(\公众option\"大众);\r str.value = la[i]\r str.innerHTML = la[i];\r lang.appendChild(str);\r}\r

当点击转化时，转义html标签为实体后，首位添加上prism插件必须的pre标签和行号：

render.addEventListener(\"大众click\"大众, function {\r var content = code.value;\r content = content.replace(/</g, \"大众<\"大众).replace(/>/g, \公众>\"大众);\r\r str = '<pre class=\"大众line-numbers\"大众><code class=\"大众language-'+ lang.value +'\"大众>\n';\r str += content;\r str += \"大众\n</code></pre>\"大众;\r\r box.value = str;\r}, false);\r

然后是点击复制就将目标代码复制到剪切板：

copy.addEventListener(\公众click\"大众, function {\r box.select;\r document.execCommand(\"大众Copy\"大众);\r});;\r

就这样完成，但是还是有个小坑，我在写的时候创造了，要粘贴代码的时候须要手动切换到文本模式，粘贴完代码后还得切换到可视化，就这个巨坑，而且代码样式不能预览，不过比之前好多了，为了不用那么冗余的插件，为此也算是值了。
落成后的界面是这样子的。
请戳链接：demo，转载请注明连接。

那么问题又来了，我不可能每次手动输入这个地址吧，多麻烦？我想要在后台写文章的时候添加一个按钮跳转到我自定义的这个页面，万能的网友总是一如既往的牛逼，有2中办理办法：

很显然，我会先择后者 ，它们看起来分别是这样的：

两者的实现办法分别为：

// my_add_pages 为 'admin_menu' 钩子的回调函数\rfunction my_add_pages {\r // 第一个参数'Help page'为菜单名称，第二个参数'利用帮助'为菜单标题\r // 'manage_options' 参数为用户权限\r // 'my_toplevel_page' 参数用于调用my_toplevel_page函数，来显示菜单内容\r add_menu_page('Help page', '利用帮助', 'manage_options', __FILE__, 'my_toplevel_page');\r}\r\r// my_toplevel_page 用于显示菜单的内容，填写菜单页面的HTML代码即可\rfunction my_toplevel_page {\r echo '\r 这里填菜单页面的HTML代码\r ';\r\r // 如以下示例代码。
wrap 类是WordPress构建好的css类，可以在你的HTML代码中利用\r /\r echo '\r <div class=\"大众wrap\"大众>\r <h2>利用帮助</h2>\r <p>这里是利用帮助，通过阅读本文你将理解本程序的利用！
有事请<a href=\"大众#\"大众>与我联系</a></p>\r </div>\r ';\r /\r}\r\r// 通过add_action来自动调用my_add_pages函数\radd_action('admin_menu', 'my_add_pages');\r

这段代码的参考文章是：WordPress后台添加侧边栏菜单。
后者的实现办法是：

add_action('media_buttons', 'add_my_media_button');\r\rfunction add_my_media_button {\r echo '<a href=\公众#\"大众 id=\"大众insert-my-media\"大众 class=\"大众button\"大众>Add my media</a>';\r}

这样点击添加代码块，就会跳转到自定义的转化代码的html页面。