Develop Reference

How to format / add custom CSS to the HTML using Mammoth JS

I m using mammoth js https://github.com/mwilliamson/mammoth.js to convert docs file to HTML this was working fine but i m not getting exactly copy the styling (font, text size, color, etc.). How to format the css style exactly?
var options = {
styleMap: [
"p[style-name='Section Title'] => h1:fresh",
"p[style-name='Subsection Title'] => h2:fresh"
]
};
function transformParagraph(element) {
if (element.alignment === "center" && !element.styleId) {
return {...element, styleId: "Heading2",
styleName: "color:red"};
} else {
return element;
}
}
var paragraph = {
transformDocument: mammoth.transforms.paragraph(transformParagraph),
}
I have tried by adding styleID and styleName but this is not working as expected, did not understand the styleMapping() what it is exactly and how can i use this to add custom css or format CSS as their in the document.
Obviously I'm doing something wrong,i have no idea about the issue,so any help would be much appreciated.This question need to be answered please,thanks in advance.

How to console.log multiple objects?

I am creating a javascript exercise, my idea was to create a function that would give me an icon return, I am using FontAwesome for this. I managed to make it show the icon and the message but I wanted to add my predefined styles for titles, emphasis .. etc through a function but I still can't think of a form. I even tried using Swith but it only copies css as any string
function icones(ico_name, text,style ){ // Capture icon name, style to be used and text
switch(ico_name) { //Check argument icon
case 'user':
ico_name = '%c ' //Icon will only be displayed after CSS declaration
font = 'font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 20px; content: "\f434";'
break
}
switch(style) { // Styling text
case 'title':
text = 'color: red'
break
}
console.log(ico_name,font,text)
}
icones('user','player', 'title') //Applying values to function

I'm not sure if this is what you are looking for, but you can use document.getElementById() to get an element in the webpage and then apply CSS styles.
For instance, if the element whose font you are trying to change has its id attribute set to "changeMyFont":
<span id="changeMyFont"></span>
you can change its CSS attributes using JavaScript as such:
var elem = document.getElementById("changeMyFont");
elem.style.fontFamily = "Font Awesome 5 Free";
elem.style.fontWeight = 900;
elem.style.fontSize = "20px";
To change the text color to red for a certain element, you can follow the same procedure. To change the content within a HTML tag, use innerHTML (do not allow user input here; it is an XSS threat):
document.getElementById("elementToChange").innerHTML = "HTML here";
You can use an HTML escape in there.

Well after a few hours between trial and error I was able to accomplish my feat.
The "secret" was to put 2 styles in just one console.log, the code may seem like a confusing drift and surely to improve it.
function icones(ico_nome,texto,style ){ // Captura o nome do icone, o estilo que sera utilizado e o texto
switch(ico_nome) { // Check argument icon
case 'user':
ico_nome = '%c ' // Icon will only be displayed after CSS declaration
font_icon = 'font-family:"Font Awesome 5 Free"; font-weight: 900; font-size: 20px;' //Declara a fonte para visualização
break
}
switch(style) { // Styling text
case 'titulo': // Set styles for titles
font_icon += 'color:red;' //Set the color Red to Icon
style_text = 'color:blue; font-family: Arial;' // Set styles for texts
break
default:
font_icon += 'color: black' // Set default color
}
console.log(ico_nome + ' ' + '%c' + texto,font_icon,style_text) //Join the 2 styles and reveal the output
}
icones('user','Usuario', 'titulo') //Applying values to function
Final result
---- Console Output
Still do not know how to insert the image directly into the post sorry :)

Use Jquery function .css() For example:
$("#element").css("font-size", "20pt")

How Can i change default font of Ckeditor?

I like to change default font of Ckeditor !
I cant do it and dont see anything about it in Docs .
I can only change the default lable of it !
Thanks

Per the docs these all seem to be defined in plugins/font/plugin.js.
{Object} CKEDITOR.config.font_style
The style definition to be used to apply the font in the text.
Defined in: plugins/font/plugin.js.
config.font_style =
{
element : 'span',
styles : { 'font-family' : '#(family)' },
overrides : [ { element : 'font', attributes : { 'face' : null } } ]
};
{String} CKEDITOR.config.fontSize_defaultLabel Since: 3.0
The text to be displayed in the Font Size combo is none of the available values matches the current cursor position or text selection.
Defined in: plugins/font/plugin.js.
config.fontSize_defaultLabel = '12px';
{String} CKEDITOR.config.fontSize_sizes Since: 3.0
The list of fonts size to be displayed in the Font Size combo in the toolbar. Entries are separated by semi-colons (;). Any kind of "CSS like" size can be used, like "12px", "2.3em", "130%", "larger" or "x-small". A display name may be optionally defined by prefixing the entries with the name and the slash character. For example, "Bigger Font/14px" will be displayed as "Bigger Font" in the list, but will be outputted as "14px".
Defined in: plugins/font/plugin.js.
config.fontSize_sizes = '16/16px;24/24px;48/48px;';
config.fontSize_sizes = '12px;2.3em;130%;larger;x-small';
config.fontSize_sizes = '12 Pixels/12px;Big/2.3em;30 Percent More/130%;Bigger/larger;Very Small/x-small';
I am not very savvy with Ckeditor, but I hope this helps!

