Debugging Buttons added to the Built-in CKEditor (4.x)

[sibomots]

Scenario:

In 4.x system.

Changing behavior of the Built-in editor by adding button to tool bar.

The button applies the HTML specified to the selected content (applies `{option}` and `{content}`.

I am noticing an outcome that causes concern.

After applying a change to the HTML to use for the button, the editor's behavior for that new button is not current with the defined HTML

For example (abbreviated use case)

• ACP > Customize Editor > Add Button
• Give it a name, icon, enter HTML 

<div style="background-color:#{option}; 
            padding: 12px 8px 12px 8px; 
            border: 1px solid #DDD; 
            margin-left: 0 auto; 
            text-align: left; 
            text-indent: 5px; 
            color: #fff; ">{content}</div>   

• Upon creation, the button applies that HTML to the `{content}` and `{option}`.
• Then if I made adjustments too the HTML.
• RELOAD the public facing forums site page.
• Post a new sample in a new topic post after changing the HTML for the button.
• Use the button, the HTML is the old version not the updated HTML.

There's a lag (?) between the HTML updated for the button to be effective.

Or there are instances where the updated HTML is never applied to the button behavior.

I can debug this if I knew where the DB stores the HTML to inspect if it was indeed saved when I customized the button.

Where does the DB store the HTML for the custom button?

If I can debug this I can debug this.  But it's unclear why the ACP adjustments don't stick in the system.

 

 

[sibomots]

Correction, the style is actually in single quotes, not double quotes, but the forum (here) won't let me edit the typo.

Should read:

 style=' attribute:value;  etc..' ..

 

 

[opentype]

Don’t add hard-coded styling to posts. Add CSS classes to your theme and then call them with the custom button. Clean, simple and global. 

You will also have to white-list your classes in the editor settings. 

[sibomots]

That's a minor implementation detail of how.  Don't worry,  I grok the impact.  But, that wasn't really the question.

The question was where does it store the "HTML" when creating the custom button.

I'm expecting the same song and dance from IPS that "we don't discuss how things work because..."  which is their prerogative, but it makes it excruciatingly hard to debug behavior of the system.   Trial and error debugging is a waste of time.  I want to see where it stores it so I can ascertain where the problem is.

re: your answer -- Yes, I agree that the best solution is simply a <div class="foo">{content}</div>   But that's (again) an implementation detail. 

The fact that the change to the button behavior lags (or simply does not stick) long after changing the button behavior is what concerns me.

Thanks.

 

Edited July 3, 2022 by sibomots

[Nathan Explosion]

All plugins are in applications\core\interface\ckeditor\ckeditor\plugins\ - custom ones are cunningly named custom-.......

[sibomots]

46 minutes ago, Nathan Explosion said:

All plugins are in applications\core\interface\ckeditor\ckeditor\plugins\ - custom ones are cunningly named custom-.......

Not a custom plugin.

A custom button added to the Built-in Editor.   Raw plain vanilla 4.x.  No special sauce.

What DB table stores the values of the HTML assigned for the custom button?

 

Ah my bad.  It's in the jabbascript.

nevermind. geez.

 

[Nathan Explosion]

Yeah, a custom button IS a plugin.

[sibomots]

That does help explain a little of the latency issue.  The site is CF proxied and I'm trying to rule out that the proxy cached the stale jabbascript.  That partially explains it.

Thanks for the help.