Am I able to change skin?
I'm creating angular app, that has light and dark theme.
I have prepared two ckeditor skins. But even if I destroy ck instance, next instance has previuos skin - not current.
CKEditor4 skins are applied to instance creation, so recreating instance is a good way to dynamically update editor skin. You should be able to pass configuration option config.skin when replacing DOM element with an editor to indicate its skin e.g:
CKEDITOR.replace( 'editor', {
skin: 'moono'
} );
Note that custom skin should be placed in skins folder or you should pass additional information about location, e.g.
config.skin = 'myskin,/customstuff/myskin/';
If you still struggle with setting custom skin, please share your current implementation.
Related
Using ckeditor in Drupal 8. The dropdown menu itself is too small and short and the type inside is too large. How can I actually change the formatting of the Styles dropdown menu itself?
I'm not sure if you need to do anything special inside Drupal 8 however from CKEditor point of view you need to change CSS classes responsible for dropdowns.
Below are classess used by dropdowns in CKEditor 4.x for default skin.
Dropdown buttons on toolbar:
.cke_combo__font .cke_combo_text
.cke_combo__fontsize .cke_combo_text
.cke_combo__format .cke_combo_text
.cke_combo__style .cke_combo_text
Dropdown panels:
.cke_combopanel__font
.cke_combopanel__fontsize
.cke_combopanel__format
.cke_combopanel__styles
To resize editor droprown button and panel for e.g. Format, please add the following rules in your page CSS file:
.cke_combo__format .cke_combo_text{
width:150px !important;
}
.cke_combopanel__format {
width:250px !important;
}
Since Toolbar is a part of main page, these rules can be included in head section of your HTML page, can be put in external CSS file which is then imported to your HTML page (with the help of link tag) or can be added in editor CSS skin files directly e.g. in editor.css although that last method will be problematic in case of editor upgrades so I don't recommend it.
Drupal 8 / 9: You can define a stylesheet for CKEditor in your (Admin-)Theme to override the appearance of the editor.
First add a new CSS-file (e.g. css/ckeditor-override.css) to your admin-theme.
Add the following line to your admin-(sub)theme's info-file (e.g. myadmintheme.info.yml):
ckeditor_stylesheets:
- css/ckeditor-override.css
Then you can change the appearance of the editors – see hints of j.swiderski answer – for example:
.cke_combopanel {
width:200px !important;
}
.cke_panel_list .mystyle {
font-size: 1em !important;
}
If your stylings do not work, have a look into your theme: Maybe it styles the editor, too, and overrides your stylings?
Some themes – like "Gin" – make it easy and provide a css-file for custom overrides. Then simply put your style-overrides for the editor there.
If you don't want to create a subtheme you can try Asset Injector-Module.
I create a configurable product, but the dropdwon option is located below the image:
And I want to put it like this one:
How can I achieve this?
You have to edit your css. Inspect that div with firebug or whichever you wish and see the class apply the width you want in your browser first if it works then make changes to your css. If you want to add another class to div, then apply the changes. Then turn on template path hints and see from which template file it is coming and do changes there.
Found a very similar question here: CKEditor classes being stripped
I am using CKEditor 4.2, and I have found it automatically changes content/formats.
For example I have a plugin which automatically creates a new page and a link to it in the text editor, if I create a new page called 'newPage' it creates this code:
<p> </p>
<p><a class="wiki_page_link" href="newpage">newpage</a></p>
This is shown when I click the source button on the CKEditor, now if I click it again, it shows the button again but it's different, AND if I click the source button to view the source code again it displays this code:
<p> </p>
<p>newpage</p>
Now I don't know why CKEditor has automatically changed the link, but now the link won't work. And this is occurring a number of times, for example if I add a new link using the same plugin then the original 'newPage' link is automatically changed. If I have an image of set n x m width and height then load the CKEditor then the width and height are discarded and the image is set to it's default size. If a title is set to be in the center and the CKEditor is used to change the page this centering is defaulted to the normal left of the page.
Any advice would be appreciated,
Thank you
I have finally found a solution to this. The reason it took me so long is because links like this:
CKEditor classes being stripped
to the CKEditor website always say you turn CKEDITOR.config.allowedContent to 'true' and it only provides examples to trying to turn off individual plugins, but I needed to disable it over the entire system.
To disable Advanced Content Filtering throughout the entire CKEditor - in the config.js file insert the line:
config.allowedContent = true;
Hope this helps someone else.
I'd like to know if it's possible to add an additional view override to my Joomla 2.5 Template without having to create an entirely new MCV model.
For example.
Currently I have an override for the categorylist. But I'd like to make another override for the categorylist and for that to work it'd need to be an available option in the backend aswel.
So I'd be able to choose between something like:
- categorylist
- categorylist-2
So say the override file is default.php, is it possible to add a default2.php and somehow make it available in the backend, or can I only do this by copying an entire com_content view and changing it so it's a new MVC model?
I had never tried this before, but on testing it did get this to work in a way. I'm not sure if this is exactly what you are looking for, but it should help. With this method, you would be able to create a menu item that links to this view.
Say you were wanting to create a new category layout. You already have overridden the default layout in your template as such templates/your-template/html/com_content/category/default.php and now you want a second version.
Make a copy of default.php and rename it default2.php. Then copy the default.xml file from components/com_content/views/category/tmpl/default.xml to templates/your_template/html/com_content/category/default.xml and rename this to default2.xml.
Open default2.xml and edit the title attribute of the layout tag at the top.
Go to the menu manager and add a new menu item and you should see your new title in the list!
In an asp.net applicaiton I am using Hyperlink which points to an image. On certain condition I am setting its
"filter" property to alpha(opacity=70) for IE
and "opacity" prop to 0.7 for Firefox
so that it is shown dull to depict disable mode. This works fine in FIREFOX ie it shows dull in disabled mode but not in IE.
I see that the filter property is set on anchor tag and not on img tag present inside anchor. If I explicitly put the filter on image it works. But I am not able to do that programatically.
Any idea?
If you're not already, I would create some on/off CSS classes for the filter and then dynamically change the class that gets assigned based on your conditions. Then you may want to try putting each link inside a div and assign the classes to the div tags.