Using alloy editor in modals

[kkotwal94]

I'm using alloy editor in a text area, within a modal, I was wondering for advice on how to go about this. Basically when a button is clicked a input modal comes up with a POST form, the ckeditor works fine, but the tools such as "+" or when i highlight the text are appearing under the modal. Any suggestions? Should I do something about the tint?

[ipeychev]

If you don't specify where, the UI will render in the body element. In case of modal, the modal will appear on top of it. In this case, you have to render the UI it inside your modal, maybe next to the element you want to edit. You will have to style it probably - at least to set position:relative, but it depends on your markup.

You can specify the element where the UI should be rendered by changing uiNode property, like this:

AlloyEditor.editable('editable', {
    uiNode: 'some-id-or-domelement-here'
});

Hope that helps!

[kkotwal94]

When you mean style it, do you particularly mean set the position of the modal to relative or edit the modals css correct? Or do you mean the ui for the editor itself?

[kkotwal94]

Never mind, I figured it out, you were correct, just edited ocean.css file to get what I wanted, it was set to absolute under toolbar I just set margin's to a static location. However, when if I do it like this im just giving the widget a static location on the screen, if I set it to relative with the modal it dissapears, strange.

I just modified : https://github.com/liferay/alloy-editor/blob/master/dist/alloy-editor/assets/alloy-editor-ocean.css @line60 to relative, my modal div is also position: relative.

[ipeychev]

Okay, great!