diff --git a/View/Elements/wysiwyg_js.ctp b/View/Elements/wysiwyg_js.ctp index 9cd7249..9b8040f 100644 --- a/View/Elements/wysiwyg_js.ctp +++ b/View/Elements/wysiwyg_js.ctp @@ -20,5 +20,6 @@ echo $this->NetCommonsHtml->script( '/wysiwyg/js/plugins/file/plugin.js', '/wysiwyg/js/plugins/nc3_image/plugin.js', '/wysiwyg/js/plugins/nc3_preview/plugin.js', + '/wysiwyg/js/plugins/titleicons/plugin.js', ) ); diff --git a/View/Helper/WysiwygHelper.php b/View/Helper/WysiwygHelper.php index 9a11417..8606482 100644 --- a/View/Helper/WysiwygHelper.php +++ b/View/Helper/WysiwygHelper.php @@ -24,6 +24,8 @@ class WysiwygHelper extends AppHelper { * @var array */ public $helpers = array( + 'NetCommons.NetCommonsHtml', + 'NetCommons.TitleIcon', ); /** @@ -32,6 +34,34 @@ class WysiwygHelper extends AppHelper { * @return String wysiwyg js */ public function wysiwygScript() { + // NetCommonsApp.constant で定義する変数の定義 + $constants = []; + + // タイトルアイコン用のファイルリスト + $constants['title_icon_paths'] = $this->__getTitleIconFiles(); + + $this->NetCommonsHtml->scriptStart(array('inline' => false)); + echo "NetCommonsApp.service('nc3Configs', function() {"; + foreach ($constants as $key => $value) { + if (is_array($value)) { + echo 'this.' . $key . ' = ' . json_encode($value) . ';'; + } else { + echo "this." . $key . " = '" . $value . "';"; + } + } + echo "});"; + $this->NetCommonsHtml->scriptEnd(); + return $this->_View->element('Wysiwyg.wysiwyg_js'); } + +/** + * TitleIconFilesを取得して加工する + * + * @return Array + */ + private function __getTitleIconFiles() { + $files = json_decode($this->TitleIcon->getIconFiles()); + return array_chunk($files, 8); + } } diff --git a/webroot/js/plugins/titleicons/plugin.js b/webroot/js/plugins/titleicons/plugin.js new file mode 100644 index 0000000..39b087f --- /dev/null +++ b/webroot/js/plugins/titleicons/plugin.js @@ -0,0 +1,66 @@ +/** + * plugin.js + * + * Released under LGPL License. + * Copyright (c) 1999-2015 Ephox Corp. All rights reserved + * + * License: http://www.tinymce.com/license + * Contributing: http://www.tinymce.com/contributing + */ + +/*global tinymce:true */ + +tinymce.PluginManager.add('titleicons', function(editor, url) { + var titleicons = editor.settings.nc3Configs.title_icon_paths; + + function getHtml() { + var titleiconsHtml; + + titleiconsHtml = ''; + + tinymce.each(titleicons, function(row) { + titleiconsHtml += ''; + + tinymce.each(row, function(icon) { + var emoticonUrl = icon.path; + + titleiconsHtml += ''; + }); + + titleiconsHtml += ''; + }); + + titleiconsHtml += '
' + + '
'; + + return titleiconsHtml; + } + + editor.addButton('titleicons', { + type: 'panelbutton', + panel: { + role: 'application', + autohide: true, + html: getHtml, + onclick: function(e) { + var linkElm = editor.dom.getParent(e.target, 'a'); + + if (linkElm) { + editor.insertContent( + '' + linkElm.getAttribute('data-mce-alt') + '' + ); + + this.hide(); + } + } + }, + tooltip: 'Emoticons', + icon: 'emoticons' + }); +}); diff --git a/webroot/js/wysiwyg.js b/webroot/js/wysiwyg.js index c7e3b21..e87443f 100644 --- a/webroot/js/wysiwyg.js +++ b/webroot/js/wysiwyg.js @@ -9,7 +9,7 @@ NetCommonsApp.requires.push('ui.tinymce'); /** * NetCommonsWysiwyg factory */ -NetCommonsApp.factory('NetCommonsWysiwyg', function() { +NetCommonsApp.factory('NetCommonsWysiwyg', function(nc3Configs) { /** * tinymce optins @@ -19,7 +19,7 @@ NetCommonsApp.factory('NetCommonsWysiwyg', function() { var options = { mode: 'exact', menubar: false, - plugins: 'advlist textcolor colorpicker table hr emoticons charmap ' + + plugins: 'advlist textcolor colorpicker table hr titleicons charmap ' + 'link media nc3Image code nc3Preview searchreplace paste tex file', toolbar: [ 'fontselect fontsizeselect formatselect ' + @@ -28,10 +28,14 @@ NetCommonsApp.factory('NetCommonsWysiwyg', function() { '| removeformat', 'undo redo | alignleft aligncenter alignright ' + '| bullist numlist | outdent indent blockquote ' + - '| table | hr | emoticons | tex | link unlink', + '| table | hr | titleicons | tex | link unlink', 'media books nc3Image file | pastetext code nc3Preview' ], paste_as_text: true, + + nc3Configs: nc3Configs, + titleIconSize: 18, + setup: function(editor) { editor.addButton('books', { text: '書籍',