1

Topic: TinyMCE 4.0.8 Released

This release adds RTL support for the whole UI. This means that all toolbars, dialogs etc will be rendered properly when using language packs marked with "_rtl". The language download page automatically adds this property to known RTL languages.

Fixed various IE 7 and IE 8 rendering bugs in the default skin. IE 7 had missing icons in menus and IE 8 didn't render panel buttons correctly.

We also fixed some sub pixel UI rendering issues when a browser was zoomed or the OS was configured to render things at sub pixels.

The readonly option is also re-introduced in this version. This lets you render the editor in a readonly state.

Check the changelog for details.

Best regards,
Spocke - Main developer of TinyMCE

2

Re: TinyMCE 4.0.8 Released

Friend ... I installed version 4.08, but in Internet Explorer 10 does not appear the images ... it does not catch content: / xxx
..
ATT MT

3

Re: TinyMCE 4.0.8 Released

Not sure what you mean. File a bug report if something is broken in the release. Thanks

Best regards,
Spocke - Main developer of TinyMCE

4

Re: TinyMCE 4.0.8 Released

spocke wrote:

The readonly option is also re-introduced in this version. This lets you render the editor in a readonly state.

I was already using this in 4.07 ... and it worked.  Am I misunderstanding something here?  I mean, you are referring to the readonly configuration option, correct?  I cannot find the wiki page in the documentation for the 4.x API but here it is in the 3.x:
http://www.tinymce.com/wiki.php/Configu … x:readonly

Last edited by coopster (2013-10-15 22:40:18)

5

Re: TinyMCE 4.0.8 Released

Could I request that in a future update support be added for custom data attributes on the image plugin?

I would like to add captions to my images, and I would like that information to be place in the data-caption attribute.  I altered the plugin to contain an input field for it, but the data-caption attribute never makes it to the resulting img tag.

6

Re: TinyMCE 4.0.8 Released

vecima wrote:

Could I request that in a future update support be added for custom data attributes on the image plugin?

I would like to add captions to my images, and I would like that information to be place in the data-caption attribute.  I altered the plugin to contain an input field for it, but the data-caption attribute never makes it to the resulting img tag.

Try extended_valid_elements init parameter, in your case it would be something like:

tinymce.init({
        ...
        extended_valid_elements : "img[data-caption|class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name]"
});

7

Re: TinyMCE 4.0.8 Released

mmm wrote:
vecima wrote:

Could I request that in a future update support be added for custom data attributes on the image plugin?

I would like to add captions to my images, and I would like that information to be place in the data-caption attribute.  I altered the plugin to contain an input field for it, but the data-caption attribute never makes it to the resulting img tag.

Try extended_valid_elements init parameter, in your case it would be something like:

tinymce.init({
        ...
        extended_valid_elements : "img[data-caption|class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name]"
});

Thanks for the response, but I'm already using it.

my current init contains this:

    extended_valid_elements : "img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name|data-caption]"

The problem is in my version of the image plugin, I'm not sure how to pass around the data-caption attribute.  I tried to implement this by finding everywhere the "alt" attribute was handled, and adding handling for my own attribute (data-caption) but at some points "alt" is used as a variable name, and I don't believe '-' (dash) is valid in javascript variable names.  In those places I tried to use just "caption" but I've yet to have any success.  I also used the same method to support the "Title" attribute, and that works fine.  Only data-caption isn't working for me.

From my plugin.min.js:
(column 1260)

n={src:n.src,alt:n.alt,caption:n.caption,title:n.title,width:n.width,height:n.height,style:n.style}

(column 2299)

d={src:m.getAttrib(p,"src"),alt:m.getAttrib(p,"alt"),caption:m.getAttrib(p,"data-caption"),title:m.getAttrib(p,"title"),width:h,height:u}

(column 2772)

{name:"alt",type:"textbox",label:"Image description"},{name:"data-caption",type:"textbox",label:"Caption"},{name:"title",type:"textbox",label:"Title"}

and in case you want to try the whole plugin, here it is:

