役割:
文章の構造やコンテンツそのものを表す要素。
見出し、段落、画像、リスト、表などは全部 Node です。
種類:
ブロック要素（block node）
段落 <p>
見出し <h1>〜<h6>
リスト <ul> / <ol>
テーブル <table>
水平線 <hr>
インライン要素（inline node）
リンク（hrefを持つ場合は Node にもなれる）
画像 <img>
特殊アイコンや埋め込みウィジェット
特徴:
ドキュメントの「構造そのもの」を変える
ノードはネストできる（例：<ul> の中に <li>）
属性を持てる（例：画像の src, alt）
役割:
テキストに「装飾」や「意味づけ」を与える軽量なメタ情報。
太字、斜体、リンクなど。
例:
太字 <strong>
斜体 <em>
下線 <u>
打ち消し <s>
コード <code>
リンク <a href="">（Node ではなく Mark として実装する場合もある）
特徴:
テキストの内容を変えずに見た目や意味を追加
複数重ねがけ可能（太字＋斜体など）
属性を持てる（例：リンクの href）
マークはノードに直接つくのではなく、テキスト単位で適用される
<p>
これは <strong>太字</strong> と
<em>斜体</em> のテキストです。
</p>
<p> → Node（段落）
<strong> → Mark（太字）
<em> → Mark（斜体）
Node → Node.create({ name, group, content, parseHTML, renderHTML, ... })
Mark → Mark.create({ name, parseHTML, renderHTML, ... })
この違いのおかげで、
「構造を変える拡張」は Node
「見た目や意味を追加する拡張」は Mark
と明確に分けられます。
invalid_styles: {
'table': 'width' ,
'th': 'width' ,
'td': 'width' ,
} ,
このようにすると上記の3つのテーブルの widthプロパティ が設定されなくなります。
tinymce.init({
selector: '#body',
.........
↓ 以下のオプションを追加します
tinymce.init({
selector: '#body',
valid_elements: "*[*]" ,
.........
command + enter (Mac) キーのショートカットを追加する
setup: function (editor) {
editor.addShortcut(
'Meta+13', 'Submit TinyMce', function () {
alert('test');
});
},
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/
end_container_on_empty_block: true
（「Return」キーを改行などに書き換えている場合は ＜p＞タグを2連続で抜けることができます。）
https://www.tiny.cloud/docs/configure/advanced-editing-behavior/#end_container_on_empty_block
https://www.tiny.cloud/get-tiny/language-packages/
ここから japanese をダウンロードします。
ダウンロードした ja.js をサーバにアップロードします。
language を ja にします。
language_url に 言語の .js ファイルを指定します。
tinymce.init({
selector: 'textarea',
language: 'ja' ,
language_url: 'https://mysite.com/tinymcd/langs/ja.js'
});
relative_urls: false ,
remove_script_host : false,
https://takahashi-it.com/javascript/summernote-enter-br-insted-of-p/
↑ こちらの方法が簡単に実装できてとても良いです。
Summernoteの insertParagraph() メソッドは現在のカーソル位置に＜p＞タグを追加します。
カーソルがすでにある＜p＞タグの中に存在すると、段落が分断されます。
そこで、Summernoteのエディタの先頭に段落を追加するようにします。
var v = $( ".my_note" ).val();
$( ".my_note" ).summernote('code', '<p>段落テスト</p>' + v );