[WYSIWYG]TinyMCEの画像編集機能(imagetools)代替としてToast UI Image Editorを導入しました

package.json

@@ -31,6 +31,7 @@
         "sass-loader": "^12.6.0",
         "sortablejs": "^1.15.2",
         "tinymce": "^7.8.0",
+        "tui-image-editor": "^3.15.3",
         "vue": "^3.5.13",
         "vue-loader": "^17.3.0"
     }

public/js/app.js.LICENSE.txt

@@ -10,6 +10,26 @@
   * Licensed under MIT (https://github.com/Eonasdan/tempus-dominus/blob/master/LICENSE)
   */
 
+/*!
+ * @copyright Copyright (c) 2017 IcoMoon.io
+ * @license   Licensed under MIT license
+ *            See https://github.com/Keyamoon/svgxuse
+ * @version   1.2.6
+ */
+
+/*!
+ * TOAST UI Color Picker
+ * @version 2.2.8
+ * @author NHN Cloud FE Development Team <dl_javascript@nhn.com>
+ * @license MIT
+ */
+
+/*!
+ * TOAST UI ImageEditor
+ * @version 3.15.3
+ * @license MIT
+ */
+
 /*!
  * The buffer module from node.js, for the browser.
  *
@@ -32,10 +52,16 @@
 
 /*! @license DOMPurify 3.2.4 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.2.4/LICENSE */
 
+/*! @source http://purl.eligrey.com/github/classList.js/blob/master/classList.js */
+
 /*! Axios v1.9.0 Copyright (c) 2025 Matt Zabriskie and contributors */
 
+/*! Fabric.js Copyright 2008-2015, Printio (Juriy Zaytsev, Maxim Chernyak) */
+
 /*! ieee754. BSD-3-Clause License. Feross Aboukhadijeh <https://feross.org/opensource> */
 
+/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */
+
 /**
  * @license
  * Lodash <https://lodash.com/>
@@ -94,3 +120,5 @@
  * @author	owenm    <owen23355@gmail.com>
  * @license MIT
  */
+
+// @license RGB <-> HSV conversion utilities based off of http://www.cs.rit.edu/~ncs/color/t_convert.html

public/mix-manifest.json

@@ -1,4 +1,4 @@
 {
-    "/js/app.js": "/js/app.js?id=b18fa367e699f71a3d92a8a4b6dc29bc",
-    "/css/app.css": "/css/app.css?id=94110667e125790f9646ca8f0c9d2382"
+    "/js/app.js": "/js/app.js?id=e11e836611ea451c83fd5f2e76bd804d",
+    "/css/app.css": "/css/app.css?id=369c846d4ff4ffb259bf19d2d9fcdaae"
 }

resources/js/bootstrap.js

@@ -132,6 +132,7 @@ import './tinymce/plugins/translate/plugin.js';
 import './tinymce/plugins/pdf/plugin.js';
 import './tinymce/plugins/face/plugin.js';
 import './tinymce/plugins/cc_template/plugin.js';
+import './tinymce/plugins/cc_image_editor/plugin.js';
 
 /* content UI CSS is required */
 import 'tinymce/skins/ui/oxide/content.js';
@@ -144,3 +145,9 @@ import 'tinymce/skins/ui/oxide/content.js';
 /* ダウンロードした日本語 https://www.tiny.cloud/get-tiny/language-packages/
    Path: resources/js/tinymce/langs/ja.js */
 import './tinymce/langs/ja.js';
+
+// tui-image-editor本体とCSS
+import ImageEditor from 'tui-image-editor';
+window.ImageEditor = ImageEditor;
+import 'tui-image-editor/dist/tui-image-editor.css';
+import 'tui-color-picker/dist/tui-color-picker.css';

resources/js/tinymce/plugins/cc_image_editor/locale_ja_JP.js

@@ -0,0 +1,79 @@
+export const locale_ja_JP = {
+    "3:2": "3:2",
+    "4:3": "4:3",
+    "5:4": "5:4",
+    "7:5": "7:5",
+    "16:9": "16:9",
+    "Apply": "適用",
+    "Arrow": "矢印",
+    "Arrow-2": "矢印2",
+    "Arrow-3": "矢印3",
+    "Blend": "ブレンド",
+    "Blur": "ぼかし",
+    "Bold": "太字",
+    "Brightness": "明るさ",
+    "Bubble": "吹き出し",
+    "Cancel": "キャンセル",
+    "Center": "中央",
+    "Circle": "円",
+    "Color": "色",
+    "Color Filter": "カラーフィルター",
+    "Crop": "切り抜き",
+    "Custom": "カスタム",
+    "Custom icon": "カスタムアイコン",
+    "Delete": "削除",
+    "DeleteAll": "すべて削除",
+    "Distance": "距離",
+    "Download": "ダウンロード",
+    "Draw": "描画",
+    "Emboss": "エンボス",
+    "Fill": "塗りつぶし",
+    "Filter": "フィルター",
+    "Flip": "反転",
+    "Flip X": "左右反転",
+    "Flip Y": "上下反転",
+    "Free": "自由",
+    "Grayscale": "グレースケール",
+    "Hand": "手のひらツール",
+    "Heart": "ハート",
+    "History": "履歴",
+    "Icon": "アイコン",
+    "Invert": "階調の反転",
+    "Italic": "斜体",
+    "Left": "左",
+    "Load": "読み込み",
+    "Load Mask Image": "マスク画像を読み込む",
+    "Location": "位置",
+    "Mask": "マスク",
+    "Multiply": "乗算",
+    "Noise": "ノイズ",
+    "Pixelate": "モザイク",
+    "Polygon": "多角形",
+    "Range": "範囲",
+    "Rectangle": "長方形",
+    "Redo": "やり直し",
+    "Remove White": "白背景を削除",
+    "Reset": "リセット",
+    "Resize": "リサイズ",
+    "Right": "右",
+    "Rotate": "回転",
+    "Sepia": "セピア",
+    "Sepia2": "セピア2",
+    "Shape": "図形",
+    "Sharpen": "シャープ",
+    "Square": "正方形",
+    "Star-1": "星1",
+    "Star-2": "星2",
+    "Straight": "直線",
+    "Stroke": "線",
+    "Text": "テキスト",
+    "Text size": "文字サイズ",
+    "Threshold": "しきい値",
+    "Tint": "色合い",
+    "Triangle": "三角形",
+    "Underline": "下線",
+    "Undo": "元に戻す",
+    "Value": "値",
+    "ZoomIn": "拡大",
+    "ZoomOut": "縮小",
+};