TinyMCE 4 and XH 1.7.1

Questions about how to use the online - editors and suggestions how to improve them
Tata
Posts: 3586
Joined: Tue May 20, 2008 5:34 am
Location: Slovakia
Contact:

Re: TinyMCE 4 and XH 1.7.1

Post by Tata » Sat Aug 17, 2019 6:14 am

@aligning images
viewtopic.php?f=16&t=15336#p72523
The principle is:
1. add classes img.left, img.right (or whatever desired for styling images) into your stylesheet
2. add it to desired tinyMCE inits.
CMSimple.sk
It's no shame to ask for an answer if all efforts failed.
But it's awful to ask without any effort to find the answer yourself.

cmb
Posts: 14225
Joined: Tue Jun 21, 2011 11:04 am
Location: Bingen, RLP, DE
Contact:

Re: TinyMCE 4 and XH 1.7.1

Post by cmb » Sun Aug 18, 2019 11:13 am

kurtm wrote:
Wed Aug 14, 2019 6:35 am
I recently tried to add an image with advanced functions for mouse-over/mouse-out with a second image, but TinyMCE4 doesn't support this function. There were other useful functions such as image alignment which also seem to have disappeared. In looking at the TinyMCE plugins, there is no replacement for 'advimage'.
Yep, image configuration is severely restricted in the free versions of TinyMCE 4. You can still add the respective attributes in the source code mode of the editor. Firstly, you have to prepare the init_*.js that is used; search for extended_valid_elements, and add ,img[*] to its value, e.g.

Code: Select all

  extended_valid_elements: 'span[*],img[*]'
Without this change, the manually added attributes would be removed by TinyMCE.

Then you can edit the HTML manually, like so:

Code: Select all

<img src="./userfiles/images/image.jpg" onmouseover="this.src='./userfiles/images/mouseover.jpg'" onmouseout="this.src='./userfiles/images/image.jpg'" alt="" width="640" height="480">
Christoph M. Becker – Plugins for CMSimple_XH

kurtm
Posts: 50
Joined: Tue Sep 03, 2013 12:29 am
Location: New Zealand

Re: TinyMCE 4 and XH 1.7.1

Post by kurtm » Mon Aug 19, 2019 10:53 pm

Many thanks for the feedback.

Yes, using HTML with CSS is obviously simple, but for my users, who aren't HTML/CSS capable and who I get to maintain their own content, this is not an option. I use CMSimple because after I set up their initial site, they do their own maintenance which with WYSIWYG is easy, especially if they know MS Word. I have tried to stay away from WP as it's more that my users need.

I will look into adding the init_.js script change that you recommend when I have a little more time. For the moment I'm trying to move to better, more responsive templates and later releases of CMS.

Have fun!
Kurt

kurtm
Posts: 50
Joined: Tue Sep 03, 2013 12:29 am
Location: New Zealand

Re: TinyMCE 4 and XH 1.7.1

Post by kurtm » Mon Aug 19, 2019 11:17 pm

Okay -

I just searched tinymce4/inits for init_*.js files (full, menu, imagetools,minimal, etc...) but couldn't find the code for extended_valid_elements in any of them. Maybe I'm looking in the wrong place.

Cheers.

lck
Posts: 2963
Joined: Wed Mar 23, 2011 11:43 am
Contact:

Re: TinyMCE 4 and XH 1.7.1

Post by lck » Tue Aug 20, 2019 3:51 pm

So, possibly a way to continue using advimage of TinyMCE would be the following combination (in TinyMCE 4 the advimage plugin is no longer included):
TinyMCE 3 (included in CMSimple_XH 1.6.10) and hi_kcfinder 3.0.0beta1 as XH Filemanger replacement (to be activated under Settings > Configuration > FILEBROWSER insert: hi_kcfinder).

The administration menu of TinYMCE 3 works under XH 1.7.2 only with the custom admin.php i already sent you. Also hi_kcfinder needs a change in autoload.php to work with PHP 7.2.0, see here.

Disadvantage: Fontawesome cannot be used with TinyMCE 3 (so far, maybe somebody knows a solution)
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“   👉 Ludwig's XH-Templates for MultiPage & OnePage

kurtm
Posts: 50
Joined: Tue Sep 03, 2013 12:29 am
Location: New Zealand

Re: TinyMCE 4 and XH 1.7.1

Post by kurtm » Wed Aug 21, 2019 2:25 am

Many thanks, I'll give it a shot.

kurtm
Posts: 50
Joined: Tue Sep 03, 2013 12:29 am
Location: New Zealand

Re: TinyMCE 4 and XH 1.7.1

Post by kurtm » Fri Aug 23, 2019 5:31 am

I looked for a download site for hi_kcfinder but found the site was in "maintenance mode". So I'll look again later.

Holger
Site Admin
Posts: 3470
Joined: Mon May 19, 2008 7:10 pm
Location: Hessen, Germany

Re: TinyMCE 4 and XH 1.7.1

Post by Holger » Fri Aug 23, 2019 2:17 pm

kurtm wrote:
Fri Aug 23, 2019 5:31 am
I looked for a download site for hi_kcfinder
See here: http://cmsimple.holgerirmler.de/downloa ... 0beta1.zip

kurtm
Posts: 50
Joined: Tue Sep 03, 2013 12:29 am
Location: New Zealand

Re: TinyMCE 4 and XH 1.7.1

Post by kurtm » Mon Aug 26, 2019 12:05 am

Thanks Holger, much appreciated.

cmb
Posts: 14225
Joined: Tue Jun 21, 2011 11:04 am
Location: Bingen, RLP, DE
Contact:

Re: TinyMCE 4 and XH 1.7.1

Post by cmb » Sat Aug 31, 2019 8:10 am

lck wrote:
Tue Aug 20, 2019 3:51 pm
So, possibly a way to continue using advimage of TinyMCE would be the following combination (in TinyMCE 4 the advimage plugin is no longer included):
TinyMCE 3 (included in CMSimple_XH 1.6.10) and hi_kcfinder 3.0.0beta1 as XH Filemanger replacement (to be activated under Settings > Configuration > FILEBROWSER insert: hi_kcfinder).
Hmm, even TinyMCE 4 is unsupported for quite a while now, so I wouldn't go back to TinyMCE 3.
kurtm wrote:
Mon Aug 19, 2019 10:53 pm
Many thanks for the feedback.

Yes, using HTML with CSS is obviously simple, but for my users, who aren't HTML/CSS capable and who I get to maintain their own content, this is not an option.
I see. An option could be to insert the following script at the end of your template.htm (immediately before the closing </body>):

Code: Select all

<script>
(function () {
    var hoverimages = document.getElementsByClassName("hoverimage");
    var i;

    for (i = 0; i < hoverimages.length; ++i) {
        hoverimages[i].onmouseover = function () {
            this.setAttribute("data-orig-src", this.src);
            this.src = this.src.replace(/\.[^.]+/, "-hover$&");
        };
        hoverimages[i].onmouseout = function () {
            this.src = this.getAttribute("data-orig-src");
        }
    }
}());
</script>
This looks for all images with the class "hoverimage", and inserts mouseover and mouseout listeners which swap the image with a hover image (for instance, image.jpg will be swapped with image-hover.jpg). That requires, of course, that the images need suitable filenames, and that a CSS class is defined for these images. The latter isn't as simple and flexible with TinyMCE 4 as one would like, though.
Christoph M. Becker – Plugins for CMSimple_XH

Post Reply