Forum Academy Marketplace Showcase Pricing Features

Help on JS with CKEditor

I don’t do JS, so my js stuff might just suck totally ._.

I’m trying to use CKEditor in an app, so I did find a way to put it in, but when I try to take some data out for the HTML into Bubble (through the JS to Bubble from Toolbox), Bubble reports an “unexpected” error. I tried following some advice from this post, but there’s still problems. Thanks in advance!

It’s a bit hard to help with no information… Perhaps an access to your editor, screenshot of the error message and more info on what type of data you want to pass to Bubble would help.

Hi @ikkyu1755,
Did you tried Ckeditor plugin or by custom js ?

Whoops forgot the editor link: https://bubble.io/page?id=testingsomestuff
sorry ._.

I needed the equation editor, the plugin isn’t customizable as far as I know.

Hi @ikkyu1755,
I have added math plugin to ckeditor,


PLease checkout the above url, if it is work fine then, will upadte.

Made it work, have a look. I added a third button with my name. When you click on it, input’s content is extracted and displayed below.

There were 2 issues:

  1. You checked the box “Display as an iFrame” which creates a page inside a page and prevent javascript code accessing the HTML textarea.

  2. When unchecking the de previous option, the CKEDITOR wouldn’t load. That was because the browser tries to run the command CKEDITOR.replace( ... ) before the distant script would load. So I added the command into a loop that checks if the CKEDITOR function exists before running it.

So the only changes I made is the addition of a button + workflow, and the loop in the HTML element.

Umm, maybe out of the original question, but when I edit the text the new text won’t return? I tried writing other stuff and it still shows the placeholder text “to be replaced by…”.

(Btw thanks!)

I still have problems with equations sadly ._.

I’m not sure if this is doable, but letting users customize by adding plugins and/or using themes would be amazing. (No worries, your plugin is already amazing, thx for making it free also TvT)

It appears that the command CKEDITOR.replace creates an iFrame with the editor in it. So when you edit the text, it’s not in the original textarea input so this is why you always get the placeholder.

At this point, I suggest you invest some serious time into CKEDITOR’s documentation to get a solid understanding of how it all works. Maybe they provide some command like CKEDITOR.getValue().

Hi @testingwebdev2016, is there a way to add a dropdown with a list of fields users could merge into the HTML editor? See the screenshot below for an example.

Thanks,
Cole

Hi,

Yes, we can. but it takes some time.

1 Like

Push this changes. Kinldy please get it.
You need to provide the text which is want to append the text into editor. but this will not update the values from the your database. this is static content {#SAMPLE1#} so you need to replace when you are showing this html content into original view/page.

1 Like

Hi @testingwebdev2016, I just installed the update and the editor isn’t showing up in the test environment. I’ve tried deleting and replacing with the CKEditor again with no luck. Any suggestions? The element is visible on page load.

try at,
https://testnew111.bubbleapps.io/version-test/ckeditor/Lorem%20ipsum…?debug_mode=true
Added new field in the editor called “Append Fields” and values are “SAMPLE1###SAMPLE2###SAMPLE3

Where do I ad the Append Fields in the editor?

When I place the editor on the page and preview in my test environment, the editor is not visible. I have the element visible on page load. The element is visible when on version 2.5 but not 2.6.

Hi,
Please update your plugin version from Plugins -> HTML CKeditor version from 2.5 to 2.6

and try to reload your app editor on browser

1 Like

Thanks, it appears to be an issue with Bubble. I cleared my cookies and cashed data and it’s working perfectly. Thanks for adding the Appended Fields!