Skip to main content
  Tuesday, November 28 2017
  6 Replies
  2.6K Visits
  Subscribe
Empty tags are removed. <<< bad!

For example, to add Font Awesome symbol characters, in Source view one adds:

<em class="fa fa-warning" style="font-size: 60px; color: orange; border: 3px solid orange; border-radius: 60px; padding: 7px 7px;"></em>

Notice there is NO CHARACTER to emphasize in the <em> tag. The character is add purely by CSS.

HOWEVER, upon switching to WYSIWYG then back to Source view, the ENTIRE <em> tag is deleted!!! Now, that's extremely helpful, now, isn't it! >:-P

The whole purpose of using an empty tag like <em> or <i> or <span> is to NOT have an unwanted character "hard coded" in. No, I can't use a  , because it ADDS a SPACE character that UPSETS the CSS styling that creates a circle border around the FA icon character. A non-blanking space turns the circle into an oval, due to the width of the character.

Is there a line in a DropEditor core file that I can alter to prevent it from checking for and removing empty tags?
A
6 years ago
Hi,

Thanks for contacting us here about this extension.
Is there a line in a DropEditor core file that I can alter to prevent it from checking for and removing empty tags?

You can go to file config at {root}media/dropeditor and add this code:

CKEDITOR.dtd.$removeEmpty["i"] = false;

i - is tag you want.

Hope it helps!
Cheers,
D
6 years ago
Sorry for the late response... nearly forgot about this post. My work around during that time was to copy/paste code from a page displayed in a browser that hadn't ever been edited by DropEditor (otherwise the html would've been deleted when article was opened in editor), then putting the invisible character (alt code 0173) inbetween the <em> tags.

However, this is tedious. So I came looking for a solution and found my own post here. Silly me. Thanks for responding... of the TWO config files in the path specified (config.json and config_p1.js), the javascript file appeared to be the valid place to put code in, but when I did, either within the function { } or outside per below, neither position worked. An article or html module opened for edit had their empty <em> tags deleted.


CKEDITOR.editorConfig = function( config ){
config.toolbar_1 = [
['Droppics'],['Dropfiles' ],['Droptables'],
'/',
{name: '00', items: ['Maximize','Undo','Redo','PasteFromWord']},
{name: '01', items: ['JustifyLeft','JustifyRight','JustifyCenter','JustifyBlock','Indent','Outdent','BulletedDropList','NumberedList','Blockquote']},
{name: '02', items: ['Bold','Italic','Underline','Subscript','Superscript']},
{name: '03', items: ['SpecialChar','Buttons','Templates','Image','Table','HorizontalRule']},

'/',
{name: '10', items: ['Source','Preview']},
{name: '11', items: ['TextColor','BGColor','Font','FontSize','GgFonts']},
{name: '12', items: ['JLink','Anchor','Unlink']},
{name: '13', items: ['Styles','Format']},
{name: '14', items: ['Find','Replace']},

];
config.removeButtons = 'About,Anchor';
config.format_tags = 'p;h1;h2;h3;pre';
config.removeDialogTabs = 'image:advanced;link:advanced'
config.allowedContent = true;
config.entities = false;
config.skin = 'material';
};
// OUTSIDE OF FUNCTION
CKEDITOR.dtd.$removeEmpty["em"] = false;
CKEDITOR.dtd.$removeEmpty["i"] = false;



CKEDITOR.editorConfig = function( config ){
config.toolbar_1 = [
['Droppics'],['Dropfiles' ],['Droptables'],
'/',
{name: '00', items: ['Maximize','Undo','Redo','PasteFromWord']},
{name: '01', items: ['JustifyLeft','JustifyRight','JustifyCenter','JustifyBlock','Indent','Outdent','BulletedDropList','NumberedList','Blockquote']},
{name: '02', items: ['Bold','Italic','Underline','Subscript','Superscript']},
{name: '03', items: ['SpecialChar','Buttons','Templates','Image','Table','HorizontalRule']},

'/',
{name: '10', items: ['Source','Preview']},
{name: '11', items: ['TextColor','BGColor','Font','FontSize','GgFonts']},
{name: '12', items: ['JLink','Anchor','Unlink']},
{name: '13', items: ['Styles','Format']},
{name: '14', items: ['Find','Replace']},

];
config.removeButtons = 'About,Anchor';
config.format_tags = 'p;h1;h2;h3;pre';
config.removeDialogTabs = 'image:advanced;link:advanced'
config.allowedContent = true;
config.entities = false;
config.skin = 'material';

// INSIDE FUNCTION
CKEDITOR.dtd.$removeEmpty["em"] = false;
CKEDITOR.dtd.$removeEmpty["i"] = false;
};


So, am I doing it right and if so, any idea why the editor is still stripping out these empty tags?
A
6 years ago
Hi,

Thanks for your response.
The code OUTSIDE OF FUNCTION is correct. You should clean cache after editing.
Our latest version includes i and span tag by default.

Hope it helps!
Cheers,
D
6 years ago
Thank you! Those two bits of info worked.
D
6 years ago
Just did the upgrade to 2.3.2 through the joomla update system and confirmed that Dropeditor is at 2.3.2. However, when I go to System > Global Config > Dropeditor or to Component > Dropeditor > Profiles > Default > Editor Tools, I do not see any options to enable/disable or to add/change the html tags not to be deleted when empty. If this ability was not implemented, then please do add such to global config or editor tools. Thanks.
A
6 years ago
Hi,

Thanks for your feedback.
options to enable/disable or to add/change the html tags not to be deleted when empty

Yes, DropEditor doesn't have that parametter now, we will note that in mind for a future release!

Thanks a lot!
Regards,
  • Page :
  • 1
There are no replies made for this post yet.