I'm moving from FCK editor to CK editor 3.6.3 and the site has a background image, which is appearing in the CK editor. I need to remove this while using the same CSS file for both the general site and the CK editor (to pick up on CSS for the styles dropdown).
I tried setting config.BodyClass to a style with no image - this works on FCK2.x but not the CK3. I also found via google a config.extraCss setting but I don't see it in the docs, and it does not appear to do anything anyway.
Fullpage is off (i.e. editor is not producing <body><head> etc tags))
I've got a workaround by having two CSS files, one for the site and one for CK with a different body style, but there must be a better way?
Thanks,
Kevin
Config section:
config.stylesSet = 'my_styles:/admin/ckeditor/styles_dropdown.js';
config.contentsCss = '/newdesign/style.css';
//config.extraCss = 'body {background: none;background-image: none;}';
config.BodyClass = 'fckbody' ;
CSS section (of the 'main' css file)
body{
margin:0px; padding:0px; background-image:url(/newdesign/site_bg19.jpg); repeat; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; color:#393939;
}
.fckbody {
background-color: white;
background: none;
background-image: none;
text-align:left;
}
The correct name in CKEditor is bodyClass with an initial lower case.
Thought I should post my insight here for my findings. I came across this page while looking for a reason why my CKEditor was showing a background image of my site.
If you CKEditor is showing a background image on the Make a Comment section of a node :
1 - Head to "admin/config/content/wysiwyg"
2 - click edit to the text format for which text format is showing the background image
3 - click the CSS tab drop down
4 - change the Editor CSS to "Editor Default CSS".
Hope this helps someone!
Related
I am using CKEditor 5 in my application for users to input documents with images, media, tables and styled text. Once the user stores the document and I pull it out again for display. In the past when I only had the most generic styling I displayed the content like this:
<div [innerHTML]="doc.text"></div>
This is an Angular application which explains the syntax used above. The problem is that the text renders but the CSS that is effective makes it looks different. For example CKEditor has a feature for the user to automatically resize an image to 50% and flow text around it. It looks really nice in the editor but when displayed as above the image reverts to full size.
My workaround for now is to invoke a ckeditor in disabled mode like this:
<ckeditor [editor]="Editor" [config]="{ toolbar: [ ] }"
[disabled]="true" [data]="doc.text"></ckeditor>
That works but I would prefer to have a solution where I don't have to import the ckeditor into components that don't need to let the user edit the document. Does anyone know how to do this?
I'd say it is not passible to have all the ckeditor features working in Angular only by using a div with innerHTML as a viewer... I was using same approach but some of the "figures" weren't shown, concretely embedded videos...
In order to have a disabled and pure read-only viewer I created a dedicated wrapper component and I used some global CSS styles to get rid of that unwanted UI behavior in this scenario.
Here is my rich text viewer component HTML, it is a ckeditor with an empty toolbar, same as in the question indeed:
<ckeditor class="ckeditor-viewer" *ngIf="isBrowser" [editor]="editor" [ngModel]="data" [config]="{ toolbar: []}" [disabled]="true"></ckeditor>
Here are some global styles that hide borders on figure hover and table handlers:
// These styles hide weird "things" in CKeditor Viewer (read only mode)
.ckeditor-viewer .ck.ck-editor__editable.ck-blurred .ck-widget.ck-widget_selected, .ck.ck-editor__editable.ck-blurred .ck-widget.ck-widget_selected:hover{
outline-width: 0;
}
.ckeditor-viewer .ck .ck-editor__nested-editable {
border: 1px solid transparent;
height: 0;
margin: 0;
}
.ckeditor-viewer .ck-content .image>figcaption{
background-color: transparent !important;
}
.ckeditor-viewer .ck .ck-widget__selection-handle{
width: 0;
height: 0;
display: none;
}
// These styles hide weird "things" in CKeditor Viewer (read only mode)
I hope it helps.
the style dropdown menus in ck_editor in TYPO3 8.7 shows the labels in the same font size as in the editied text. E. G. when h1 is in the rte.css formatted as 30 px the text in the dropdown is 30px too and therefore the entry is not readable. Is there a possibilty to fix the font size in the dropdown menus to 12-15px, always and in every context? Without destroying the wysiwyg in the editable text?
Thanks
As far as I can see you can do that by using in your rte.css something like:
.cke_panel_listItem h1{
font-size:15px;
}
h1{
font-size:60px;
}
h2{
font-size:40px;
}
h3{
font-size:20px;
}
Please note that as the dropdown is loaded inside an iframe, you might have to kill your browser's cache to see some change.
See also CKEditor remove style preview from Styles dropdown
I'd like to use the theme styles to generate different CI for sub companies of our main company. I would like to insert every sub-companies logo into the top naviagtion bar. The plan was to have a seperate theme style for each sub company and within each style have a custom css code which sets the background image to a referenced static file (or theme file). Unfortunately the custom css code does not seem to evaluate the substitution strings so the images can not be rendered. e.g.
div.t-Header-logo {
background-image: url(#APP_IMAGES#COMPANY1_LOGO.png);
background-repeat: no-repeat;
width: 250px; /*or your image's width*/
height: auto; /*or your image's height*/
margin: 0;
padding: 0;
}
Is there any way to achive different logos per theme style?
Thanks for your support
replace the #WORKSPACE_IMAGES# reference with it's resolved name in the CSS file.
e.g. #WORKSPACE_IMAGES#add.gif becomes-
http://apex.oracle.com/pls/otn/wwv_flow_file_mgr.get_file?p_security_group_id=441224701954687600&p_fname=add.gif
Get the resolved name for your workspace by viewing page source, copy and replace #WORKSPACE_IMAGES# with the same. It will work.
Note: make sure that the image file you have uploaded is not specific to an application.
I can't seem to add my own CSS file to the CKEditor. I'm downloading a custom version 4.5.8 and include the "StyleSheet Parser" plugin. The "Styles" list has the default styles, but not the ones from my css file.
This the code:
CKEDITOR.config.contentsCss = '../../../css/test.css';
CKEDITOR.replace('editor1');
The editor is loaded successfully, but the "Styles" list does not contain my styles. The location of my css files seems right, when I try other paths I get an error.
This is my test.css:
.testStyle {
color: red;
font-family: "Arial Black", arial-black;
}
Already tried clearing my browsers cache. I tried it in multiple browsers.
I tried one other thing: download the StyleSheet Parser separately, put it in the plugins folder, and use the following code:
CKEDITOR.config.extraPlugins = 'stylesheetparser';
CKEDITOR.config.contentsCss = '../../../css/test.css';
CKEDITOR.replace('editor1');
The "Styles" list is still not showing my style, but when I edit the source code and put my style in like this, the style is applied to the text in the editor(!):
<p class="testStyle">Test text</p>
Sources:
- CKEditor docs for the StyleSheet Parser
- The "contentsCss" option docs
The Styles in CKEditor require an element, so the StyleSheetParser only recognizes rules that include an element and a class name.
You should change your CSS to
p.testStyle {
color: red;
font-family: "Arial Black", arial-black;
}
SOLVED. Problem below and as simple a fix as I can outline.
Visual Studio 2013 + AjaxToolkit 4.5.7.1213 (most recent stable).
Web forms app. I have a very simple page. It renders perfectly in IE compatibility view or Chrome's IE tab extension. However, in Chrome 33.0.1750.154 (couple weeks old version), or IE 11 the header of a tab in the tabcontainer is cut off horizontally; the bottom just isn't there. I have googled, and others had similar problems a while ago but nothing seems to easily resolve it. Doesn't matter if I use the inline HeaderText of the tab panel or a Header Text section, same thing happens.
I discovered that the problem resolved if I stopped using bootstrap.css.
Here is the problem:
Ajaxtoolkit has its own CSS, and this can be observed by looking at the source code for the tabcontainer online:
http://ajaxcontroltoolkit.codeplex.com/SourceControl/latest#Server/AjaxControlToolkit/Tabs/Tabs_resource.css
The default css class that the ajaxToolkit:TabContainer uses is .ajax__tab_tab. The offending code is in .ajax__tab_tab. It specifies a height of 13px. That cuts off the text. If I increase it to 18 px (on default font size), no issues.
Since the cssclass of ajaxToolkit:TabContainer can be specified, what I did was copy out most of the .ajax__tab_xp from the ajaxToolkit site, rename it to .customAjaxTab, place it in my own .css file, and then set CssClass="customAjaxTab" in my TabContainer.
Unfortunately, the images that the TabContainer default css calls use a "WebResource" call that I didn't get to work, so I made my images. My new css:
.customAjaxTab .ajax__tab_disabled { cursor: default; color: #A0A0A0; }
.customAjaxTab .ajax__tab_header {font-family:verdana,tahoma,helvetica;font-size:11px;background:url(Images/Tab_bottomline.png) repeat-x bottom;height:21px; }
.customAjaxTab .ajax__tab_header .ajax__tab_outer {padding-right:4px;background:url(Images/Tab_unselected.png) no-repeat right;height:21px;}
.customAjaxTab .ajax__tab_header .ajax__tab_inner {padding-left:3px;background:url(Images/Tab_unselected.png) no-repeat;}
.customAjaxTab .ajax__tab_header .ajax__tab_tab {height:18px;padding:4px;margin:0px;color:black;}
.customAjaxTab .ajax__tab_header .ajax__tab_hover .ajax__tab_outer {cursor:pointer;background:url(Images/Tab_unselected_hover.png) no-repeat right;}
.customAjaxTab .ajax__tab_header .ajax__tab_hover .ajax__tab_inner {cursor:pointer;background:url(Images/Tab_unselected_hover.png) no-repeat;}
.customAjaxTab .ajax__tab_header .ajax__tab_hover .ajax__tab_tab {cursor:pointer;}
.customAjaxTab .ajax__tab_header .ajax__tab_active .ajax__tab_outer {background:url(Images/Tab_selected.png) no-repeat right;}
.customAjaxTab .ajax__tab_header .ajax__tab_active .ajax__tab_inner {background:url(Images/Tab_selected.png) no-repeat;}
.customAjaxTab .ajax__tab_header .ajax__tab_active .ajax__tab_tab {color:black;}
.customAjaxTab .ajax__tab_body {font-family:verdana,tahoma,helvetica;font-size:10pt;border:1px solid #999999;border-top:0;padding:8px;background-color:#ffffff;}
This link has more on custom css for the TabContainer:
http://www.asp.net/ajaxlibrary/act_TabContainer.ashx
This worked for me, add in the bootstrap.css and bootstrap.min.css
.ajax__tab_tab
{
-webkit-box-sizing: content-box!important;
-moz-box-sizing: content-box!important;
box-sizing: content-box!important;
}
xadriel's solution works - but, I have seen many comments stating 'Do not modify the Bootstrap.css file' - so I added xadriel's code segment to my site.css file and it works great! (Especially considering I'm using CDN linked CSS/JS so can't modify them...).
.ajax__tab_tab
{
-webkit-box-sizing: content-box!important;
-moz-box-sizing: content-box!important;
box-sizing: content-box!important;
}
I have an older VS2008/.NET 3.5 very large website that I am adding Bootstrap to, and I had to override a few Bootstrap settings by adding local site.css class names, then add those custom class names to the control needing fixing (this ensures changes only apply where needed and don't affect other areas). Some required !important to ensure they are changed (i.e. change color/background-color for a drop-down control where 'form-control' colors were being applied and I didn't want them). Doesn't seem necessary to add !important here as all I did was add this to site.css and it worked.