広告

TinyMCEを設置

WordPressの投稿画面に採用されているWYSIWYGエディターのTinyMCE。
画像アップロード機能も欲しいので手軽に使えるjbimagesプラグインを導入です。

TinyMCE本体

https://www.tiny.cloud/get-tiny/self-hosted/

Download TinyMCE Communityをダウンロード。

解凍してtinymceディレクトリを[公開ディレクトリ]/js/以下に配置。

言語パッケージ

https://www.tiny.cloud/get-tiny/language-packages/

Japaneseをダウンロード。

解凍して「ja.js」を [公開ディレクトリ]/js/tinymce/langs/以下に配置。

画像アップロードプラグイン jbimages

https://github.com/vikdiesel/justboil.me

ダウンロード&解凍して
[公開ディレクトリ]/js/tinymce/ploguins/以下に配置。

【設定例】

※画像は月別のディレクトリに保存することにする。

tinymce/plugins/jbimages/config.php

$thisMonth = date("Ym");
$config['img_path'] = '/images/' . $thisMonth;
$config['upload_path'] = $_SERVER['DOCUMENT_ROOT'] . $config['img_path']; // Physical path. [Usually works fine like this]
if (!is_dir($config['upload_path'])) {
	mkdir($config['upload_path'], 0777);
}

$config['allowed_types'] = 'gif|jpg|png';
$config['max_size'] = 0;
$config['max_width'] = 0;
$config['max_height'] = 0;
$config['allow_resize'] = TRUE;
$config['encrypt_name'] = TRUE;
$config['overwrite'] = FALSE;

TinyMCE設置例

<script src="/js/tinymce/tinymce.min.js"></script>
<script type="text/javascript">
	tinymce.init({
		selector : 'textarea',
		plugins  : 'paste textcolor image jbimages link autolink preview',
		paste_as_text: true,
		toolbar  : 'bold italic underline | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | image | link jbimages | preview',
		menubar  : false,
		relative_urls : false
	});
</script>

※デフォルトで改行はPタグが使用されているが<br />にすることも可能

force_br_newlines : true,
force_p_newlines : false,

であるが・・・
見出しの連動に不具合が出たので記事保存時にreplaceしたほうがよさげ。。。