Hinzufügen von Attributen zum Dialog Bild einfügen von Umbraco RTE oder Erstellen benutzerdefinierter Daten

Question

Wie kann ich Attribute zum aktuellen Dialogfeld Bild einfügen im Umbraco Richtext Editor hinzufügen?

Was ich wirklich will, ist Content-Editor wählen Sie Bilder und legen Sie ihre Klasse, und vielleicht wählen, ob dies Leuchtkasten Bild ist oder nicht. Wenn der Benutzer die Option lighbox auswählt, wird ein Hyperlink mit einigen zusätzlichen Attributen hinzugefügt, wie z. B. Datenrel. Ich möchte sogar in der Lage sein, die Bild-URL, die vom Inhaltseditor hinzugefügt wurde, wenn möglich zu modifizieren.

Die Ausgabe wie dies

<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> 

aussehen soll ich diese sehr nützliche Verbindung http://forum.umbraco.org/yaf_postst8163_TinyMCE--insert-image-dialog.aspx gefunden, die Hälfte meines Problems zu lösen, aber ich kann nicht herausfinden, wie

Answer 1

Standard umbraco tinymce fortzusetzen Bild hinzufügen Schnittstelle ist

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

ich konnte es ändern, um zusätzliches Feld in der Bildauswahl Schnittstelle zu zeigen, dann machen Markup ich will.

I edited \ umbraco \ Plugins \ tinymce3 \ insertImage.aspx, hinzugefügt es mein Feld und einige Jquery Logik:

<ui:PropertyPanel id="pp_desc" runat="server" Text="Description"> 
    <input type="text" id="title" style="width: 300px"/> 
</ui:PropertyPanel> 
... 

Dann, wenn Sie benutzerdefinierte Attribute hinzufügen, möchten Sie vielleicht, um sie hinzuzufügen config zu \ \ 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> 

und \ 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> 

Dann modifizierte ich die Js, die von Rendering html verantwortlich ist, die tinymce Editor hinzugefügt werden:

\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;'}); 
... 

Eine wichtige Sache: alles wird zwischengespeichert und gebündelt, so, um sicherzustellen, wurde die Änderungen angewendet Entfernen Sie alle Dateien von \ app_data \ TEMP \ ClientDependency \ und neue Instanz von incognito Browser verwenden. Sie können es wahrscheinlich irgendwo deaktivieren, aber ich habe nur den Cache entfernt.

Es gibt keine Magie in Umbraco TinyMCE. Nur ein paar ASPX- und JS-Code. Ändern Sie es nach Ihren Bedürfnissen.