Widget won't open selections

[kkotwal94]

I'm having a hard time figuring out why when using Alloy Editor, the + widget won't open the selections just like in the demo.

I'm using this with ReactJS, and this is the alloy-editor-all.js file. I've used the no-react file as well. I'm assuming its just a jquery/javascript issue but can't figure it out.

[ipeychev]

It is hard to guess, could you submit some reproducible example?
If not, then check if there are some exceptions. Also, check if the widget is being rendered, but not visible in your app for some reason (like conflicting CSS).

[kkotwal94]

Here is the HTML:
https://github.com/kkotwal94/ReportProcessor/blob/master/views/addform.ejs

Here is the React JSX:
https://github.com/kkotwal94/ReportProcessor/blob/master/public/addForm.jsx

Error I get in console when referring to jquery.js
Uncaught ReferenceError: CKEDITOR is not defined.

It seems as the button was rendered, I clicked inspect element on it, and it was found. When I highlight text the other toolbar with text option does appear and function.

[ipeychev]

The code I cannot run, because it depends on your system, but here are some comments:

1. Looking here, better use the version without React - you already include React in your code. Also, can you check if all files are being transferred successfully? Use the network tab in the Developer tools of your browser.

<script src="/build/JSXTransformer.js"></script>
<script src="/build/react.js"></script>
<script src="views/js/bootstrap.min.js"></script>
<script src="views/js/scripts.js"></script>
<script type="text/jsx;harmony=true" src = "../public/addForm.jsx"></script>
<script src="../views/alloy-editor/alloy-editor-all.js"></script>

2. Are you trying to initialize the editor for an textarea?

 <textarea class = "ckedit" id = "ckedit"></textarea>

Better do it with a div, which has "contenteditable" attribute.

3. About this:

Error I get in console when referring to jquery.js
Uncaught ReferenceError: CKEDITOR is not defined.

What you mean with "referring to jquery.js"?

If CKEDITOR is not defined, it is hard for me to imagine how the other Toolbar would work. On theory that shouldn't be possible. CKEditor is the engine and it is needed for both toolbars. If you click on some of the buttons in the other Toolbar, does the selection change? Does it become bold, italic; can you create links, etc.?

[kkotwal94]

Removed the error, the text area ckeditor line was useless code that i removed sorry about that. All files do sucessfully make it, however on the other toolbar the selection does change, everything is functional but the hyper link one, the twitter one works.

[ipeychev]

Okay. Can you do one of these, please:

1. To prepare a zip with reproducible code and working code.
2. To expose a running version of your site, so we will be able to take a look.

I hope you understand - without a way for us to run or at least to see your code running, there is no way to guess what exactly is going on.

[kkotwal94]

Yea, you can download the zip here : https://github.com/kkotwal94/ReportProcessor

[kkotwal94]

I'm playing around with the css right now and trying to see if that is the case.

[ipeychev]

No, sorry, I meant a zip with the simplest possible set of files based on which we can reproduce the issue.

[kkotwal94]

https://www.dropbox.com/s/tmyvjrc2vt9rbbz/test.zip?dl=0

I reproduced it,

Files/
server.js
alloy-editor
build/
react.js
jsxtransformer.js
views/
addForm.ejs
js/
css/
public/
addform.jsx

In this smaller case, I still cannot get it to work, however in the demo I download from the site it works perfectly well.

[kkotwal94]

https://www.dropbox.com/s/4s32xqadz3769mf/test2.zip?dl=0

Here is even a simpler version without nodejs, its gotta be opened in firefox though, since chrome will fail to send a XHTMLRequest

[ipeychev]

Great, thanks!

We will debug it and get back to you.

[jbalsas]

I've been able to pin down the issue to the <input /> tags that are being rendered in the outer component in the provided demo.

With that, I've been able to reproduce it by itself in this branch https://github.com/jbalsas/alloy-editor/tree/AE-263-Exclusive_issue

See https://github.com/jbalsas/alloy-editor/commit/e029540c0edbd960ffbd563f1cdebcf7f9ae90ad#diff-bd0ecc160f0561e233116e3bb8bffc5fR9