javascript - 在 javascript 中使用 html 和样式

Question

你好，我正在构建一个 flask 网络应用程序，并在其中包含一个名为 ckeditor 的网络文本编辑器。 我想出了如何通过修改名为 default.js 的文件将自定义简历模板包含到我的应用程序中。我认为任何对 javascript 了解很多的人都可以帮助我，而无需了解 ckeditor 的具体细节

我的问题是我想设置 html 的样式，例如 h1 标签中的名称等，但我不确定该怎么做。 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>'


        }
    ]
});

Answer 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> 中页面或 CSS 文件中的 HTML 元素。

在这里您可以了解有关 CSS 的更多信息 http://www.w3schools.com/css/