I am working with ckeditor
I want to ask how can we set the font-family and font-size in this plugin,
I have tried using
CKEDITOR.config.font_defaultLabel = 'Arial';
CKEDITOR.config.fontSize_defaultLabel = '12px';
but these commands just change the front-end (font name and size)
Whats the way out?
The most future-proof method(1) is to override the default CSS styles for CKEditor content that you want to change in a separate file, added to your editor configuration through the config.contentsCss option.
See the working sample for this scenario in the CKEditor SDK: http://sdk.ckeditor.com/samples/classic.html
Scroll down to the "Classic Editor with Custom Styles" sample there; you can download the exact source code of this solution in the "Get Sample Source Code" section on the sample page. In this case the custom font and other styles were defined in a separate classic.css file which is then provided to the editor instance configuration with:
<script>
CKEDITOR.replace( 'myeditor', {
/* Default CKEditor styles are included as well to avoid copying default styles. */
contentsCss: [ 'contents.css', 'classic.css' ]
} );
</script>
Do remember that it is only valid for classic editor as in inline editor content styles are the same as the page styles, so all content styling comes directly from the page stylesheets.
(1) This method is better than modifying the default contents.css file because you don't risk overwriting your changes when you upgrade CKEditor.
If you are using the classic editor, check the contents.css file in the root folder of CKEditor. You can change the styles, including fonts, for all HTML elements, also for the <body> element (the editing area).
Instead of modyfying the default config.css you may specify additional CSS files to be loaded with config.contentsCss, this will save you a headache with future upgrades. See Anna's comment.
Related
This is my first post so I would like to say it's nice to join this community and I will do my best to help others but I'm the one that needs help right now.
--Problem
I've got problem with displaying proper styling of text retrieved from CKE with .getData(), saved into DB and displayed in article.
--When it works?
When I include this CSS:
<link rel="stylesheet" href="\js\ckeditor\contents.css">
in my base.html.twig <head> tag,this changes the css of the site.
--What do I need to do?
What I need to do to avoid conflict? or is there any method to render text without making it editable? Something like CKEDITOR.render(tagId)
--Some images:
With Regards
Wiktor
Please see:
https://docs.ckeditor.com/ckeditor4/latest/guide/dev_framed.html#content-styles-vs-page-styles
https://docs.ckeditor.com/ckeditor4/latest/api/CKEDITOR_config.html#cfg-contentsCss
If you are using classic CKEditor then its contents are held inside an iframe with a separate document. In order to style that internal document CKEditor attaches contents.css to it. Since internal styles in separate CSS files are not being saved together with HTML or merged into HTML it is important that you use same styles inside contents.css as you would like to see on your target page (where saved content will be used).
This is not CKEditor bug but simply a different approach you need to apply inside your application.
If you are creating content for different pages you can either create one large contents.css file or, in case of any styles conflicts multiple CSS files which you can load dynamically based on some logic (it will require writing some code to handle that) using contentsCss setting. Please note that in case of dynamic CSS switching you do not want to use contentsCss inside config.js file but directly in instance configuration on HTML page where you can use server-side tags to "spit out" correct configuration for CKEditor instance e.g.
var editor = CKEDITOR.replace( 'editor1',{
language : 'en',
// other configuration settings
// ...
contentsCss : [ '/css/mysitestyles.css', '/css/anotherfile.css' ]
}
You can use server-side tag which will return whole editor configuration or simply only this part contentsCss : [ '/css/mysitestyles.css', '/css/anotherfile.css' ] or even correct file paths when HTML is being rendered.
CKEditor 4 or above
I have a CKEDITOR instance that I can access without problem parent.CKEDITOR.instances[instance_id]
I want to add bootstrap file to the head of the iframe generated by CKEDITOR (kind of hack, because normal way to add optional css file was not working).
I tried to get the iframe head and to inject the bootstrap file, but it fails always.
Any Suggestion?
If you are using classic editor with contents in iframe then please use contentsCss configuration setting to add extra CSS to editor contents area. It is important to refresh the cache with Ctrl+F5. If for some reason changes are not applied and path to CSS file is correct (you are not getting 404 in browser dev-tools console) then you might want to try clearing cache according to this link.
If you really need to get to the iframe, you can use below technique. It gets you the div with editor id you need and it finds iframe for it. This is good if you have couple of editors or iframes on a single page.
document.getElementById('cke_'+ your_textarea_id ).getElementsByTagName('iframe')[0].contentWindow
I found it finally, I post it here so maybe it will be helpful for someone in the future.
I just added the bootstrap file to the body tag (it is a bad practice but it works).
There are many questions asking how to change the theme in Semantic-UI, but I have not been able to find even a question where it refers to changing the theme dynamically, i.e. after a webpack build.
I want to allow each user of a site to save their own preference for the theme. I have some users who prefer dark themes, and others who are color-blind, and others who have weak eyes and need larger fonts, or more contrast, etc.
I know it's possible to change the theme dynamically since the semantic-ui demos all do it. Unfortunately, the Theming page and all documentation I have seen describes how to change the site-wide theme, and apply that, in a new site-wide build. Or to customize that (still) site-wide build.
I think I'd be happy to just be able to add a class to the class list for an element (e.g. "github") and have it use that theme for that user (even if it was just for that element). But ideally, I'd like to have my page load an extra .less or .css file(s) with site-wide overrides for that user, for the user-selected theme.
I'm still pretty new semantic-ui and to applying dynamic changes to a webpack site. Any suggestions for how to apply additional less variable changes after build, or to reload entire Semantic-UI themes, like the demo does?
Note that demo site is not a link to GitHub; it's a look-alike with a paint can icon near the top-right which brings up a sidebar that allows you to change themes. Dynamically.
Update:
I need to test this now, but I may have an answer for my own question here.
It seems that the gulp build process typically compiles and combines all the less and other files into the dist folder as semantic.css, semantic.js, semantic.min.css and semantic.min.js. It also produces different individual component .css files in the dist/components subfolder, but (I think) if you're loading the full css file (e.g. semantic.min.css), that you don't really need the components subfolder. That this is present for those sites who want to optimize to the point of only including the .css files for the components they use?
So it's already processed and combined, and to swap themes, I think all that is necessary is to swap one semantic.min.css file with the output of the build for another theme. The .js files are the same, at least for default vs github themes.
If this is true, it's a matter of copying the semantic.min.css to an alternative file, for example, semantic.github.min.css and use that .css file instead. Or copy it to a theme subfolder like github/semantic.min.css. Then, in either case, update the DOM with a new href on the stylesheet originally referenced.
Summary: It looks like it's all in the semantic*.css file and swapping the output of different builds allows us to swap themes. I'll test this later tonight.
Update 2:
I updated the theme.config file with all github entries, then rebuilt the dist folder, copied the semantic.min.css as semantic-github.min.css to my static folder with the original, then just updated the href to select it:
// normally: <link rel="stylesheet" type="text/css" href="/static/semantic/semantic.min.css">
// non-default: <link rel="stylesheet" type="text/css" href="/static/semantic/semantic-theme.min.css">
function swapThemeCss (theme) {
console.log('Theme change to "' + theme + '".')
let sheet = document.querySelector('#theme')
if (!sheet) {
return
}
if (theme === 'default') {
sheet.setAttribute('href', '/static/semantic/semantic.min.css')
} else {
sheet.setAttribute('href', '/static/semantic/semantic-' + theme + '.min.css')
}
}
Oh also, in the example above, I gave the link an id of 'theme' to make it easier to find it and replace the href dynamically:
<link id="theme" rel="stylesheet" type="text/css" href="/static/semantic/semantic.min.css">
"So it's already processed and combined, and to swap themes, I think all that is necessary is to swap one semantic.min.css file with the output of the build for another theme."
Correct.
Depending on whether you're having per-user styles, or just multiple themes the user can pick from, you can simply have separate less files with per-theme overrides that can be compiled with webpack but perhaps not inserted into your index.html. Then you can dynamically add/remove the <link>s to depending on the user preference. The dynamic adding will cause a flicker from the default styles to the per-user theme styles if you're inserting the <link> tags via frontend javascript (because it must wait for the frontend JS to load, which will render the page/default styles in the meantime, then inject the new <link> and only show the new styles once those have been loaded). Add the per-user <link> tags serverside to make it seamless.
I'm trying to use within wymeditor the same styles that are on my website. Unfortunately this editor is barely documented, so I don't really know how to do it.
The documentation implies something like you can use a stylesheet where you define everything in some form, and it will be parsed and used in the editor. I could do this, but only with the classes (second box on the right panel). The documentation gives an example, but only for the classes, not for the containers. There's a link to a full stylesheet, but it's a dead link, and the stylesheet used in the examples only define classes and no containers.
So how would I make for example a red h1 in the editor? Or at least in the preview.
I would be really glad if someone linked or gave a full example of a stylesheet where containers like h1 and p are also formatted and used in editor. If this is not possible, what are other ways to do it?
EDIT:
I could inject CSS to the iframe with postInit:
postInit: function(wym) {
var $head = $(wym._box).find('iframe').contents().find("head");
$head.append($("<link/>", {
rel: "stylesheet",
href: costumIframeCss,
type: "text/css"
}));
}
Now the only thing that I need is to do a similar thing to the preview dialog. Maybe with the postInitDialog(wym,wdw). I don't really know how yet. The big problem there is that I need to differentiate the preview dialog from the other dialogs.
Update:
I saw that you have access to dialog window as wdw, when using postInitDialog. Thats cool. The way you did it (looking at your update) the same you you can for Diaolog too
Look at the following image. I debugged the Preview dialog, as it opens.
Look at line no. 41
Following what you did to the editor, the same can be done to the Preview
At line no. 41, you can get the head and append the style in the same way
var $head = $(wdw.document.body);
$head.append($("<link/>", {
rel: "stylesheet",
href: customPreviewCss, // CSS for Preview Dialog
type: "text/css"
}));
Initial Answer:
As I understand, you want the styles to take effect while you are editing. Ideally, for making an h1 red in color while editing (or any such customization), you have only the following options:
Use the proper classes, as explained by the documentation - The very
purpose of an editor is this. Customization should be done on top of
what is there
Edit the default stylesheet which you have linked or
is loaded when editor is active (you can check that using inspect
element) This is explained below
I see that when you are using the editor, it loads in an iframe. An iframe has its own styles. Now, inspect the element. In your case its an h1, but I am using the p tag from the example
See that it loads the styles from another file - wymiframe.css, line no. 51 for a p tag
So if you want to change or add your own styles, go to that file. (If you hover own it, you get the file path, or right click and open in new tab and check from the address bar)
Add or edit the style of h1 there. Done.
Also, you can go to the respective html file in the wymeditor/iframe/default folder. Add your custom link to your own css file. In this file, do all desired customization :)
Hope it helped !
As you see those are just the samples. You can't use that as an editor online. You 'll have to download that and try using it.
http://files.wymeditor.org/wymeditor-0.5/examples/
The above shows the list of examples. In that you have tried with the first link.
To download it go to this link.
http://www.wymeditor.org/download/
Select the recent stable versions for less flaws.
Hope this helps.
And as you have asked it works very well in the preview, when submitting nothing is getting reflected.
To achieve that in the preview, click on the HTML icon that is present at the second last position.
Write your own code, clicking on preview gets your result in a new pop up window.
I have written a Firefox extension which alters the look and feel of Facebook. For this I used JS code to inject CSS styles to override FB defined values. But for some url patterns I don't want to force my styles. The issue here is the FB doesn't seem to load the full page but parts of page (but somehow the url in address changes).
This means when the new page loads my old styles will still remain applied and I want to restore them to their original values. How should I do that?
You should inject all your custom CSS styles into one <style> element, and then remove this <style> element (using JavaScript) when a new page is loaded on which you don't want your custom CSS.
Here's an example using jQuery: http://jsfiddle.net/thirtydot/BAPZF/