using html and styling within javascript

Question

Hello I am building a flask web application and including a web text editor called ckeditor into it. I figured out how to include custom resume templates into my application by modifying a file called default.js. I think anyone who knows a lot about javascript could help me out, without knowing about ckeditor specifics

My issue is that I want to style the html such as name in the h1 tag etc but am not sure how to do this. The default.js file uses a javascript array to render templates. How would I link a css stylesheet to the html I have in default.js and actually have it be styled. Any help would be appreciated!

Here is the script I have in that default.js, which currently renders one template

// Register a template definition set named "default".
CKEDITOR.addTemplates( 'default',
{
    // The name of the subfolder that contains the preview images of the templates.
    imagesPath : CKEDITOR.getUrl( CKEDITOR.plugins.getPath( 'templates' ) + 'templates/images/' ),

    // Template definitions.
    templates :
    [
        {
            title:'Resume Simple',
            image:'resume1.jpg',
            html:
            '<h1>Name</h1>' +
            '<p>[Address, City, ST Zip Code][Telephone][Email]'+
            '<h3>Education</h3>'+
            '<p>[Degree][Date Earned][School]</p>'+
            '<h3>Skills & Abilities</h3>'


        }
    ]
});

255kb - Mockoon · Accepted Answer · 2014-12-11 22:32:17Z

1

You can style these elements like any other HTML elements with CSS, either by directly targeting the HTML tags or by adding CSS classes to the HTML code located in the default.js file, like this (notice the class="name"):

templates :
[
    {
        title:'Resume Simple',
        image:'resume1.jpg',
        html:
        '<h1 class="name">Name</h1>' +
        '<p>[Address, City, ST Zip Code][Telephone][Email]'+
        '<h3>Education</h3>'+
        '<p>[Degree][Date Earned][School]</p>'+
        '<h3>Skills & Abilities</h3>'
    }
]

Your CSS could look like this:

/*styling the HTML element*/
h1{
    color:red;
    ...
}
/*or styling the class*/
.name{
    color:red;
}

You will either place it directly in a <style> HTML element in your page, or in a CSS file.

Here you can learn more about CSS http://www.w3schools.com/css/

answered Dec 11, 2014 at 22:32

255kb - Mockoon

6,9922 gold badges26 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user4348719 Over a year ago

thanks that worked. I included a '<head><link...></head>' to link to an external stylesheet

255kb - Mockoon Over a year ago

that's probably the best way to do :)

Collectives™ on Stack Overflow

using html and styling within javascript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related