search

opensource-workshop / connect-cms

コネクトCMS用リポジトリ
https://connect-cms.jp/
MIT License
13 stars 6 forks source link

ウィジウィグのライブラリtinymceを4から5にバージョンアップ #843

Closed akagane99 closed 3 years ago

akagane99 commented 3 years ago

スマートフォンでwygiwygの画像をアップロードさせるボタンが反応しない #359 問題に対応するため、ウィジウィグのtinymceを4から5に入れ替える。

タスク

wiki

https://github.com/opensource-workshop/connect-cms/wiki/WYSIWYG

対応プルリクエスト

https://github.com/opensource-workshop/connect-cms/pull/844

akagane99 commented 3 years ago

独自プラグインのアイコン表示

jquery - MCE5- How to put any image as custom button icon in Tiny mce-5? - Stack Overflow https://stackoverflow.com/questions/54865771/mce5-how-to-put-any-image-as-custom-button-icon-in-tiny-mce-5

While the addIcon API documentation says it's for registering SVG icons, you can pass it any markup:

// works with tinymce v5.2
ed.ui.registry.addIcon('donut', '<img src="/image-process/images/donut_PNG27.png" />');

ed.ui.registry.addButton('alignTop', {
    icon: 'donut',
    ...
});

tinymce.editor.ui.Registry | Docs | TinyMCE https://www.tiny.cloud/docs/api/tinymce.editor.ui/tinymce.editor.ui.registry/#addicon

akagane99 commented 3 years ago

TinyMCE5の独自プラグイン作成方法

Create a plugin for TinyMCE | Docs | TinyMCE https://www.tiny.cloud/docs/advanced/creating-a-plugin/

TinyMCE 5: Creating a custom Dialog Plugin (and with Custom Button Icons) https://www.martyfriedel.com/blog/tinymce-5-creating-a-plugin-with-a-dialog-and-custom-icons

tinymce.dom.Selection | Docs | TinyMCE https://www.tiny.cloud/docs/api/tinymce.dom/tinymce.dom.selection/#getcontent

akagane99 commented 3 years ago

tinymce5対応でyoutubeの埋め込みもフックできるかと思ってたけど、無理やった。→ とりあえずそっとしときます。

以下詳細

youtubeの埋め込みで、埋め込み動画は固定幅なんで、スマホで見た時に枠外に飛び出します。 その対応するのにdivタグで、embed-responsive embed-responsive-16by9 クラス付けてIframeを囲むと、レスポンシブになる。

例） https://connect-cms.jp/news/movie

・けど、tinymce5でyoutubeの埋め込みもフック出来ると思ってたけど、フックなくできなかった。 ・ならば「書式」で下記とか設定して、使えばいいかと思ったけど、 　ウィジウィグ内だとyoutube埋め込み動画クリックで、Iframeにタゲがあたってしまうので、「書式」選択しても適用されない。。。 　→ ウィジウィグ下部のタグ表示されてる所で、P > iframe になってる所のPタグ押してからなら、「書式」適用できるけど、煩雑すぎるなぁと。

    {title : '埋め込み動画のレスポンシブ対応', inline : 'div', classes : 'embed-responsive embed-responsive-16by9'},
akagane99 commented 3 years ago

スマホのツールバー初期設定

https://www.tiny.cloud/docs/mobile/#mobiledefaultsforselectedsettings https://www.tiny.cloud/docs/configure/editor-appearance/#toolbar_mode

基本これでいく。 他ボタンは、toolbar_mode : 'floating', で「...」ボタン押して表示する感じ。

image

akagane99 commented 3 years ago

ツールバー「書式」が「段落」と表示される不具合対応

https://github.com/tinymce/tinymce/issues/5089

こんにちは mkemmerling、両方が同じ初期ラベルを持っている間、それは、可能な限り(およびより多く)を行うことができるので、彼らが一緒に使用されることを意図していません。styleselect formatselect style_format block_format

一緒に使う事を意図してない。との事。

代替え案

  1. formatselect を style_format に統合する（正攻法） （複数のフォーマットが適用されてる文だと、上の方の適用されたフォーマットがツールバーに表示される。こういう表示みたい ※1画像）
  2. style_format に下記を追加して、なんちゃって「書式」表示にする ※2 画像 { title: 'Formats', format: 'p' }, （good: ウィジウィグは基本pタグが付くため、「書式」表示になる） （bad: 注意ポイントなど選択するとツールバーの表示も変わるが、pタグ「書式」が反応するため「書式」表示のママ）
  3. 「段落」が２つ並んでも気にせず、このママ

formatselect を style_format に統合する（正攻法）

正攻法でいく。

※1 画像

image

※2 画像

image

代替え案：style_format に統合する

定義済みformats https://www.tiny.cloud/docs/general-configuration-guide/filter-content/#built-informats

https://www.tiny.cloud/docs-4x/configure/content-formatting/

unicode変換サイト https://www.gadgety.net/shin/trivia/translate.html

失敗：JSで無理やり変更

表示されてれば書き換えられるが、toolbar_mode = フローティングの時は、そもそも画面表示されてないので書き換えられず。 ⇒ 対応無理だった。

    tinymce.init({
            selector : 'textarea',
        language : 'ja',

        setup: function(editor) {
            editor.on('init', function(e) {
                console.log('The Editor has initialized.');
                //
                jQuery('.tox-tbtn--select')[1].children[0].textContent = '書式';
            });
        }
    });

「…」ボタン押下時に隠れてるツールバーを生成しているので、仮にJSで変更しても、「…」を押下して閉じる・開くをすると「段落」に戻ってしまう。 ⇒ 無理だぁ。 image image

