CkEditor "mystyles.js" href text in a <span>?

[Roych]

Hello,

one question I'm having hard time to get this to work correctly, not even sure if it can be done like this.

I have some custom styles in mystyles.js in ckeditor. All works great except one button. I need:

<a href="#" class="theme-btn btn-style-one style-two"><span>View products</span></a>

I tried:
{ name: 'BUTTON', element: 'span', attributes: { 'class': 'theme-btn read-more' } },

but this gives me:

<span class="theme-btn btn-style-one style-two"><a href="#">All products</a></span>

Any ideas how to achieve this?

Thank you

R

[wbmnfktr]

You can't add additional markup while adding classes with CKEditor - or at least there is no way I know about. (So there are still chances.)
Or at least not in that matter.

Therefore... why do you need this kind of markup at all? Styling?
To achieve this you could write a JS that adds another span for whatever reason.

[Roych]

12 hours ago, wbmnfktr said:

Therefore... why do you need this kind of markup at all? Styling?

Yes for styling, it needs span for the effect to work corectly. I've tried with

{ name: 'BUTTON', element: 'div', attributes: { 'class': 'theme-btn btn-style-one style-two newclass' } },

and

$('.newclass a').wrapInner('<span/>');

which kinda works,

<div class="theme-btn btn-style-one style-two newclass"><a href="#"><span>All products</span></a></div>

but because all is now in a div i have to figure it out how to align the button when clicked on (align-left, right, centered) in ckeditor.

any better idea maybe?

R

[Gideon So]

@Roych ,

Use hanna code and hanna code dialog in a ckeditor field may fits your need.

Gideon

[wbmnfktr]

On 1/30/2022 at 12:18 PM, Roych said:

Yes for styling

Sure we could trick here a bit with CSS but that would be future-proof at all. Therefore... you might try the HannaCode solution @Gideon So mentioned or otherwise add another layer with just JS.

I can't promise anything... but will keep this tough in mind while doing some CSS-work. Maybe... I could come up with something.

On 1/30/2022 at 12:18 PM, Roych said:

but because all is now in a div i have to figure it out how to align the button when clicked on (align-left, right, centered) in ckeditor.

Shouldn't that be easy? I will look into it a bit more at the end of the week, as I have time then. But I guess there should be something possible.

Could you provide a "final result" for what you need or something?
Just drop it in my DMs if it's too "confidential" or similar.

[bernhard]

On 1/29/2022 at 11:10 PM, Roych said:

Any ideas how to achieve this?

You can create a textformatter that adds the <span> to all your links