为 WordPress 后台编辑器添加一键插入代码功能

源代码修改自博客 JMing依然《wordpress优化之结合prism.js为编辑器自定义按钮转化代码》 ,转载请注明出处。


Prism.js 高亮插件真的炒鸡赞啊,然而每次把代码复制到 WordPress 的时候都非常让人头疼。html 的各种转义不说,缩进也会莫名其妙被丢掉…而且还要在可视化和文本编辑模式中来回切换。

然后 OI Dalao MYWKLL 提出了一个小需求…就是快速把他的代码发布到博客里。Google 的时候发现了 JMing依然 的这篇博文,想不到居然会有轮子可以用。于是拿来稍微改改,就加到了博客里。

效果如图(按钮在编辑器第一行最后一个):

下面简单介绍下添加代码的步骤。


下载文件

首先下载一下需要用到的文件,这里已经打包:mce_code_plugin

编辑代码

由于代码的资源路径都是写死的,所以需要自行将网址内我的博客地址修改为你自己的。(注意:如果没有使用 WP-plus 插件,请将 mce_code_plugin.htm 中的第6、67行的 prism.js 资源文件地址修改为实际地址。

你也可以修改 mce_code_plugin.htm 文件中的第 77 行,来增减你需要添加的代码语言。

上传文件

请将压缩包内的所有文件上传到 wp-content/plus/prism_edit 文件夹内。(如果你不希望上传到此处,可以自行修改第一步提到的资源地址,才能上传文件到别处)。

添加钩子

上传完成后,就需要为 WordPress 插入钩子,以便在编辑器上添加插入代码的按钮。代码片段在压缩包内的 functions.php 内已经给出。

(注意!推荐通过在主题 fuunctions.php 文件内 include 该插件代码文件的方式添加代码;如果你希望直接在主题的 functions.php 中添加代码,请删去压缩包内 functions.php 文件中的首行及尾行,再进行插入。同时请注意修改文件路径。)

检查

这时候,所有修改就已经结束了。请检查是否在 wp-content/plus/prism_edit 内上传了三个文件,并且检查是否正确修改了主题的 functions.php 。

确认无误后,打开后台,即可看到编辑器上我们添加的按钮了。如功能不正常,可以尝试通过开发者工具查看网页错误,并进行调试。


我们可爱的 LWL 可能会将该插件加入到 WP-plus 中。

评论

  1. 3年前
    2017-10-15 22:01:15

    应该不会加了,Editor.MD 插件让我可以用 Markdown 来实现这个功能,方便很多

  2. 4年前
    2017-2-11 13:01:38

    近距离%

  3. 4年前
    2017-2-11 13:01:19

    %

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