tinymce.PluginManager.add("image",function(t){function e(t,e){function n(t,n){i.parentNode.removeChild(i),e({width:t,height:n})}var i=document.createElement("img");i.onload=function(){n(i.clientWidth,i.clientHeight)},i.onerror=function(){n()},i.src=t;var a=i.style;a.visibility="hidden",a.position="fixed",a.bottom=a.left=0,a.width=a.height="auto",document.body.appendChild(i)}function n(e){return function(){var n=t.settings.image_list;"string"==typeof n?tinymce.util.XHR.send({url:n,success:function(t){e(tinymce.util.JSON.parse(t))}}):e(n)}}function i(n){function i(){var t=[{text:"None",value:""}];return tinymce.each(n,function(e){t.push({text:e.text||e.title,value:e.value||e.url,menu:e.menu})}),t}function a(t){var e,n,i,a;e=s.find("#width")[0],n=s.find("#height")[0],i=e.value(),a=n.value(),s.find("#constrain")[0].checked()&&h&&u&&i&&a&&(t.control==e?(a=Math.round(i/h*a),n.value(a)):(i=Math.round(a/u*i),e.value(i))),h=i,u=a}function o(){function e(e){function i(){e.onload=e.onerror=null,t.selection.select(e),t.nodeChanged()}e.onload=function(){n.width||n.height||m.setAttribs(e,{width:e.clientWidth,height:e.clientHeight}),i()},e.onerror=i}var n=s.toJSON();""===n.width&&(n.width=null),""===n.height&&(n.height=null),""===n.style&&(n.style=null),n={src:n.src,alt:n.alt,caption:n.caption,title:n.title,width:n.width,height:n.height,style:n.style},t.undoManager.transact(function(){return n.src?(p?m.setAttribs(p,n):(n.id="__mcenew",t.selection.setContent(m.createHTML("img",n)),p=m.get("__mcenew"),m.setAttrib(p,"id",null)),e(p),void 0):(p&&(m.remove(p),t.nodeChanged()),void 0)})}function l(t){return t&&(t=t.replace(/px$/,"")),t}function r(){e(this.value(),function(t){t.width&&t.height&&(h=t.width,u=t.height,s.find("#width").value(h),s.find("#height").value(u))})}function c(){function t(t){return t.length>0&&/^[0-9]+$/.test(t)&&(t+="px"),t}var e=s.toJSON(),n=m.parseStyle(e.style);m.setAttrib(p,"style",""),delete n.margin,n["margin-top"]=n["margin-bottom"]=t(e.vspace),n["margin-left"]=n["margin-right"]=t(e.hspace),n["border-width"]=t(e.border),s.find("#style").value(m.serializeStyle(m.parseStyle(m.serializeStyle(n))))}var s,d,h,u,g,m=t.dom,p=t.selection.getNode();h=m.getAttrib(p,"width"),u=m.getAttrib(p,"height"),"IMG"!=p.nodeName||p.getAttribute("data-mce-object")?p=null:d={src:m.getAttrib(p,"src"),alt:m.getAttrib(p,"alt"),caption:m.getAttrib(p,"data-caption"),title:m.getAttrib(p,"title"),width:h,height:u},n&&(g={name:"target",type:"listbox",label:"Image list",values:i(),onselect:function(t){var e=s.find("#alt");(!e.value()||t.lastControl&&e.value()==t.lastControl.text())&&e.value(t.control.text()),s.find("#src").value(t.control.value())}});var y=[{name:"src",type:"filepicker",filetype:"image",label:"Source",autofocus:!0,onchange:r},g,{name:"alt",type:"textbox",label:"Image description"},{name:"data-caption",type:"textbox",label:"Caption"},{name:"title",type:"textbox",label:"Title"},{type:"container",label:"Dimensions",layout:"flex",direction:"row",align:"center",spacing:5,items:[{name:"width",type:"textbox",maxLength:3,size:3,onchange:a},{type:"label",text:"x"},{name:"height",type:"textbox",maxLength:3,size:3,onchange:a},{name:"constrain",type:"checkbox",checked:!0,text:"Constrain proportions"}]}];t.settings.image_advtab?(p&&(d.hspace=l(p.style.marginLeft||p.style.marginRight),d.vspace=l(p.style.marginTop||p.style.marginBottom),d.border=l(p.style.borderWidth),d.style=t.dom.serializeStyle(t.dom.parseStyle(t.dom.getAttrib(p,"style")))),s=t.windowManager.open({title:"Insert/edit image",data:d,bodyType:"tabpanel",body:[{title:"General",type:"form",items:y},{title:"Advanced",type:"form",pack:"start",items:[{label:"Style",name:"style",type:"textbox"},{type:"form",layout:"grid",packV:"start",columns:2,padding:0,alignH:["left","right"],defaults:{type:"textbox",maxWidth:50,onchange:c},items:[{label:"Vertical space",name:"vspace"},{label:"Horizontal space",name:"hspace"},{label:"Border",name:"border"}]}]}],onSubmit:o})):s=t.windowManager.open({title:"Insert/edit image",data:d,body:y,onSubmit:o})}t.addButton("image",{icon:"image",tooltip:"Insert/edit image",onclick:n(i),stateSelector:"img:not([data-mce-object])"}),t.addMenuItem("image",{icon:"image",text:"Insert image",onclick:n(i),context:"insert",prependToContext:!0})});

8

Re: TinyMCE 4.0.8 Released

Don't try to alter the min js versions. Instead download the developer version and open the plugin.js. If you want you can rename it to plugin.min.js and from there add custom code

9

Re: TinyMCE 4.0.8 Released

also, when manipulating attributes with a dash, put quotes around it, like:

data = {
    ....
    width: data.width,
    src: data.src,
    "data-address": data.address
}

10

Re: TinyMCE 4.0.8 Released

Thanks for the help guys... I've gotten closer, but I'm not quite there. I can get the 'data-caption' attribute to show up on the image after i submit the form, but the value of the attribute is always "undefined".  Also, I can't "edit" an image - the form won't open on existing images. I'm sure I'm making some silly mistake, but I've been at it a while, and can't see anything. I downloaded development version and made the following edits:

line 135:

    data = {
        src: data.src,
        alt: data.alt,
        width: data.width,
        height: data.height,
        style: data.style,
        "data-caption": data.caption
    };

line 191:

    data = {
        src: dom.getAttrib(imgElm, 'src'),
        alt: dom.getAttrib(imgElm, 'alt'),
        caption: dom.getAttrib(imgElem, 'data-caption'),
        width: width,
        height: height
    };

line 225: (after the "alt" form item)

    {name: 'caption', type: 'textbox', label: 'Caption'},

11

Re: TinyMCE 4.0.8 Released

ahh... i got it working.... i was using imgElem (which didn't exist) instead of imgElm in the second part.  Thanks for the help everyone!

12

Re: TinyMCE 4.0.8 Released

Friend ... I installed version 4.08, but in Internet Explorer 10 does not appear the images ... it does not catch content: