CKEditor and <del> tag

[pwired]

Hi,

I am using a typewriter effect for a headline text. I use Hanna Code to output the typewriter code in the body field.
The typewriter effect is working ok. The thing is that part of the Hanna Code output is text between <del> tags.
This is because the typewriter effect is working with <del> tags.
The problem is that CKEditor is interpreting <del> tags as "deleted" text and now the text between these <del> tags
appear as striked text (a line going through the middle of the text). This becomes now unwanted CKEditor behaviour
as the text must appear not striked.

I looked everywhere where I can modify CKEditor to make it stop text between <del> tags appear as striked text.

Anyone know where to modify CKEditor for this or any solution for this ?

 

[horst]

Whats about your own styles for CKE, maybe with one or two "!important"?

(Via CKE-Custom-Styles, or via AOS or via Admin Custom Files)

[pwired]

Ok, to avoid CKEditor recognizing the typewriters <del>  </del> tags as "strikethrough" text
I have setup a field with a name: bodytext and as a Type: "Text" so it doesn't use CKEditor.
Under the TAB Details I selected again Hanna Code Text Formatter for this field.

Also in this case the typewriters output text between it's <del> </del> tags, again appear as text with "StrikeThrough"

How is this possible without CKEditor in use but only Type: Text ?

 

[BitPoet]

52 minutes ago, pwired said:

Also in this case the typewriters output text between it's <del> </del> tags, again appear as text with "StrikeThrough"

How is this possible without CKEditor in use but only Type: Text ?

Because that is how browsers render the del tag. Most (all?) display the contents within del tags like this and the contents of insert tags underlined. IMHO, using the del tag for that typewriter animation script is a poor choice since DEL is a very semantic element. You could work around this by following @horst's suggestions or switch to a different typewriter script that lets you specify your target element dynamically (through a class or id).

[pwired]

Ok,

Thanks for your replies.

Yes there are other typewriter scripts out there.
Thing is I like this script because for one reason it is smart coded together in only 8 kB
and it opens up a lot of possibilities.

If anyone is interested in it for one of your projects, you can find it here: https://mntn-dev.github.io/t.js/
(no affiliate, mit-license, only wanting to show cool stuff) and here: https://www.youtube.com/watch?v=39NZDe95_g0

Ok,
I contacted the coder of the script and he was kindly enough to reply and give a few solutions:
one working solution in my main.css

del {
    text-decoration: none;
}

And guess what, now I have it working in the CKEditor body field ?

Edit:
Instead of overriding globally in my main.css
I override it locally directly in the hanna code snippet
This sets it actually to: problem solved.

Remains the overrides not working in the quirky behaviour
of mystyles.js and config-body.js files, see below.

=================================================================================================

I am already happy with the solution above, but I am not satisfied yet.
I was digging through the forum because I remembered a few posts about mystyles.js that reside in
site/modules/InputfieldCKEditor/mystyles.js

If you have the Button Styles enabled in the Toolbar of CKEditor,
it should be possible to put inside mystyles.js the same override, right ?

/**
 * mystyles.js
 *
 * This file may be used when you have "Styles" as one of the items in your toolbar.
 *
 * For a more comprehensive example, see the file ./ckeditor-[version]/styles.js
 *
 */

CKEDITOR.stylesSet.add( 'mystyles', [ 
 { name: 'Inline Code', element: 'code' }, 
 { name: 'Inline Quotation', element: 'q' },
 { name: 'Left Aligned Photo', element: 'img', attributes: { 'class': 'align_left' } },
 { name: 'Right Aligned Photo', element: 'img', attributes: { 'class': 'align_right' } },
 { name: 'Centered Photo', element: 'img', attributes: { 'class': 'align_center' } }, 
 { name: 'Small', element: 'small' },
 
 { name: 'Deleted Text', element: 'del', attributes: { 'text-decoration': 'none' } }, 
 
 { name: 'Inserted Text', element: 'ins' },
 { name: 'Cited Work', element: 'cite' }
] );

I would like to have it working there also, but it doesn't work there and I have read a few posts that
for some reason you have to rename the file mystyles.js to make it work in CKEditor ?

https://processwire.com/talk/topic/17862-share-your-ckeditor-settings/

======================================================================================

Besides the file mystyles.js there is the file config-body.js

I tried the following in this file config-body.js

CKEDITOR.editorConfig = function( config ) {
	// Define changes to default configuration here. For example:
	// config.uiColor = '#AADC6E';
	   
        CKEDITOR.config.coreStyles_strike =
    {
        element : 'del', attributes : { 'text-decoration' : 'none' },
    };	   
};

But same as with the mystyles.js here also it doesn't work with CKEditor