在javascript中使用html和样式

时间:2014-12-11 20:00:19

标签: javascript html css ckeditor

您好我正在构建一个烧瓶Web应用程序,并在其中包含一个名为ckeditor的Web文本编辑器。 我想出了如何通过修改名为default.js的文件将自定义简历模板包含到我的应用程序中。我想任何了解javascript的人都可以帮助我,而不知道ckeditor的具体细节

我的问题是我想在h1标签等中设置html,例如name,但我不知道如何做到这一点。 default.js文件使用javascript数组来呈现模板。我如何将css样式表链接到我在default.js中的html,并实际对其进行样式设置。任何帮助将不胜感激!

这是我在default.js中的脚本,它当前呈现一个模板

// 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>'


        }
    ]
});

1 个答案:

答案 0 :(得分:1)

您可以像使用CSS的任何其他HTML元素一样设置这些元素的样式,方法是直接定位HTML标记,或者将CSS类添加到default.js文件中的HTML代码中,如下所示(注意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>'
    }
]

您的CSS可能如下所示:

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

您可以将其直接放在页面中的<style> HTML元素中,也可以放在CSS文件中。

在这里,您可以了解有关CSS http://www.w3schools.com/css/

的更多信息