TinyMCE / Summer note など

TinyMCEでテーブルの幅を入力させないようにする

● TinyMCEでテーブルの幅を入力させないようにする

		invalid_styles: {
			 'table': 'width' ,
			 'th': 'width' ,
			 'td': 'width' ,
		} ,

このようにすると上記の3つのテーブルの widthプロパティ が設定されなくなります。

No.2001
05/24 17:47

edit

Tiny MCE の<span>タグが消える問題の回避方法

● Tiny MCE のタグが消える問題の回避方法

tinymce.init({
    selector: '#body',
    ......... 

↓ 以下のオプションを追加します

tinymce.init({
    selector: '#body',
    valid_elements: "*[*]" ,
    ......... 
No.1972
03/19 14:34

edit

tinymceのサードパーティプラグイン

● tinymceのサードパーティプラグイン

https://pluginza.com/

No.1929
12/10 13:12

edit

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

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

command + enter (Mac) キーのショートカットを追加する

		setup: function (editor) {
			editor.addShortcut(
			'Meta+13', 'Submit TinyMce', function () {
				alert('test');
			});
		},

No.1914
12/25 14:37

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

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