【WordPress】WordPressのビジュアルエディタにGitHubのGist一覧を表示するボタンを追加するプラグイン

【WordPress】WordPressのビジュアルエディタにGitHubのGist一覧を表示するボタンを追加するプラグインを作りました。

プラグインを有効化するとビジュアルエディタにGistボタンが追加されます。GistボタンをクリックするとGist一覧が表示され、挿入ボタンをクリックすると本文にGistのURLが挿入されます。

事前にoEmbed Gistプラグインを有効化していると、挿入されたURLがソースコードに変換されます。

プラグインのソースコードは以下のとおりです。

	<?php
	/**
	* Plugin Name: TinyMCE Gist
	* Version: 0.1-alpha
	* Description: PLUGIN DESCRIPTION HERE
	* Author: kurozumi
	* Author URI: http://a-zumi.net
	* Plugin URI: PLUGIN SITE HERE
	* Text Domain: tinymce-gist
	* Domain Path: /languages
	* @package Tinymce-gist
	*/

	if (is_admin())
	{
	$tinymce_gist = new TinyMCEGist;
	$tinymce_gist->register();
	}

	class TinyMCEGist
	{
	public function register()
	{
	add_action("plugins_loaded", array($this, "plugins_loaded"));
	}

	public function plugins_loaded()
	{
	add_action("admin_init", array($this, "admin_init"));
	}

	public function admin_init()
	{
	// ビジュアルエディタにボタン追加
	add_filter("mce_buttons", array($this, "mce_buttons"));

	// ビジュアルエディタに追加したボタン用のjsを登録
	add_filter("mce_external_plugins", array($this, "mce_external_plugins"));
	}

	public function mce_buttons($buttons)
	{
	array_push($buttons, "tinymce_gist");
	return $buttons;
	}

	public function mce_external_plugins($plugins)
	{
	$plugins["tinymce_gist"] = plugins_url("/plugin.js", __FILE__);
	return $plugins;
	}
	}

by GitHub

以下は、tinymceを拡張するためのjsです。

	(function ($) {

	// Register plugin
	tinymce.PluginManager.add('tinymce_gist', function (editor, url) {

	function showDialog() {
	var win = editor.windowManager.open({
	title: "Gist",
	file: url + '/dialog.php',
	width: 600,
	height: 300,
	inline: 1,
	buttons: [{
	text: "Close",
	id: "close",
	class: "close",
	onclick: "close"
	}]
	}, {
	plugin_url: url,
	editor: editor
	});
	}

	editor.addCommand("mceGist", showDialog);

	editor.addButton('tinymce_gist', {
	image: url + '/images/icon.png',
	tooltip: 'Gist',
	onclick: showDialog
	});

	});

	})(jQuery);

view raw plugin.js hosted with

by GitHub

以下は、Gist一覧を表示するファイルです。

	<?php
	require '../../../wp-admin/admin.php';

	if (!is_admin())
	die("Error");

	$feed_url = "https://api.github.com/users/kurozumi/gists";

	$options = array(
	"http" => array(
	"method" => "GET",
	"header" => "User-Agent: wp"
	)
	);

	$context = stream_context_create($options);

	$feed = file_get_contents($feed_url, false, $context);

	$feed = json_decode($feed);
	?>
	<html>
	<head>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
	</head>
	<body id="gist">
	<div class="container-fluid" style="padding:15px;">
	<?php foreach ($feed as $item): ?>
	<div class="well">
	<h4><a href="<?php echo $item->html_url; ?>" target="_blank"><?php echo $item->description; ?></a></h4>
	<p><?php echo $item->description; ?></p>
	<div class="text-right"><button class="btn btn-primary" onClick="insert('<?php echo $item->html_url; ?>')">挿入</button></div>
	</div>
	<?php endforeach; ?>
	</div>
	<script type="text/javascript">
	function insert(url) {
	top.tinymce.activeEditor.execCommand('mceInsertContent', false, url);
	}
	</script>
	</body>
	</html>

view raw dialog.php hosted with

by GitHub

githubにリポジトリを作りましたので利用したい方は以下をCloneして下さい。

TinyMCE Gist
https://github.com/kurozumi/tinymce-gist
0 forks.
0 stars.
0 open issues.

Recent commits: