1

Topic: TinyMCE 4.2 Released

We’ve been working hard on the TinyMCE 4.2 release together with our new colleagues at Ephox and are proud to present a brand new feature yet to be seen in open source WYSIWYG editors: built in image editing tools!

The Image Tools plugin will allow you to resize, crop and apply filters to images in your content, all within TinyMCE.

Please note that some integration is required to fully take advantage of this feature. As part of the Image Tools plugin, we added an Upload API to handle uploading of the changed files.

If you wish to know more about the TinyMCE Image Tools, visit our blog post that describes these new features in more depth.

We’ve also created a new default skin that provides TinyMCE with a more modern look and feel. With the skin and updates to the UI that allows for inline toolbars, we have also made incremental improvements to our touch support, although more work to better support mobile devices is still to come.

While not specific to the 4.2 release, you will begin to see a series of improvements to our product documentation. We have received numerous suggestions on how our documentation could be improved, and we are working to make that happen. 

And as usual, there are minor bugfixes and code updates, for details, check the changelog.

Best regards,
Spocke - Main developer of TinyMCE

2

Re: TinyMCE 4.2 Released

I am trying demo on home page - http://www.tinymce.com/index.php

But I can't resize image with custom height and width.

Let me share a snap and flow

- http://prntscr.com/7lk2jq and I am closing edit image popup and checking image with tinymce editor.. But there is no change with image resize.

Let me know, am I missing something with image resize

3

Re: TinyMCE 4.2 Released

Could you post a bug report here please:
http://www.tinymce.com/develop/bugtracker.php

So we can discuss that issue there. Provide browser and platform details.

Thanks.

Best regards,
Spocke - Main developer of TinyMCE

4

Re: TinyMCE 4.2 Released

Hi spocke,
the image tools are amazing.

I use the MoxieManager + TinyMCE4.2 as of now. But I have a major issue with the inline image tools, and I think the only reason is my lack of understanding of the configuration.

I've been looking at the configuration, but don't understand it I think.

When I use the inline image tools (not the MoxieManager) to resize and crop an image, the image is saved inside the HTML content as a src="data:image/png;base64 , in stead as a .png file in my files archive.

How do I tell TinyMCE / Image tools to add a new image to my image files archive and then add a regular < img src="correct/path/file.png" / > ?

5

Re: TinyMCE 4.2 Released

Netthandel, it is not directly integrated into MoxieManager in any way.

Check out this on how to implement the uploading.
http://www.tinymce.com/wiki.php/Handlin … ge_Uploads

Afraithe
TinyMCE Developer

6

Re: TinyMCE 4.2 Released

Hi Afraithe,
thank you for the prompt response. No, I was not assuming that they were integrated. But would be awesome if I can set the TinyMCE to upload the images to a folder inside the MoxieManager images folder.

Looking at the docs you linked to that seams to be possible. :-) How do I contact you for paid support? (I don't need a demo for Enterprise, but would like to get help to implement this feature on a page where I load many active TinyMCE instances at once. )

7

Re: TinyMCE 4.2 Released

Hello,

Sorry but i have a problem with imagetools.

I have the plugin in my plugin directory and my JS code is the following:
tinymce.init({
    selector: "textarea",
    theme: "modern",
    plugins: [
        "advlist autolink lists link image charmap print preview hr anchor pagebreak",
        "searchreplace wordcount visualblocks visualchars code fullscreen",
        "insertdatetime media nonbreaking save table contextmenu directionality",
        "emoticons template paste textcolor colorpicker textpattern imagetools"
    ],
    toolbar1: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
    toolbar2: "print preview media | forecolor backcolor emoticons",
    image_advtab: true,
    templates: [
        {title: 'Test template 1', content: 'Test 1'},
        {title: 'Test template 2', content: 'Test 2'}
    ]
});

I don't have any error in console. But i don't have imagetools..

Please, help me. Thanks a lot.

8

Re: TinyMCE 4.2 Released

Thanks for the update. It would be nice to have a real example of the new upload api. The imagetools help in the developer archive doesn't really help.

9

Re: TinyMCE 4.2 Released

Hi folks, is there a step by step guide for how to call the uploadImages function of the editor instance before extracting the editor contents?

Ref: http://www.tinymce.com/wiki.php/Handlin … ge_Uploads

Is this something we do inside the init, or this something we do outside? And if outside, what is the preferred way to do so? Adding a button to run the function before submitting the TinyMCE content?

10

Re: TinyMCE 4.2 Released

If you don't want base64 encoded images you have to first upload the images then post or the editor contents. I've updated the examples on how to do that with jQuery or stand alone in a form.

Best regards,
Spocke - Main developer of TinyMCE

11

Re: TinyMCE 4.2 Released

Trying to integrate TinyMCE with GWT and I am not sure why mce editor won't set content right after adding it to the editor. If you check at fiddle at http://fiddle.tinymce.com/EReaab
Example fails to mcesetcontent "Initial text". Text is only added after user clicks on "Add Text". Not sure what I am doing wrong.

12

Re: TinyMCE 4.2 Released

Great work, but here is somthing broken.

"source" input have now a input bug
http://www.tinymce.com/develop/bugtrack … hp?id=7608

insert image is not workable with firefox
http://www.tinymce.com/develop/bugtrack … hp?id=7610

13

Re: TinyMCE 4.2 Released

hello
same problem as natan here: have uploaded the imagetools folder and add it to the init, and no toolbar on images...
asked differently: what are the dependencies of the imagetools plugin ? as i've customized some functions and css, i'd like to update only necessary files without breaking my settings...thx for your help

Last edited by gabole (2015-07-21 09:05:39)

14

Re: TinyMCE 4.2 Released

The imagetools inline toolbar will only show for IE 10+ and local server images unless CORS or proxy is configured.

Best regards,
Spocke - Main developer of TinyMCE

15

Re: TinyMCE 4.2 Released

Same as a few others on imagetools. Nothing is showing. On both regular textarea editor and inline. For some reason (removed now) 4.2.1 broke adding images. 4.2.2 is working again.

UPDATE:
Managed to get it to show adding it to the end of the plugin list. Odd? Any ways.. it shows, but no icons now.

UPDATE:
Most likely due to custom skin. Using that skin generator, I noticed some missing styles.

Ya, it is from the custom skin builder. It is missing all those icons. Also messes up other aspects like cropping with missing styles.

Last edited by neotropic2023 (2015-07-27 22:10:43)

16

Re: TinyMCE 4.2 Released

No idea if it is even a bug or what since the lack if info on the whole imagetools.


n is undefined.

function d(e) {
    return e.replace(/src="(blob:[^"]+)"/g, function(e, t) {
        var n = f.getByUri(t);
        return 'src="data:' + n.blob().type + ";base64," + n.base64() + '"'
    })
}

So when I try and edit, my image url is turned into:
blob:https://www.pets4you.com/f8f3fbf7-6ae1-4adc-80d1-074ef655a244

17

Re: TinyMCE 4.2 Released

File a bug report with steps to reproduce and we will look at it. Thanks.

Best regards,
Spocke - Main developer of TinyMCE

18

Re: TinyMCE 4.2 Released

But what if I'd like to keep data URIs as is in my content? Is there a way to turn off the converting them into blobs?

19

Re: TinyMCE 4.2 Released

Data uris really slow down the editor it even lags when you type. So that's why we convert everything to blobs internally. You can however simple not use the uploadImages call before extracting the content and the blobs will be converted to data uris.

Why do you need to embed data uris, might be a use case we missed?

Best regards,
Spocke - Main developer of TinyMCE

20

Re: TinyMCE 4.2 Released

For me it seems much simpler and more robust to extract the images from the content and to replace their URIs on the server than to deal with the uploads. The uploading stage complicates the saving, especially in situations like where TinyMCE is just one of many controls on an Angular form. With the uploading stage, it's not a normal control anymore, it requires a special treatment.

21

Re: TinyMCE 4.2 Released

Yes, it becomes async. But it should always returns base64 when getContent is called on the editor. Unless the uploadImages where invoked since it replaces blobs/base64 with the uploaded images.

Best regards,
Spocke - Main developer of TinyMCE

22

Re: TinyMCE 4.2 Released

I can't use getContent because of this bug
http://www.tinymce.com/develop/bugtrack … hp?id=7469
so I have to use workarounds. I call the DOM serializer and (since now) replaceBlobWithBase64 directly.

Last edited by thorn (2015-08-06 15:00:31)