In config.js:
config.contentsCss = '/ckeditor/fonts.css';
config.font_names = 'shabnam';
In fonts.css:
#font-face {
font-family: "shabnam";
src: url("/fonts/Shabnam.ttf") format('truetype');
}
Now, it may be all right.
if you want this font to be styled with body tag, you should add this in fonts.css:
body {
/* Font */
font-family: "shabnam";
}
In order to change toolbar style, what worked for me was this:
In
skins/moono-lisa/editor.css:
delete `font:normal normal normal 12px Arial,Helvetica,Tahoma,Verdana,Sans-Serif;` from
`.cke_reset_all,.cke_reset_all *,.cke_reset_all a,.cke_reset_all textarea`

How to remove Thousand 'k' suffix from Amcharts-Stockchart

I have created a Stockchart using Amcharts available in https://codepen.io/Volabos/pen/PyzmYd
Where everything looks good, I however want to get rid of the Thousand-k suffix from Y-axis lables as well as from Baloon, instead I desire to have Thousand seperator + rounded value upto 2.
Is there any possibility to achieve such?
Besides, I also want to set various CSS properties of the div class = 'Right' dynamically based on the value of "value2" e.g. if its value is greater than 500 then Font-color would be green otherwise red.
Any pointer would be highly appreciated.

For the y-axis, change usePrefixes in your panelSettings to false:
"panelsSettings": {
"usePrefixes": false
},
For the balloon, implement balloonFunction to customize the formatting:
stockGraphs: [{
"id": "g1",
...
"balloonFunction": function(graphDataItem, graph) {
var value = graphDataItem.values.value;
return "<div>Value<br/>" + Math.round(value).toLocaleString('en-us'); + "</div>";
}
}]
Updated pen
EDIT
Here is the updated pen to include dynamic balloon colors based on value2. The new balloonFunction looks like this:
function(graphDataItem, graph) {
var value = graphDataItem.values.value;
var value2 = graphDataItem.dataContext.rawData[0].value2;
return "<div style='color:" + (value2 > 500 ? 'green' : 'red') + "'>Value<br/>" +
Math.round(value).toLocaleString('en-us'); +
"</div>";
}
You can clean this up with string interpolation and CSS classes as well, but this is basically the technique.

Force CKEditor to add a class to Image2 widget

I want to configure CKEditor (version 4.3.2) to add a class-attribute to every Image2 widget figure tag in the content. I use the following code (based on How to add CSS classes and an ID to paragraphs in CKEditor?):
CKEDITOR.on("instanceReady", function(e)
{
var editor = e.editor;
pClass = 'additional_class',
pClassRegexp = new RegExp(pClass, 'g');
editor.dataProcessor.htmlFilter.addRules(
{
elements:
{
figure: function(element)
{
// If there's no class, assign the custom one:
if (!element.attributes['class'])
element.attributes['class'] = pClass;
// It there's some other class, append the custom one:
else if (!element.attributes['class'].match(pClassRegexp))
element.attributes['class'] += ' ' + pClass;
}
}
});
});
Unfortunately, I can add class only for the figure elements having no class 'caption' but then it is not a widget any more.

You can do this with CKEditor 4.4 and above, using some configuration options. Here's the relevant instructions from CKEditor's image2 documentation:
Thanks to the CKEDITOR.config.image2_alignClasses option introduced in CKEditor 4.4 you can use CSS classes for setting image alignment. Additionally, the CKEDITOR.config.image2_captionedClass option allows you to assign a custom class to the element of a captioned image....
config.image2_alignClasses = [ 'image-left', 'image-center', 'image-right' ];
config.image2_captionedClass = 'image-captioned';
will produce class-driven, stylable markup that lets you avoid inflexible and non-semantic inline CSS code:
<figure class="image-captioned image-right">
<img alt="MyImage" src="myimage.png" />
<figcaption>MyCaption</figcaption>
</figure>