Add template with inline styles to ckeditor

apradillap commented 6 years ago

Type of report

I have these templates (plugin templates):

And then, In assets/javascripts/ckeditor/plugins/templates/templates/default.js

/**
 * @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>'
    } ]
} );

I select last tag but the code is not saved correctly

Provide detailed reproduction steps (if any)

I'm trying to add the last template
Firstly, in assets/javascripts/ckeditor/config.js with
```
config.allowedContent = true;
```
I allowed style tags
I see the html tags perfectly
I save the content of the editor in a database
The code is not saved correctly (see actual result)

Expected result

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

Actual result

<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]:

When saving to database (MySQL), replace style tag with p tag

Other details

Browser: …
OS: macOS High Sierra 10.13.5
CKEditor version: 4.8
Installed CKEditor plugins:
- a11yhelp
- about
- base64image
- codesnippet
- colordialog
- dialog
- div
- find
- flash
- forms
- iframe
- image
- link
- liststyle
- magicline
- pagebreak
- pastefromword
- preview
- scayt
- showblocks
- smiley
- specialchar
- table
- tableselection
- tabletools
- templates: plugin related with bug
- widget
- wsc

Thanks!!

engineering-this commented 6 years ago

Hello.

CKEditor is a content editor, not Html editor, and we don't support <style> tags, although with allowedContent = true your code should work as you expect. After testing it I can't confirm your issue. I've added your template, and allowedConfig. When calling editor.getData() it returns content with <style> tags unchanged unlike in your case.

Could you provide sample with reproducible issue on JS sandbox like codepen.io or jsfiddle.net, so we could investigate that issue?

mlewand commented 6 years ago

Hi, It's been a while since we last heard from you. We're closing this issue for now. Still, feel free provide us requested feedback, so that we can reopen this issue.

ckeditor / ckeditor4