タイトルアイコンプラグインの組み込み

* WysiwygHelper 上で TitleIconHeleperからアイコン一覧の取得 * 取得したアイコン情報を app.serviceとしてhash値として登録 * wysiwyg設定としての組込 * titleicons プラグインを組み込み（emoticonsプラグインをベースに）
NetCommons3 · Mar 16, 2016 · f5a392f · f5a392f
1 parent 133f650
commit f5a392f
Show file tree

Hide file tree

Showing 4 changed files with 104 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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 = '<table role="list" class="mce-grid">';
+
+    tinymce.each(titleicons, function(row) {
+      titleiconsHtml += '<tr>';
+
+      tinymce.each(row, function(icon) {
+        var emoticonUrl = icon.path;
+
+        titleiconsHtml += '<td><a href="#" data-mce-url="' + emoticonUrl +
+            '" data-mce-alt="' + icon.alt + '" tabindex="-1" ' +
+            'role="option" aria-label="' + icon.alt + '">' +
+            '<img src="' + emoticonUrl + '" style="width: 18px; height: 18px"' +
+            ' role="presentation" /></a></td>';
+      });
+
+      titleiconsHtml += '</tr>';
+    });
+
+    titleiconsHtml += '</table>';
+
+    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(
+              '<img src="' + linkElm.getAttribute('data-mce-url') + '"' +
+              ' alt="' + linkElm.getAttribute('data-mce-alt') + '"' +
+              ' width="' + editor.settings.titleIconSize + '"' +
+              ' height="' + editor.settings.titleIconSize + '" />'
+          );
+
+          this.hide();
+        }
+      }
+    },
+    tooltip: 'Emoticons',
+    icon: 'emoticons'
+  });
+});
diff --git 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: '書籍',