How to increase the font size of the ckeditor? - javascript

I want to increase the font size of the rich text editor "ckeditor".
The first demo of this page (http://ckeditor.com/demo#toolbar) I am using. I want to make the font size of the body to say 44px.
I found this link http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-toolbarGroups . It seems I can configure my font size from this page. But still could not point out which config is suitable to increase the font size.

you can use setStyles function :
CKEDITOR.replace('editor1', {
on: {
instanceReady: function (evt) {
evt.editor.document.getBody().setStyles({color: 'black', 'font-size': '72px'})
}
}
}

If you want to modify the content displayed in the editor, customize contents.css.
If you want to add some new, pre-defined styles to style combo, see the official styles.js guide.
If you develop a plugin which adds some features that need styling, use CKEDITOR.addCss() method.
If you want to parse existing CSS file and use rules as pre-defined styles, see stylesheetparser plugin.

Add a contents.css to modify the content displayed in the editor the default font and size:
body {
font-family: Arial;
font-size: 44px;
}
And setting :
config.font_defaultLabel = 'Arial';
config.fontSize_defaultLabel = '44px';
config.contentsCss
See the documentation :
http://docs.ckeditor.com/#!/guide/dev_styles
http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-contentsCss

Open the contents.css inside the /ckeditor/ directory
And you can change font-size:
background-color: #ffffff;
font-size:16px; /* Just added this */

Just add this to your page
CKEDITOR.replace('editor1', {
on: {
instanceReady: function (evt) {
evt.editor.document.getBody().setStyles({color: 'black', 'font-size': '18px', 'font-family': 'Verdana'})
}
}
});

i am using ckeditor 4.4.6 and changing content.css works,please note that changing the 'body' class wont work , the '.cke_editable' class needs to be changed.

Related

How to change the editor default color to some other color in grapesjs in React?

How to change this default color into some other color in grapesjs?
You can change it using the CSS, using red as an example:
.gjs-one-bg { background-color: 'red' }
There is a lot of other classes you can alter as well, use Chrome dev tools to inspect them. Make sure to add !important if the styles don't apply.
You can change the default color by using setCustomCode function to set the css and then call render function.
editor.setCustomCode({
css: '.gjs-pn-commands { background: blue; }',
});
editor.render();

How to set default font in CKEditor 4?

I want to set default font family "Arial" in the CKeditor 4. The below changes have been done. But not working.
In config.js,
config.defaultFontLabel = "Arial";
You can create your own css files and put the styles for the editor in there. So create a stylesheet called MyStyle.css and put this in there. Then save it somewhere, perhaps in the same location as the CKEditor files.
body {
font-family: Arial;
font-size: 14px;
color: red;
}
Then put the following line in the config.js and point to the correct path to the css file.
config.contentsCss = '/ckeditor/MyStyle.css';
Or if you want different styles per instance, use this
<textarea id="CKEditor1" class="CKEditor"></textarea>
<script src="/ckeditor/ckeditor.js"></script>
<script>
$('.CKEditor').each(function () {
CKEDITOR.replace($(this).prop('id'));
CKEDITOR.config.contentsCss = '/ckeditor/MyStyle.css';
});
</script>

Specify font from font file in SVG using svg.js

For a web project, I'm using SVG with the svg.js library to make my life easier. The svg.js library works perfectly and generates correct SVG so I'm pretty sure everything is working OK on that front.
For this project, I can refer to a font like this in my CSS file:
#font-face {
font-family: 'FreeUniversal';
src: url('../fonts/freeuniversal-regular.ttf');
font-weight: normal;
font-style: normal;
}
This font is then picked up correctly and displayed for various elements in my HTML code.
My question is how I can do this in SVG using the svg.js library? I understand I can set the current font and so on, like this:
sCurrentSvgShape.attr({
'font-family': inFontName,
'font-size': inFontSize });
And this works for web-safe fonts like "Helvetica" or "Courier" or "Sans". But I want to know how I can set a font family that refers to my specific font file, just as I can in CSS.
I understand CSV has syntax to do this, such as:
<defs>
<style type="text/css">
<![CDATA[
#font-face {
font-family: Delicious;
src: url('http://nimbupani.com/demo/svgfonts/delicious-roman.otf');
}
]]>
</style>
</defs>
So, what's the best way to include this in svg.js? Do I have to create these "defs" nodes manually in some fashion? Is there support from the library to accomplish this?
There is no special method to accomplish that in svg.js. However you could make use of the bare element which lets you include non supported elements such as style.
You would use this in the following way:
root.defs().element('style').words(
'#font-face {' +
'font-family: Delicious;' +
'src: url(\'http://nimbupani.com/demo/svgfonts/delicious-roman.otf\');' +
'}'
)
I did not test it but that should do it.
The second possibility is to invent this style element with the invent method and include this functionality into svg.js yourself.
It would look something like this:
SVG.Style = SVG.invent({
// Initialize node
create: 'style'
// Inherit from
, inherit: SVG.Element
// Add class methods
, extend: {
font: function(){
// code to add a font to the style tag
}
, rule: function(){
// code to add a style rule... whatsoever
}
}
, construct: {
// Create a style element
style: function() {
return this.put(new SVG.Style)
}
}
})
This would be used like so:
root.defs().style().font('your font method to add a font').rule('add another css rule')

