TinyMCE / Summer note など

TinyMCEでショートカットを追加する

● TinyMCEでショートカットを追加する

control + enter キーのショートカットを追加する

editor.shortcuts.add('ctrl+13', 'Test CTRL ENTER', function() {
    alert('CTRL ENTER!');
    // do whatever you need to do here!
});
No.1914
12/01 09:11

edit

TinyMCEでカスタムボタンを作成する

● TinyMCEでカスタムボタンを作成する


tinymce.init({
  selector: 'textarea',

  toolbar: 'customStrikethrough customToggleStrikethrough',

  setup: function (editor) {

    editor.ui.registry.addToggleButton('customStrikethrough', {
      text: 'Strikethrough',
      onAction: function (api) {
        editor.execCommand('mceToggleFormat', false, 'strikethrough');
        api.setActive(!api.isActive());
      }
    });

    editor.ui.registry.addToggleButton('customToggleStrikethrough', {
      icon: 'strike-through',
      onAction: function (_) {
        editor.execCommand('mceToggleFormat', false, 'strikethrough');
      },
      onSetup: function (api) {
        editor.formatter.formatChanged('strikethrough', function (state) {
          api.setActive(state);
        });
      }
    });
  },

});

https://www.tiny.cloud/docs/ui-components/typesoftoolbarbuttons/

アイコンはこちら https://www.tiny.cloud/docs/advanced/editor-icon-identifiers/

No.1900
11/12 22:29

edit

Tiny MCE 5 の Full featured examples

● Tiny MCE 5 の Full featured examples

https://www.tiny.cloud/docs/demo/full-featured/

No.1897
11/07 13:04

edit

TinyMCEで Microsoft teams のようにblockquote をエンター2回で抜けるようにする

● TinyMCEで Microsoft teams のようにblockquote を「Return」キー2回で抜けるようにする

  end_container_on_empty_block: true

(「Return」キーを改行などに書き換えている場合は <p>タグを2連続で抜けることができます。)

https://www.tiny.cloud/docs/configure/advanced-editing-behavior/#end_container_on_empty_block

No.1866
09/28 12:46

edit

TinyMCEを多言語(日本語化)する

● TinyMCE Language Packages

https://www.tiny.cloud/get-tiny/language-packages/
ここから japanese をダウンロードします。

ダウンロードした ja.js をサーバにアップロードします。

● TinyMCE のオプションに追加します

languageja にします。
language_url に 言語の .js ファイルを指定します。

tinymce.init({
  selector: 'textarea',
  language: 'ja' ,
  language_url: 'https://mysite.com/tinymcd/langs/ja.js'
});
No.1849
08/31 11:18

edit

TinyMCEで画像やリンク挿入して保存した時の相対パスへの自動変換を停止する

● TinyMCEで画像やリンク挿入して保存した時の相対パスへの自動変換を停止する

relative_urls: false ,
remove_script_host : false,

https://www.tiny.cloud/docs/configure/url-handling/

No.1832
08/08 11:37

edit

Summernote の Enterキーを Pタグから改行に変更する

● Summernote の Enterキーを Pタグから改行に変更する

https://takahashi-it.com/javascript/summernote-enter-br-insted-of-p/

↑ こちらの方法が簡単に実装できてとても良いです。

No.1655
01/14 14:25

edit

Summernoteのエディタの先頭に段落を追加する

● Summernoteのエディタの先頭に段落を追加する

Summernoteの insertParagraph() メソッドは現在のカーソル位置に<p>タグを追加します。
カーソルがすでにある<p>タグの中に存在すると、段落が分断されます。
そこで、Summernoteのエディタの先頭に段落を追加するようにします。

var v = $( ".my_note" ).val();
$( ".my_note" ).summernote('code', '<p>段落テスト</p>' + v );
No.1515
05/20 15:08

edit