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したほうがよさげ。。。