Add template with inline styles to ckeditor


Add template with inline styles to ckeditor



I'm trying to add this html to ckeditor template



Firstly, in assets/javascripts/ckeditor/config.js with


config.allowedContent = true;



I allowed style tags



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



I added the following code




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


Curriculum Vitae


[Name]


[Position]


EXPERIENCIA PROFESIONAL



  • [desde mes año-hasta mes año] [Empresa] / [Cargo]

    • Proyecto [nombreproyecto]:

      • Descripción tareas 1

      • Lista de tecnologías utilizadas






FORMACIÓN



  • [Titulación]. [Centro]. [desde fecha – hasta fecha].

  • Formación adicional: Nota: Cursos fuera del ámbito académico

    • [Mes Año] – [Título curso]. [Centro Educativo]. [Localidad]. Horas: [numerohoras].



  • Certificaciones

    • [Mes Año] – [Título certificación].




IDIOMAS



  • [nombreidioma]

    • Nivel Hablado: [Fluido / Alto / Medio / Bajo]

    • Nivel Escrito: [Fluido / Alto / Medio / Bajo






The default.js (with last template4 Curriculum') it will have:


/**
* @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: '

' +
'

' +
'Title goes here' +
'

' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'
' +
'Table title' +
'
   
   
   
' +
'

' +
'Type the text here' +
'

' +
'
'
},
{
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>' +
'
' +
'

Curriculum Vitae

' +
'

[Name]

' +
'

[Position]

' +
'

' +
'EXPERIENCIA PROFESIONAL' +
'

' +
'
    ' +
    '
  • [desde mes año-hasta mes año] [Empresa] / [Cargo]' +
    '
      ' +
      '
    • Proyecto [nombreproyecto]:' +
      '
        ' +
        '
      • Descripción tareas 1
        • ' +
        '
      • Lista de tecnologías utilizadas
        • ' +
        '
      ' +
      '
      • ' +
      '
    ' +
    '
    • ' +
    '
' +
'

'+
'FORMACIÓN' +
'

' +
'
    ' +
    '
  • [Titulación]. [Centro]. [desde fecha – hasta fecha].' +
    '
    • ' +
    '
  • Formación adicional: Nota: Cursos fuera del ámbito académico' +
    '
      ' +
      '
    • [Mes Año] – [Título curso]. [Centro Educativo]. [Localidad]. Horas: [numerohoras].' +
      '
      • ' +
      '
    ' +
    '
    • ' +
    '
  • Certificaciones' +
    '
      ' +
      '
    • [Mes Año] – [Título certificación].' +
      '
      • ' +
      '
    ' +
    '
    • ' +
    '
' +
'

' +
'IDIOMAS' +
'

' +
'
    ' +
    '
  • [nombreidioma]' +
    '
      ' +
      '
    • Nivel Hablado: [Fluido / Alto / Medio / Bajo]
      • ' +
      '
    • Nivel Escrito: [Fluido / Alto / Medio / Bajo
      • ' +
      '
    ' +
    '
    • ' +
    '
' +
'
'
} ]
} );



The problem is that when I'm in the editor I see the html perfectly but When I save:



The part between the style tags looks like:
enter image description here



Styles are lost because they are not saved correctly


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









By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Comments

Post a Comment

Popular posts from this blog

paramiko-expect timeout is happening after executing the command

paramiko-expect timeout is happening after executing the command Can someone help me why timeout is happening after executing the command .I am trying to SSH to a machine and execute a command.I want to store the result of the executed command . I have referred paramiko-timeout but i didn't get my expected result. import traceback try: import paramiko except ImportError: raise Exception("Please install paramiko , pip install paramiko") import pexpect from paramiko_expect import SSHClientInteraction def main(): HOSTNAME = "minion5.net" USERNAME = "root" PASSWORD = "help@432" PROMPT = "root@*:~$s+" try: client = paramiko.SSHClient() client.load_system_host_keys() client.set_missing_host_key_policy(paramiko.AutoAddPolicy()) client.connect(hostname=HOSTNAME, username=USERNAME, password=PASSWORD) with SSHClientInteraction(client, timeout=20, display=True) as interact: ...
Read more

Opening a url is failing in Swift

Opening a url is failing in Swift breakpointing inside the callback and logging success shows false. I added itms-apps to my plist: LSApplicationQueriesSchemes and put this in my app delegate: func application(_ app: UIApplication, open url: URL, options: [UIApplicationOpenURLOptionsKey : Any] = [:]) -> Bool { return true } func moreTapped() { let url = NSURL(string: "itms-apps://itunes.com/developer/quantum-productions/id979315877") if #available(iOS 10.0, *) { UIApplication.shared.open(url! as URL, options: [:], completionHandler: {(success: Bool) in }) } else { UIApplication.shared.openURL(url! as URL) } } Are you testing on a real device? – rmaddy Jun 21 at 23:57 I try on a device, get "Cannot Connect to App Store". Device is online ...
Read more

Export result set on Dbeaver to CSV

Export result set on Dbeaver to CSV Normally I use Dbeaver for windows and always export my result set like this: run my query --> select the result --> export the result set --> select export to clipboard --> done This step by step puts my result set in my clipboard and I can paste it wherever I want to work with it. The problem is that now I am using dbeaver for mac and this guide is not working. I can go on until the moment that I select my result set like in the image below: exporting data set But once I go further in the process, in the last step I get: no query Note that in "source" it was suppose to show the query that originated the result set, but instead it says just "select. As a result it does't select my result or anything (besides being "successful"). Normally my query would show up there automatically and I couldn't find any option that corrects this problem in the menus. Please help me! Thanks. Aft...
Read more