GetSimple Support Forum

Full Version: CKEditor extended features
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Hi all,

looking for a way to extend CkEditor's features, is it possible within GS 3.1.2?

I already have a setup In gsconfig.php / define('GSEDITORTOOL', 'advanced'); /

but I would like to have a 'Template" button too (like on ckeditor.com/demo#full).

Any comments?

Cheers

Alex
Alex,

why should it not be possible? I will go and find out for you, I did at the german website.

After breakfast, ok?

Alex, see how you can manage it:

1)
the standard editor installation already contains the editor-plugin "templates" in the directory /admin/template/js/ckeditor/plugins

2)
you have to activate that plugin.

2a)
define the path to a custom config-file for the editor:

Code:
define('GSEDITOROPTIONS', "customConfig : '../../../../theme/gs.js',skin: 'getsimple'");

this example defines the custom-config-file gs.js in the folder /theme plus the skin for the editor

2b)
activate the extra-plugin "templates" in that custom-config-file, I stripped off all other definitions...
Code:
CKEDITOR.editorConfig = function( config )
{
    
    config.extraPlugins = 'fileicon,video,syntaxhighlight','templates',
    };

3)
when this is done, you have to define the templates which you want to use:

3a)
activate the templates-icon in gsconfig.php in "editortools":

Code:
define('GSEDITORTOOL',"['Source','Cut','Copy','Paste','PasteText','PasteFromWord','Undo','Redo','Find','Replace','SelectAll','RemoveFormat'],
    '/',
    ['Bold','Italic','Underline','Strike','Subscript','Superscript','JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
    ['TextColor','BGColor','Rule','PageBreak'],['NumberedList','BulletedList','Outdent','Indent'],
    '/',
    ['Blockquote','Smiley'],['Link','Unlink','Anchor'],
    ['Image','Flash','video','fileicon','Table','HorizontalRule','SpecialChar'],
               '/',
    ['Styles','Format','Font','FontSize'],['ShowBlocks'],['Code'],['Templates']
    ");
3b)
there is a file default.js already in the folder /admin/template/js/ckeditor/plugins/templates/templates which contains already definitions

3c)
to show better the structure of this file, where the definition is joined together and by this quite unreadable, I cut the definition into a readable form:

Code:
CKEDITOR.addTemplates('default',

{imagesPath:CKEDITOR.getUrl(CKEDITOR.plugins.getPath('templates')+'templates/images/'),

templates:[
{title:'Image and Title',
image:'template1.gif',
description:'One main image with a title and text that surround the image.',
html:'<h3><img 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 colums, 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><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>'}
]
}
);

3d)
you can delete these examples and add your own definitions, here is the definition from our installation at get-simple.de:

Code:
// 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: 'Hinweis',
image: 'lightbulb.gif',
description: 'Hinweis mit Glühbirne',
html:
    '<p class="hinweis"><strong>' + '<img alt="enlightened" class="ohne-border" height="20" src="http://www.get-simple.de/admin/template/js/ckeditor/plugins/smiley/images/lightbulb.gif" title="enlightened" width="20" /> Hinweis</strong>: ÜberschreibediesenText.' + '</p>'
},
{
title: 'In der Presse',
image: 'newspaper.png',
description: 'Für die Presseliste',
html:
    '<H2>ÜberschreibediesenTextmitTitel</h2>' + '<p>LinkzuArtikel</p>'
},


{
title: 'DefinitionList',
image: 'definitionlist.gif',
description: 'Zum Erzeugen von Definition-Listen.',
html:
    '<dl>' + '<dt>Begriff' + '<dd>Erklärung</dd>' + '</dl>'
},
{
title: 'Definitionlisten-Eintrag',
image: 'definitionlist.gif',
description: 'Um weitere Definitionen einzufügen',
html:
    '<dt>nochein Begriff' +
    '<dd>noch eine Erklärung</dd' + '</dt>'
}

]
});

3f)
each template needs_
- title
- image
- description
- html for the output

4)
4a)
when you have defined all this, you will see a symbol for templates:
[Image: editortemplatesymbol.jpg]

4b)
click on this symbol and you will see the defined templates to choose from:
[Image: editortemplates.jpg]

4c)
click on one of these templates any you will get the code into your write-aread:
[Image: editortemplate.jpg]

4d)
in our case the template creates a info-message, and it contains already some dummy-text "überschreibediesentext", so it is easy to click on this dummy-text and write your own text

if this info helps you and is clear, we can add it to the WIKI ;=)
Hi Connie,
great post and great help!!! Thanx!

Let me first try to implement it, then I'll come back here with a feedback,

Cheers,

Alex
Hi Connie,

this mod work like a charm,

Once again - thanx!

Alex
Hi,
I was reading this post beacuse I was looking for a method which prevents CK Editor to strip out empty anchor tags.
For example, if you're using iconic fonts you would need to use something like: <i class="icon-something"></i>, but when CKEditor renders this code the empty anchor tags are removed and the effect is lost.
I saw the $removeEmpty field in the dtd, but didn't see the neither the 'i' nor the 'a' tag in that list, nor did it work when trying to add it. Any help would be appreciated.
Thank you in advance.
paste a non breakable space code inside the tag
(2013-02-08, 04:21:38)yojoe Wrote: [ -> ]paste a non breakable space code inside the tag

I did it, but it does not work.
A string like <i class="icon-something">&nbsp;</i> is completely stripped off when rendering the page. At least this is what happens with my CK Editor configuration, and this is why I was wondering if someone has a different configuration and how to do to activate it.
Thanks.
well, I see no sense in pasting a nonbreakingspace into the posts... that is the opposite of "Get Simple" ;=)

but I can't help in the moment, but have a look at the Editor Documentation:

