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>
Related
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')
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;
}
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.
Background
I am using Twitter Bootstrap LESS source with LessJS
I'm using font-awesome.less (referenced from within Bootstrap.less)
I've removed the icons section from bootstrap so they don't conflict.
I have a site.less file which I also reference from within Bootstrap that contains some site-specific styling.
Goal
I would like to be able to do something along the following lines in my site.css file:
.feedbackItemIconPraise
{
.icon-thumbs-up; //class included in font-awesome.less
color:Green;
}
Problem
When I try the approach above, I get the following error:
This error makes sense; I'm just not sure how best to correct it without creating an additional import of font-awesome.less in my site.less (which I imagine would be its own issue).
To clarify: Per comments below: I have a class name that I'm using from a Knockout viewmodel. (for example, if "Praise" is selected, it will apply the class "FeedbackItemPraise"). If FeedbackItemPraise is selected, I'd like it to apply the .icon-thumbs-up class from font-awesome (which displays the icon via a web font) and then also make the color green.
What I have so far
Bootstrap.less customization (only relevant parts shown):
//Sean's customizations
#import "background.less"; // Background images and colors
#import "font-awesome.less"; // Font Awesome font (SK 2012/09/04)
#import "site.less"; // site-specific LESS
Class within site.less:
.feedbackItemIconPraise
{
.icon-thumbs-up; //class included in font-awesome.less
color:Green;
}
UPDATED
Upon looking at Font-Awesome again, looks like they have now included mixins for the icons. See the following two files.
https://github.com/FortAwesome/Font-Awesome/blob/master/less/variables.less
https://github.com/FortAwesome/Font-Awesome/blob/master/less/mixins.less
Use like:
.feedbackItemIconPraise
{
.icon(#thumbs-up-alt)
color:Green;
}
ORIGINAL
If you look at font-awesome.less you will see that class doesn't exist, it's actually .icon-thumbs-up:before. Unfortunately you can't use pseudo classes as mixins, eg .icon-thumbs-up:before;.
You will need to modify your font-awesome.less file (or just add this class, or just put content: "\f087"; directly where it needs to go) so there is a non :before version:
.icon-thumbs-up:before { content: "\f087"; }
.icon-thumbs-up { content: "\f087"; }
Then apply this concept:
.feedbackItemIconPraise {
font-family: "FontAwesome";
font-size: 90px;
padding-top: 7px;
font-weight: normal;
font-style: normal;
display: inline-block;
text-decoration: inherit;
&:before {
.icon-thumbs-up;
}
}
Seems Font-Awesome icons have to use the :before pseudo for them to show up.
Demo: http://pulse-dev.com/files/stackoverflow/fontawesomeclass/
There may be another solution to this, but I combine my scripts into a single file (automatically) before running it through the LESS compiler. This allows me to define variables and mixins up front that can be used in any of my LESS files.
The online documentation does mention that LESS can include the #import files, making the variables and mixins available. You may need to ensure that you are on the latest version of the compiler and if the import files are organised in a folder structure, you may need to tell the compiler where to search.
var parser = new(less.Parser)({
paths: ['.', './lib'], // Specify search paths for #import directives
filename: 'style.less' // Specify a filename, for better error messages
});
I'm trying to create a page which uses java script to get data via PHP and then display it using a custom font declared in a CSS style sheet.
The entire page should use one custom font which I have declared in the main CSS file using #font-face like so:
#font-face {
font-family: 'bauhaus';
src: url('fonts/Bauhaus.woff') format('woff'),
font-weight: normal;
font-style: normal; }
My HTML file looks like this:
<html>
<head>
<script type="text/javascript" src="resources/raphael-min.js"></script>
<script type="text/javascript" src="resources/index.js"></script>
<link href="Main.css" rel="stylesheet" type="text/css">
<style type="text/css">
#canvas_container {
width: 100%;
border: 1px solid #aaa;
font-family:'bauhaus', "Times New Roman", Times, serif;
}
</style>
</head>
<body>
<div id="canvas_container">FONTTEST</div>
</body>
</html>
Within the index.js I can create text objects using Raphaeljs' syntax like so:
var txt = paper.text(150, 590, 'Test123').attr({'font-family': bauhaus, 'font-size':'70', fill:'#000'});
If I do it like that no 'Test123' text appears at all (I assume because it can't find or use the style 'bauhaus') and if I remove the font-family attribute it shows me text using the browser's default style which in my case is Arial.
The 'FONTTEST' text on the other hand is displayed correctly using the correct #font-face Font.
Now my question is how to automatically have text created by Raphaeljs (or other Javascript libraries) follow the style declared by the CSS statements? I like using custom fonts but I can't find a proper solution on how to easily use the stylized text with Javascript.
Thanks for your help!
Rather than writing out your CSS attributes in-line in your JS, why not change your CSS at the top from #canvas_container to .canvas_container , and then put the attribute "class='canvas_container' " on all of your elements which you want that font on? Should be easier to specify the class attribute than the style attribute.
An even better approach, if you want the entire page to use your font, would be to put this in your CSS (in your case, the style element):
html, body { font-family: 'bauhaus', "Times New Roman", Times, serif; }
That will make all HTML and BODY elements use your font unless later overwritten.
Well, after a bit of searching through Raphael's code I found it automatically sets its own font style (Arial) on all its text elements. I don't think that really makes sense, especially since I couldn't figure out on how to override it with a CSS '#font-face' font, but ok.
My solution was to simply delete the automatic setting of the font attribute in Raphael's source code.
For anyone interested, it's in the part where theText is declared. Just delete the font: availableAttrs.font bit in res.attrsand everything will obey the CSS style you want.
You need to register the font with cufon. See http://raphaeljs.com/reference.html#Raphael.registerFont and https://github.com/sorccu/cufon/wiki/about.
You can assign the style of your text explicitly not thinking about what really does.
Write a specific styler object function like:
function Styler( style )
{
this._style = style;
this.get = function( text)
{
return "<span style=" + this._style + "'>" + text + "</span>";
}
}
and then use everywhere:
myStyler = new Styler( 'font-size: 20px; font-weight: bold' );
...
text1 = myStyler.get( "text1" );
text2 = myStyler.get( "text2" );