akagane99 commented 3 years ago

Font Awesome plugin for TinyMCE 5 もサードパーティのプラグインであるらしい。 https://www.tinymce-faicons.com/

masaton0216 commented 3 years ago

Font Awesome plugin for TinyMCE 5 もサードパーティのプラグインであるらしい。

MCE5版だと実装違うかもしれないですが、一応、過去のお試しコミットを共有しときます。 Slackでスクショ付で過去に需要聞いてみたんですが、無反応だったのでそのままになってたやつです。（Slackで聞いたのがダメだったのかもしれませんがｗ）

akagane99 commented 3 years ago

Font Awesome plugin for TinyMCE 5 もサードパーティのプラグインであるらしい。

書いといてなんなのだけど、正直いるかと言われると、かなり怪しいw

akagane99 commented 3 years ago

画像アップ時に改行入れる。試す

・１ファイルのアップロードは、Connect-CMSのアップロードクラスでは、'{location' => 'url'}で返してるため、タグ挿入不可 ・残る方法は、image pluginのソースをいじる方法。 　image plugin のミニマライズしてないソースを持ってきて、いじってみたけどうまくいかなかった。

一旦見送り。

失敗：保存ボタン押下時に改行追加

    var submitHandler = function (editor) {
      return function (info) {
        return function (api) {
          // add: 画像アップロード後に改行を追加. iphoneで画像アップロード時にウィジウィグが画像いっぱいになり、改行入力すると画像が消えるための対応
         // editor.insertContent('<br />');
         // 何も変化なし。

          var data = deepMerge(fromImageData(info.image), api.getData());
          editor.execCommand('mceUpdateImage', false, toImageData(data, info.hasAccessibilityOptions));
          editor.editorUpload.uploadImagesAuto();

         // editor.insertContent('<br />');
         // アップロードしたimgタグ消える。ダメだった。

          api.close();
        };
      };
    };

参考ドキュメント

https://www.tiny.cloud/docs/api/tinymce/tinymce.editor/#insertcontent

akagane99 commented 3 years ago

新規時、サイズ指定でGD使ってリサイズ(1日位で判断)

だめっぽい。

・images_upload_handlerで画像をアップロードしているが、その時点では子ウィンドウは消滅していて、幅高さの情報がとれない。 　※ tinyの子ウィンドウの値を取得するメソッドがもしあるのであれば、上記が解決できるかも。今のところ見つかってない。

現在可能な方法。 ・images_upload_handlerを使わない（＝ファイルのドラッグ＆ドロップはできなくする） 　画像選択時に、直アップロードする。方式なら幅高さが取得でき、リサイズ可能と思われる。

⇒ 対応できました。

tinymce.init({ の setup: function(editor) { 内で mceUpdateImage イベント(画像プラグイン保存ボタン押下後)が取れて、 この後に images_upload_handlerが走ったので、幅と高さをinput type textに退避してリサイズしました。

修正プログラム

https://github.com/opensource-workshop/connect-cms/commit/bb67b50bb1f7017a3187031bddb25b81b694e9ef

参考URL

LaravelでIntervention Imageを使って加工した画像をS3へ保存する - Qiita https://qiita.com/fakefurcoronet/items/fe2861ca2846b7347418

完全網羅！Intervention Image（PHP）で画像を編集する全実例 – console dot log https://blog.capilano-fw.com/?p=1574

akagane99 commented 3 years ago

対応しました。

public\themes\Defaults\Default\wysiwyg\style_formats.txt　を修正したので、独自テーマがある所は独自デーマのstyle_formats.txtも修正してね。

style_formats : [
// ここから追加
    { title: 'Paragraph', format: 'p' },
    { title: 'Heading 1', format: 'h1' },
    { title: 'Heading 2', format: 'h2' },
    { title: 'Heading 3', format: 'h3' },
    { title: 'Heading 4', format: 'h4' },
    { title: 'Heading 5', format: 'h5' },
    { title: 'Heading 6', format: 'h6' },
    { title: 'Preformatted', format: 'pre' },
// ここまで
    {title : '囲み(グレー)', block : 'div', classes : 'cc-column'},
    {title : '注意ポイント', block : 'p', classes : 'cc-exclamation'},
    {title : '※印ポイント', block : 'p', classes : 'cc-note'},
    {title : 'アイコン(PDF)', selector : 'a', classes : 'cc-icon-pdf'},
    {title : 'アイコン(Excel)', selector : 'a', classes : 'cc-icon-excel'},
    {title : 'アイコン(Word)', selector : 'a', classes : 'cc-icon-word'},
    {title : 'アイコン(外部サイト)', selector : 'a', classes : 'cc-icon-external'},
],

画面

tinymce5 (pc)

image

tinymce5 (スマートフォン)

image

tinymce4（pcいままで）

image

tinymce4（スマートフォンいままで）

修正プログラム

https://github.com/opensource-workshop/connect-cms/pull/844/files

akagane99 commented 3 years ago

新規時、サイズ指定でGD使ってリサイズ、対応できました。 https://github.com/opensource-workshop/connect-cms/issues/843#issuecomment-842285807

・GD（phpライブラリ）インストールしてある。（インストールしてないとリサイズしないけど通常動作する） ・png, jpgeのみリサイズ対応 　※ gifはアニメーションgifがありリサイズするとアニメーションしなくなる＆gitはあまり使われてないため、リサイズ対象外としました。 ・登録時に幅と高さでリサイズ