CKEditor - my styles in editor.css aren't being applied

I'm trying to change the default font color / size etc in the area of my ckeditor instance, but it's not working for me.
In chrome inspector I can add this style to the header and it works:
.cke_editable {
color: #fff;
font-size: 14px;
font-family: "Calibri";
}
However when I add this to my editor.css it has no effect. I've tried at the start and at the end, with no success. When I reload and check the resources in inspector, the correct css file is being loaded. Why aren't my styles applied?
When I inspect the iframe the style tag in the header doesn't contain the styles either.
Figured it out by removing my config and re-adding it a part at a time.
The very first line was
fullPage: true,
I had copied this from another source which used fullpage. I don't need it so I removed it.
According to the documentation, having fullPage on will stop contentsCss being implemented. From the ckeditor documentation:
Note: This configuration value is ignored by inline editor as it uses the styles that come directly from the page that CKEditor is rendered on. It is also ignored in the full page mode in which developer has a full control over the HTML.
However, what they fail to mention is that having fullPage set to true will also stop any changes to editor.css from being loaded. Once it was removed my custom styles shined through
Handy tip:
contentsCSS does not have to point to a css file. You can put straight css in there instead of a url, like so
contentsCss: '.cke_editable { color: #fff; font-family: Calibri; font-size: 14px; } ',
This will apply these styles directly to the editor. This appears to be undocumented as the documentation only mentions stylesheet urls.
You need to change the content.css in the main ckeditor folder or add the following setting http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-contentsCss
It sounds like your CSS styles are being overridden - try adding !important to each style like below:
.cke_editable {
color: #fff!important;
font-size: 14px!important;
font-family: "Calibri"!important;
}

How to add custom icon to JqGrid top-level toolbar button?

I have used the info here to add a custom button in JqGrid top level toolbar using code below in IE9.
Caret icon appears instead of image. IE9 network tab shows that request for Images/calendar.png is not issued.
$grid.jqGrid('navButtonAdd', '#grid_toppager', {
caption: '',
id: "grid_mybutton",
buttonicon: 'my-image',
onClickButton: function () {
window.location = 'Report';
}
});
css file:
.ui-button .ui-icon.my-image {
background-image: url("Images/calendar.png");
width: 16;
height: 16;
}
.ui-button.ui-state-hover .ui-icon.my-image {
background-image: url("Images/calendar.png");
width: 16;
height: 16;
}
How to add custom icon ?
The jQuery styles will always over-write your styles as they are applied last.
In addition to what jjay225 pointed out ones you fixed your references, add the !important tag to your image style to ensure it is always applied.
Try it out in the below demo, remove the !important, and you get the ^, add it again and you get your image.
See DEMO
Not having your full code I simply added an icon to the toolbar with jQuery append() and added the required CSS.
Using any debugging tool though, i.e: FireBug in FF and the build-in ones in Chrome or IE, you can check the exact class/id values of your new icon and fix any css reference issues you may have.
Your css of
.ui-button.ui-state-hover .ui-icon.my-image
should be
.ui-button, .ui-state-hover, .ui-icon, .my-image
Why not try just have the class
.my-image
{
background-image: url("Images/calendar.png");
width: 16;
height: 16;
}

Categories