Orbeon Forms community mailing list

Tinymce UI visual issue found when using a different skin

Classic

List

Threaded

6 messages Options

bwallis42

Tinymce UI visual issue found when using a different skin

This post was updated on .

We have problems at our customer sites with the built in lightgray skin so we have a replacement, lightgray-no-fonts (https://tinymceplugins.com/plugins/lightgray-no-fonts-skin).

It looks like orbeon has the url for the css file for the tinymce skin hardcoded somewhere rather than using the tinymce setting shown below.

We configure this with

var TINYMCE_CUSTOM_CONFIG = { 
            mode:                                   "exact", 
            language:                               "en", 
            branding:                               false,
//            skin:                                   "lightgray", 
            skin_url:                               "/orbeon/3.1415/forms/global/assets/skins/lightgray-no-fonts-skin-1.0",
            content_style:                          ".mce-content-body {font-size:11pt;font-family:Arial,sans-serif;}",
            menubar:                                false,
            plugins:                                "table,print,preview,fullscreen,paste,lists,textcolor,code", 
            toolbar1:                               "bold italic underline strikethrough | indent outdent bullist numlist | formatselect removeformat fontselect fontsizeselect forecolor backcolor",
            toolbar2:                               "preview fullscreen code | undo redo paste | subscript superscript | alignleft aligncenter alignright",
            fontsize_formats:                       "8pt, 9pt, 11pt 13pt 15pt 18pt 24pt 36pt",
            gecko_spellcheck:                       false, 
            encoding:                               "xml", 
            entity_encoding:                        "raw", 
            forced_root_block:                      'div', 
            remove_trailing_brs:                     true
};

which is loading the skin from our included skin file (skin_url setting).

This was working fine up until a couple of pre-releases of 2018.1 at which point something changed and we started seeing some artifacts in the tinymce editor buttons. It looks like the browser is still loading the css file for the built in lightgray skin. This may have started when we started using 2018.1.201808012219-PE but I'm not sure of that.

The URL it is loading is
/orbeon/ef199348a6474a26e2cee79b6c402cd661476e96/xbl/orbeon/tinymce/js/tinymce/skins/lightgray/skin.min.css

The top of the source loaded for the form-runner (edit mode) is as follows

<!DOCTYPE HTML>
<html lang="en" id="xf-1">
<head>
<link rel="stylesheet" href="/orbeon/ef199348a6474a26e2cee79b6c402cd661476e96/ops/yui/container/assets/skins/sam/container.css" type="text/css" media="all" class="xforms-baseline">
<link rel="stylesheet" href="/orbeon/ef199348a6474a26e2cee79b6c402cd661476e96/ops/yui/progressbar/assets/skins/sam/progressbar.css" type="text/css" media="all" class="xforms-baseline">
<link rel="stylesheet" href="/orbeon/ef199348a6474a26e2cee79b6c402cd661476e96/ops/yui/calendar/assets/skins/sam/calendar.css" type="text/css" media="all" class="xforms-baseline">
<link rel="stylesheet" href="/orbeon/ef199348a6474a26e2cee79b6c402cd661476e96/apps/fr/style/bootstrap/css/bootstrap.css" type="text/css" media="all" class="xforms-baseline">
<link rel="stylesheet" href="/orbeon/ef199348a6474a26e2cee79b6c402cd661476e96/apps/fr/style/form-runner-bootstrap-override.css" type="text/css" media="all" class="xforms-baseline"><link rel="stylesheet" href="/orbeon/ef199348a6474a26e2cee79b6c402cd661476e96/config/theme/xforms.css" type="text/css" media="all" class="xforms-baseline">
<link rel="stylesheet" href="/orbeon/ef199348a6474a26e2cee79b6c402cd661476e96/config/theme/error.css" type="text/css" media="all" class="xforms-baseline">
<link rel="stylesheet" href="/orbeon/ef199348a6474a26e2cee79b6c402cd661476e96/ops/nprogress-0.2.0/nprogress.css" type="text/css" media="all" class="xforms-baseline"><link rel="stylesheet" href="/orbeon/ef199348a6474a26e2cee79b6c402cd661476e96/ops/yui/autocomplete/assets/skins/sam/autocomplete.css" type="text/css" media="all" class="xforms-baseline">
<link rel="stylesheet" href="/orbeon/ef199348a6474a26e2cee79b6c402cd661476e96/xbl/orbeon/autocomplete/autocomplete.css" type="text/css" media="all" class="xforms-baseline">
<link rel="stylesheet" href="/orbeon/ef199348a6474a26e2cee79b6c402cd661476e96/xbl/orbeon/number/number.css" type="text/css" media="all" class="xforms-baseline">
<link rel="stylesheet" href="/orbeon/ef199348a6474a26e2cee79b6c402cd661476e96/xbl/orbeon/alert-dialog/alert-dialog.css" type="text/css" media="all"><link rel="stylesheet" href="/orbeon/ef199348a6474a26e2cee79b6c402cd661476e96/xbl/orbeon/countdown/countdown.css" type="text/css" media="all"><link rel="stylesheet" href="/orbeon/ef199348a6474a26e2cee79b6c402cd661476e96/xbl/orbeon/error-summary/error-summary.css" type="text/css" media="all">
<link rel="stylesheet" href="/orbeon/ef199348a6474a26e2cee79b6c402cd661476e96/xbl/orbeon/grid/grid.css" type="text/css" media="all"><link rel="stylesheet" href="/orbeon/ef199348a6474a26e2cee79b6c402cd661476e96/xbl/orbeon/ladda-button/ladda-1.0.0-orbeon/ladda-themeless.min.css" type="text/css" media="all">
<link rel="stylesheet" href="/orbeon/ef199348a6474a26e2cee79b6c402cd661476e96/xbl/orbeon/ladda-button/ladda-button.css" type="text/css" media="all">
<link rel="stylesheet" href="/orbeon/ef199348a6474a26e2cee79b6c402cd661476e96/xbl/orbeon/section/section.css" type="text/css" media="all">
<link rel="stylesheet" href="/orbeon/ef199348a6474a26e2cee79b6c402cd661476e96/xbl/orbeon/tinymce/tinymce.css" type="text/css" media="all">
<link rel="stylesheet" href="/orbeon/ef199348a6474a26e2cee79b6c402cd661476e96/xbl/orbeon/tinymce/js/tinymce/skins/lightgray/skin.min.css" type="text/css" media="all">

bwallis42

Re: Tinymce UI visual issue found when using a different skin

(I just edited/added the raw text content back into the post)

--
Sent from: http://discuss.orbeon.com/

--
You received this message because you are subscribed to the Google Groups "Orbeon Forms" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
To post to this group, send email to [hidden email].

bwallis42

Re: Tinymce UI visual issue found when using a different skin

This post was updated on .

I just tested this theory by unpacking orbeon-xforms.jar and removing
xbl/orbeon/tinymce/js/tinymce/skins/lightgray. Now I get the normal look of
the buttons as per the new skin I am using.

The correct look is

<http://discuss.orbeon.com/file/t375137/correct.jpg>

and the corrupted one is

<http://discuss.orbeon.com/file/t375137/withartifact.jpg>

Note the additional check box image overlayed on the correct button image.

--
Sent from: http://discuss.orbeon.com/

--
You received this message because you are subscribed to the Google Groups "Orbeon Forms" group.
To unsubscribe from this group and stop receiving emails from it, send an email to orbeon+unsubscribe@googlegroups.com.
To post to this group, send email to orbeon@googlegroups.com.

Alessandro Vernet

Re: Tinymce UI visual issue found when using a different skin

Administrator

Hi Brian,

I can see why this is happening, and created the issue linked below. We'll
shoot to fix this for 2018.1.1, and will follow-up here when done.

https://github.com/orbeon/orbeon-forms/issues/3724

Alex

-----
--
Follow Orbeon on Twitter: @orbeon
Follow me on Twitter: @avernet
--
Sent from: http://discuss.orbeon.com/

--
You received this message because you are subscribed to the Google Groups "Orbeon Forms" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
To post to this group, send email to [hidden email].

--
Follow Orbeon on Twitter: @orbeon
Follow me on Twitter: @avernet

Erik Bruchez

Re: Tinymce UI visual issue found when using a different skin

Administrator

Brian,

> We have problems at our customer sites with the built in lightgray skin so
> we have a replacement

I am curious to know what the original problem is. Shouldn't the built-in
lightgray skin work?

-Erik

--
Sent from: http://discuss.orbeon.com/

--
You received this message because you are subscribed to the Google Groups "Orbeon Forms" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
To post to this group, send email to [hidden email].

bwallis42

Re: Tinymce UI visual issue found when using a different skin

Hi Erik,
The problem is with webfonts in IE not loading under some circumstances.
This is discussed in a few places such as
http://archive.tinymce.com/forum/viewtopic.php?id=30966 and
https://stackoverflow.com/questions/13798667/tinymce-icons-in-internet-explorer

We experienced this in particular in corporate environments and found that
the various suggested workarounds either didn't work or were unreliable.
Switching to a skin that didn't use the webfonts was easier than fighting
with IE in somewhat locked down environments.

thanks,
brian...

--
Sent from: http://discuss.orbeon.com/

--
You received this message because you are subscribed to the Google Groups "Orbeon Forms" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
To post to this group, send email to [hidden email].