将具有内联样式的模板添加到ckeditor

时间：2018-06-29 09:28:03

标签： css ruby-on-rails ckeditor styles ckeditor4.x

我正在尝试将此html添加到ckeditor模板

首先，在资产/javascripts/ckeditor/config.js中使用

config.allowedContent = true;

我允许使用样式标签

然后，在资产/javascripts/ckeditor/plugins/templates/templates/default.js中

我添加了以下代码

<style>
.body {color:#474d5d; font-size: 13px;}
h1 {font-size:18px; font-weight: 400;text-align:center}
h2 {color:#233974; font-weight:700; font-size:14px;border-bottom:2px solid #233974;}
h2 img {width:15px; margin-right: 5px;}
li {margin-bottom: 10px;}
ul.exp, ul.formacion{margin-bottom: 40px;}
.company{border:0px solid black; float:right; margin-bottom:0px; margin-left:0px; margin-right:0px; margin-top:0px; width:150px}
.img-formacion {width: 20px;}
.position{text-align:center; font-size:18px; margin-bottom: 40px;}
.CV {clear:both; text-align:center; font-size:18px;}
.n_1{margin-top: 10px;}
</style>

<div class="body">
<p class= "CV">Curriculum Vitae</p>
<h1>[Name]</h1>
<p class="position">[Position]</p>
<h2>EXPERIENCIA PROFESIONAL</h2>
<ul class="exp">
	<li>[<strong>desde mes año-hasta mes año] [Empresa] / [Cargo]</strong>
	<ul>
		<li class="n_1"><strong>Proyecto</strong> [nombreproyecto]:
		<ul>
			<li class="n_1">Descripción tareas 1</li>
			<li>Lista de tecnologías utilizadas</li>
		</ul>
		</li>
	</ul>
	</li>
</ul>
<h2>FORMACIÓN</h2>
<ul class="formacion">
	<li>[<strong>Titulación</strong>]. [Centro]. [desde fecha &ndash; hasta fecha].
	</li>
	<li class="n_1">Formación adicional: <strong>Nota</strong>: Cursos fuera del ámbito académico
		<ul>
			<li class="n_1"><strong>[Mes Año] &ndash; </strong>[Título curso]. [Centro Educativo]. [Localidad]. Horas: [numerohoras].
			</li>
		</ul>
	</li>
	<li>Certificaciones
		<ul>
			<li class="n_1"><strong>[Mes Año] &ndash; </strong>[Título certificación].
			</li>
		</ul>
	</li>
</ul>
<h2>IDIOMAS</h2>
<ul>
	<li><strong>[nombreidioma]</strong>
	<ul>
		<li class="n_1">Nivel Hablado: [Fluido / Alto / Medio / Bajo]</li>
		<li>Nivel Escrito: [Fluido / Alto / Medio / Bajo</li>
	</ul>
	</li>
</ul>
</div>

default.js（带有最后一个template4课程）将具有：

/**
 * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
 * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
 */

// Register a templates definition set named "default".
CKEDITOR.addTemplates( 'default', {
    // The name of sub folder which hold the shortcut preview images of the
    // templates.
    imagesPath: CKEDITOR.getUrl( CKEDITOR.plugins.getPath( 'templates' ) + 'templates/images/' ),

    // The templates definitions.
    templates: [ {
        title: 'Image and Title',
        image: 'template1.gif',
        description: 'One main image with a title and text that surround the image.',
        html: '<h3>' +
            // Use src=" " so image is not filtered out by the editor as incorrect (src is required).
            '<img src=" " alt="" style="margin-right: 10px" height="100" width="100" align="left" />' +
            'Type the title here' +
            '</h3>' +
            '<p>' +
            'Type the text here' +
            '</p>'
    },
    {
        title: 'Strange Template',
        image: 'template2.gif',
        description: 'A template that defines two columns, each one with a title, and some text.',
        html: '<table cellspacing="0" cellpadding="0" style="width:100%" border="0">' +
            '<tr>' +
                '<td style="width:50%">' +
                    '<h3>Title 1</h3>' +
                '</td>' +
                '<td></td>' +
                '<td style="width:50%">' +
                    '<h3>Title 2</h3>' +
                '</td>' +
            '</tr>' +
            '<tr>' +
                '<td>' +
                    'Text 1' +
                '</td>' +
                '<td></td>' +
                '<td>' +
                    'Text 2' +
                '</td>' +
            '</tr>' +
            '</table>' +
            '<p>' +
            'More text goes here.' +
            '</p>'
    },
    {
        title: 'Text and Table',
        image: 'template3.gif',
        description: 'A title with some text and a table.',
        html: '<div style="width: 80%">' +
            '<h3>' +
                'Title goes here' +
            '</h3>' +
            '<table style="width:150px;float: right" cellspacing="0" cellpadding="0" border="1">' +
                '<caption style="border:solid 1px black">' +
                    '<strong>Table title</strong>' +
                '</caption>' +
                '<tr>' +
                    '<td>&nbsp;</td>' +
                    '<td>&nbsp;</td>' +
                    '<td>&nbsp;</td>' +
                '</tr>' +
                '<tr>' +
                    '<td>&nbsp;</td>' +
                    '<td>&nbsp;</td>' +
                    '<td>&nbsp;</td>' +
                '</tr>' +
                '<tr>' +
                    '<td>&nbsp;</td>' +
                    '<td>&nbsp;</td>' +
                    '<td>&nbsp;</td>' +
                '</tr>' +
            '</table>' +
            '<p>' +
                'Type the text here' +
            '</p>' +
            '</div>'
    },
    {
        title: 'Curriculum',
        image: 'template4.gif',
        description: 'Experience, Education, Languajes',
        html: '<style>' +
            '.body {color:#474d5d; font-size: 13px;}' +
            'h1 {font-size:18px; font-weight: 400;text-align:center}' +
            'h2 {color:#233974; font-weight:700; font-size:14px;border-bottom:2px solid #233974;}' +
            'h2 img {width:15px; margin-right: 5px;}' +
            'li {margin-bottom: 10px;}' +
            'ul.exp, ul.formacion{margin-bottom: 40px;}' +
            '.company{border:0px solid black; float:right; margin-bottom:0px; margin-left:0px; margin-right:0px; margin-top:0px; width:150px}' +
            '.img-formacion {width: 20px;}' +
            '.position{text-align:center; font-size:18px; margin-bottom: 40px;}' +
            '.CV {clear:both; text-align:center; font-size:18px;}' +
            '.n_1{margin-top: 10px;}' +
            '</style>' +
            '<div class="body">' +
                '<p class= "CV">Curriculum Vitae</p>' +
                '<h1>[Name]</h1>' +
                '<p class="position">[Position]</p>' +
                '<h2>' +
                    'EXPERIENCIA PROFESIONAL' +
                '</h2>' +
                '<ul class="exp">' +
                    '<li>[<strong>desde mes año-hasta mes año] [Empresa] / [Cargo]</strong>' +
                        '<ul>' +
                            '<li class="n_1"><strong>Proyecto</strong> [nombreproyecto]:' +
                                '<ul>' +
                                    '<li class="n_1">Descripción tareas 1</li>' +
                                    '<li>Lista de tecnologías utilizadas</li>' +
                                '</ul>' +
                            '</li>' +
                        '</ul>' +
                    '</li>' +
                '</ul>' +
                '<h2>'+
                    'FORMACIÓN' +
                '</h2>' +
                '<ul class="formacion">' +
                    '<li>[<strong>Titulación</strong>]. [Centro]. [desde fecha &ndash; hasta fecha].' +
                    '</li>' +
                    '<li class="n_1">Formación adicional: <strong>Nota</strong>: Cursos fuera del ámbito académico' +
                        '<ul>' +
                            '<li class="n_1"><strong>[Mes Año] &ndash; </strong>[Título curso]. [Centro Educativo]. [Localidad]. Horas: [numerohoras].' +
                            '</li>' +
                        '</ul>' +
                    '</li>' +
                    '<li>Certificaciones' +
                        '<ul>' +
                            '<li class="n_1"><strong>[Mes Año] &ndash; </strong>[Título certificación].' +
                            '</li>' +
                        '</ul>' +
                    '</li>' +
                '</ul>' +
                '<h2>' +
                    'IDIOMAS' +
                '</h2>' +
                '<ul>' +
                    '<li><strong>[nombreidioma]</strong>' +
                        '<ul>' +
                          '<li class="n_1">Nivel Hablado: [Fluido / Alto / Medio / Bajo]</li>' +
                            '<li>Nivel Escrito: [Fluido / Alto / Medio / Bajo</li>' +
                        '</ul>' +
                    '</li>' +
                '</ul>' +
        '</div>'
    } ]
} );

问题是，当我在编辑器中时，我可以完美地看到html，但是当我保存时：

  • 样式标签之间的部分如下所示： enter image description here

  • 样式丢失，因为样式未正确保存

    <p>.body {color:#474d5d; font-size: 13px;}h1 {font-size:18px; font- 
weight: 400;text-align:center}h2 {color:#233974; font-weight:700; 
font-size:14px;border-bottom:2px solid #233974;}h2 img {width:15px; 
margin-right: 5px;}li {margin-bottom: 10px;}ul.exp, 
ul.formacion{margin-bottom:40px;}.company{border:0px solid black; 
float:right; margin-bottom:0px; 
margin-left:0px; margin-right:0px; margin-top:0px; width:150px}.img- 
formacion {width: 20px;}.position{text-align:center; font-size:18px; 
margin-bottom: 40px;}.CV {clear:both; text-align:center; font- 
size:18px;}.n_1{margin-top: 10px;}</p>

<div class="body">
<p class="CV">Curriculum Vitae</p>

<h1>[Name]</h1>

<p class="position">[Position]</p>

<h2>EXPERIENCIA PROFESIONAL</h2>

<ul class="exp">
 <li>[<strong>desde mes año-hasta mes año] [Empresa] / [Cargo]</strong>

 <ul>
    <li class="n_1"><strong>Proyecto</strong> [nombreproyecto]:

0 个答案:

没有答案
相关问题
最新问题