デフォルトの umbraco tinymce add image インターフェイスは
<plugin loadOnFrontend="false">umbracoimg</plugin>
画像選択インターフェイスに追加のフィールドを表示するように変更してから、必要なマークアップをレンダリングすることができました。
\umbraco\plugins\tinymce3\insertImage.aspx を編集し、そこにフィールドといくつかの jquery ロジックを追加しました。
<ui:PropertyPanel id="pp_desc" runat="server" Text="Description">
<input type="text" id="title" style="width: 300px"/>
</ui:PropertyPanel>
...
次に、カスタム属性を追加する場合は、それらを \config\umbracoSettings.config に追加することをお勧めします
<!-- what attributes that are allowed in the editor on an img tag -->
<allowedAttributes>src,alt,title,border,class,style,align,id,name,onclick,usemap</allowedAttributes>
および \config\tinyMceConfig.config
<validElements>
<![CDATA[+a[id|style|rel|rev|charset|hreflang|dir|lang|tabindex|accesskey|type|name|href|target|title|class|onfocus|onblur|onclick|
ondblclick|onmousedown|onmouseup|onmouseover|onmousemove|onmouseout|onkeypress|onkeydown|onkeyup],-strong/-b[class|style],-em/-i[class|style],
-strike[class|style],-u[class|style],#p[id|style|dir|class|align],-ol[class|reversed|start|style|type],-ul[class|style],-li[class|style],br[class],
img[id|dir|lang|longdesc|usemap|style|class|src|onmouseover|onmouseout|border|alt=|title|hspace|vspace|width|height|align|umbracoorgwidth|umbracoorgheight|onresize|onresizestart|onresizeend|rel],
-sub[style|class],-sup[style|class],-blockquote[dir|style|class],-table[border=0|cellspacing|cellpadding|width|height|class|align|summary|style|dir|id|lang|bgcolor|background|bordercolor],
-tr[id|lang|dir|class|rowspan|width|height|align|valign|style|bgcolor|background|bordercolor],tbody[id|class],
thead[id|class],tfoot[id|class],#td[id|lang|dir|class|colspan|rowspan|width|height|align|valign|style|bgcolor|background|bordercolor|scope],
-th[id|lang|dir|class|colspan|rowspan|width|height|align|valign|style|scope],caption[id|lang|dir|class|style],-div[id|dir|class|align|style],
-span[class|align|style],-pre[class|align|style],address[class|align|style],-h1[id|dir|class|align],-h2[id|dir|class|align],
-h3[id|dir|class|align],-h4[id|dir|class|align],-h5[id|dir|class|align],-h6[id|style|dir|class|align],hr[class|style],
dd[id|class|title|style|dir|lang],dl[id|class|title|style|dir|lang],dt[id|class|title|style|dir|lang],object[class|id|width|height|codebase|*],
param[name|value|_value|class],embed[type|width|height|src|class|*],map[name|class],area[shape|coords|href|alt|target|class],bdo[class],button[class],iframe[*],code[*]]]>
</validElements>
次に、tinymce エディターに追加される html のレンダリングを担当する .js を変更しました。
\umbraco_client\tinymce3\plugins\umbracoimg\js\image.js
ed.execCommand('mceInsertContent', false, '<div id="__dimps_width" class="img-with-text"><img id="__mce_tmp" /><p id="__dimps_desc">description</p></div>', { skip_undo: 1 });
ed.dom.setAttribs('__mce_tmp', args);
ed.dom.setAttrib('__mce_tmp', 'id', '');
ed.dom.setAttribs('__dimps_width', {style: 'width: ' + nl.width.value + 'px;'});
...
1 つの重要なこと: すべてがキャッシュされ、バンドルされているため、変更が適用されたことを確認するには、\app_data\TEMP\ClientDependency\ からすべてのファイルを削除し、シークレット ブラウザーの新しいインスタンスを使用します。おそらくどこかで無効にできますが、キャッシュを削除しました。
Umbraco TinyMCE には魔法はありません。.aspx および .js コードの集まりです。必要に応じて変更してください。