将属性添加到 Umbraco RTE 的插入图像对话框或创建自定义数据类型

问题描述：

如何在 umbraco Richtext Editor 的当前插入图像对话框中添加属性?

How can I add attributes to the current Insert Image dialogue box on umbraco Richtext Editor?

我真正想要的是让内容编辑器选择图像并设置它们的类，也许可以选择这是否是灯箱图像.如果用户选择 lightbox 选项，则会添加一个带有一些额外属性的超链接，例如 data-rel.如果可能的话，我什至希望能够修改内容编辑器添加的图片网址.

What I really want is to let content editor choose images and set their class, and maybe choose if this is lightbox image or not. If user choose lighbox option, then a hyper link is added with some extra attributes, like data-rel. I even want to be able to modify the image url added by the content editor, if possible.

输出应该是这样的

<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 解决了我一半的问题，但我不知道如何继续

I found this very useful link http://forum.umbraco.org/yaf_postst8163_TinyMCE--insert-image-dialog.aspx which solve half of my issue, but I can't figure out how to continue

答

默认umbraco tinymce添加图片界面是

Default umbraco tinymce add image interface is

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

我能够修改它以在图像选择界面中显示附加字段，然后呈现我想要的标记.

I was able to modify it to show additional field in the image selection interface, then render markup I want.

我编辑了 \umbraco\plugins\tinymce3\insertImage.aspx，在那里添加了我的字段和一些 jquery 逻辑:

I edited \umbraco\plugins\tinymce3\insertImage.aspx, added my field there and some jquery logic:

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

然后，如果您要添加自定义属性，您可能希望将它们添加到 \config\umbracoSettings.config

Then if you are adding custom attributes, you might want to add them to \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

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

然后我修改了负责渲染html的.js，将添加到tinymce编辑器中:

Then I modified the .js that is in charge of rendering html that will be added to tinymce editor:

\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\ 中删除所有文件并使用隐身浏览器的新实例.您可能可以在某处禁用它，但我只是删除了缓存.

One important thing: everything is cached and bundled, so to make sure your changes was applied remove all files from \app_data\TEMP\ClientDependency\ and use new instance of incognito browser. You probably can disable it somewhere, but I just removed the cache.

Umbraco TinyMCE 没有魔法.只是一堆 .aspx 和 .js 代码.根据您的需要修改它.

There is no magic in Umbraco TinyMCE. Just a bunch of .aspx and .js code. Modify it to your needs.

将属性添加到 Umbraco RTE 的插入图像对话框或创建自定义数据类型

相关推荐