將屬性添加到Umbraco RTE的插入圖像對話框中或創建自定義數據類型

Question

如何將屬性添加到umbraco Richtext Editor上的當前插入圖像對話框中？

我真正想要的是讓內容編輯器選擇圖像並設置他們的類，也許可以選擇是否這是lightbox圖像。如果用戶選擇lighbox選項，則超鏈接會添加一些額外的屬性，如data-rel。如果可能的話，我甚至希望能夠修改由內容編輯器添加的圖像URL。

輸出應該是這樣的

<a href="/media/2813/DSC_2615.JPG" data-rel="prettyPhoto[gal-3-col]" >  
    <img src="http://domain.com/imageGen.ashx? 
    image=%2fmedia%2f2813%2fDSC_2615.JPG&amp;width=420" alt="DSC_2615" title="DSC_2615" 
    class="alignright"> 
</a> 

我發現這是非常有用的鏈接http://forum.umbraco.org/yaf_postst8163_TinyMCE--insert-image-dialog.aspx這解決了我的問題的一半，但我無法弄清楚如何繼續

Answer 1

默認一把umbraco TinyMCE的添加圖片接口

<plugin loadOnFrontend="false">umbracoimg</plugin> 

我可以修改它以顯示其他字段中的圖像選擇界面，然後渲染標記我想要的。

我編輯\一把umbraco \插件\ 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> 

和\設置\ 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> 

我修改了負責渲染HTML的將被添加到TinyMCE的編輯器中的.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;'}); 
... 

一件重要的事情：一切都被緩存和捆綁的，所以要確保您的更改應用於刪除所有文件從\ app_data \ TEMP \ ClientDependency \並使用隱身瀏覽器的新實例。您可能可以在某處停用它，但我只是刪除了緩存。

Umbraco TinyMCE沒有魔法。只是一堆.aspx和.js代碼。修改它以滿足您的需求。