http://docs.ckeditor.com/#!/api/CKEDITOR...mptyBlocks
The sense of it is to try (just as a test) to find something useful to avoid that the Editor removes empty tags. But, indeed, it didn't work.

Spans and divs, iconic fonts and other tags, sometimes are left blank (but targeted by the CSS) with the aim to build a better architecture or design of the website.
Since the editor removes empty tags, the whole design needs to be re-thinked and rebuilt in order to obtain the same thing. And this, in my view, is the opposite of "Get Simple"... :=)

Thanks for the link, I will give a look at it.

Cheers
Gianpaolo
(2013-02-08, 19:57:19)GPB61 Wrote: [ -> ]Spans and divs, iconic fonts and other tags, sometimes are left blank (but targeted by the CSS) with the aim to build a better architecture or design of the website.
Since the editor removes empty tags, the whole design needs to be re-thinked and rebuilt in order to obtain the same thing. And this, in my view, is the opposite of "Get Simple"... :=)

In my opinion the user using the WYSIWYG editor should not be concerned with anything than the content - enter the text, specify which type of paragraph - h1, h2, p, ul/li, maybe special formats selectable from the dropdown. The formatting should be done by CSS and it should work on the pure content and not assume additional divs, etc.

However, if you really want to add some "weird" empty tags or the like, you can create components containing this HTML. The components should be named by their functionality e.g. "info-icon".
Then install the Dynpages plugin and add the placeholders in the editor.

Example:
  • component icon (using parameters args):
Code:
<?php global $args; ?>
<i class="icon-<?php echo $args[0]; ?>"></i>
  • example content, WYSIWYG:
Code:
This is a text with a help icon: {% icon help %}

This will produce this HTML:
Code:
<p>This is a text with a help icon: <i class="icon-help"></i></p>
(2013-02-08, 19:57:19)GPB61 Wrote: [ -> ]Thanks for the link, I will give a look at it.

Cheers
Gianpaolo

Gianpaolo, you find all necessary info if you want to define this with the CKEditor-configuration in our WIKI, f.e. here: http://get-simple.info/wiki/how_to:editor_configuration

but check if the custom fields will not do better, like mvlcek described!
Thanks to both for your replies.
I tried mvlcek's methods and it actually works but, unfortunately, it can not be used for my purposes because I do not need to insert it onto the content pane but onto the source code.
I probably badly explained what I wanted to say and perhaps it is not about GK Editor but rather on GS.
Indeed, I'm not talking about what a user is supposed to write on a page. I agree that he does not have to add any empty tag, or no tags at all. What I'm saying is referred to the creation of templates, on which the final user will have to add his contents (not empty tags... :-)).
As you know, creating a template, sometimes you can use spans, divs or iconics with the aim to obtain a specific look or a particular structure. They do not have to be filled with content, they're just placeholders for giving appropriate spaces, or to beautify with resizable icons for responsive design, or to allow effects of overlaying, etc. etc. Eventually, these placeholders must be targeted by the css in doing their function.
Now the problem is that all these tags are part of the html structure to be rendered, even if the final user add content onto an (apparently) blank page. And when CK (or perhaps GS, I actually do no know) renders the html, it strips off the empty tags and breaks the structure of the template.
This is why I was looking for a method to prevent this to happen. Until now I didn't find something useful but I will look more carefully on the next days and, of course, I am always open to your suggestions and ideas.
Thanks a lot for all your help
Best
Gianpaolo
As a closure of this discussion, I would like to report the results of my extensive search for a solution of this CKeditor problem.
Actually it looks like there is a huge list of developers with the same problem but, unfortunately, no one of the proposed solutions (at least for GK 3.x) are fully solving the issue. Indeed, the most considered one is filling empty tags with non breaking spaces (CK editor empty tags). However, from the designer point of view, in some cases this can be even worse than removing the whole tag.
Some others are proposing plugins which may be present or not onto the CK editor you're currently using. For instance, some of them are not usable on the CK settings mounted on Get Simple.

Well, in the conclusion I found that a trick does the job (and I feel very stupid not to have thought to it...)!

If I add an empty div using HTML source mode:
<div style="background-color:#666;width:50px;height:50px;"></div>
...then turn off source view, do some edits via WYSIWYG mode, and then switch back to source mode: the div is deleted from the source when I go back to source mode.

Inserting a comment into the div will prevent it from being deleted:
<div style="background-color:#666;width:50px;height:50px;">
<!--empty-->
</div>

I understand that this is not an elegant way to solve the issue but since it is quite effective I will go for it.

Best!
Gianpaolo
Gianpaolo,

this is really a quickanddirty-solution, unfortunately

I like the editor, but sometimes I get lost as well, unfortunately the forum posts at ckeditor.com are stay nearly always unanswered... like shouting in a dark forest...

I am glad you found a solution for you, but don't forget to write it down in your documentation ;=)
(2013-02-09, 18:20:16)GPB61 Wrote: [ -> ]Inserting a comment into the div will prevent it from being deleted:
<div style="background-color:#666;width:50px;height:50px;">
<!--empty-->
</div>
This is a nice trick!

Thanx for sharing

Quote:In my opinion the user using the WYSIWYG editor should not be concerned with anything than the content - enter the text, specify which type of paragraph - h1, h2, p, ul/li, maybe special formats selectable from the dropdown. The formatting should be done by CSS and it should work on the pure content and not assume additional divs, etc.


Agree here with Mvlcek



Alex
Hello!

Three years after...

Is there already another solution for empty tags being removed by CK Editor??

I decided to disable the editor and am working with the raw HTML code, but I would like to ask you: is there a way to replace the normal text area where the raw HTML code appears with the same code editor that is used for editing templates, etc.?

Looking forward to your answers,