Page 2 of 2
Re: TinyMCE 4 and XH 1.7.1
Posted: Sat Aug 17, 2019 6:14 am
by Tata
@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.
Re: TinyMCE 4 and XH 1.7.1
Posted: Sun Aug 18, 2019 11:13 am
by cmb
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">
Re: TinyMCE 4 and XH 1.7.1
Posted: Mon Aug 19, 2019 10:53 pm
by kurtm
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
Re: TinyMCE 4 and XH 1.7.1
Posted: Mon Aug 19, 2019 11:17 pm
by kurtm
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.
Re: TinyMCE 4 and XH 1.7.1
Posted: Tue Aug 20, 2019 3:51 pm
by lck
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)
Re: TinyMCE 4 and XH 1.7.1
Posted: Wed Aug 21, 2019 2:25 am
by kurtm
Many thanks, I'll give it a shot.
Re: TinyMCE 4 and XH 1.7.1
Posted: Fri Aug 23, 2019 5:31 am
by kurtm
I looked for a download site for hi_kcfinder but found the site was in "maintenance mode". So I'll look again later.
Re: TinyMCE 4 and XH 1.7.1
Posted: Fri Aug 23, 2019 2:17 pm
by Holger
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
Re: TinyMCE 4 and XH 1.7.1
Posted: Mon Aug 26, 2019 12:05 am
by kurtm
Thanks Holger, much appreciated.
Re: TinyMCE 4 and XH 1.7.1
Posted: Sat Aug 31, 2019 8:10 am
by cmb
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.