Hi,
Any possibility to work it in Vaadin 14 Dialog? Actually we need to tinymce or ckeditor on vaadin 14 with template and Dialog.
Thanks
Bishwajit Barua
Its very easy actually.
You just wrap your editor component in a div component and put that in the dialog.
Hi, your solution seems not working.
Are you sure ? i’m looking for a solution.
Thanks
Well, my code is this (with a title row above and a button row below):
Dialog dialog=new Dialog();
dialog.addStyle("Dialog");
Div root=withStyle(new Div(),"dialog-root");
dialog.add(root);
Span title = withStyle(new Span("title"), "dialog-title");
Div titleRow = withStyle(new Div(title),"dialog-title-row");
root.add(titleRow);
Div dialoglayout = withStyle(new Div(),"dialog-layout-row");
root.add(dialoglayout);
TinyMce editor=new TinyMce();
dialoglayout.add(editor);
Div buttons=withStyle(new Div(),"dialog-button-row");
root.add(buttons);
This withStyle is just a convenient method for adding CSS class names:
public static <S extends HasStyle> S withStyle(S component, String... styles)
{
component.addClassNames(styles);
return component;
}
Adding some Sass:
.Dialog {
&, &.div {
padding: inherit;
}
.dialog-root {
display: flex;
flex-direction: column;
height: 100%;
justify-content: space-between;
max-height: calc(100vh - 60px);
overflow: hidden;
> div {
padding: 1em 2em;
}
.dialog-title-row {
flex-grow: 0;
background: var(--secondaryBackground);
.dialog-title {
font-size: 1.25em;
display: block;
width: auto;
padding: 0.5em 0;
}
}
.dialog-button-row {
flex-grow: 0;
// background-color: var(--secondaryBackground);
display: inline-flex;
justify-content: space-between;
}
.dialog-layout-row {
flex-grow: 1;
flex-shrink: 1;
p {
margin: 0.125em 0;
}
max-height: calc(90vh - 8em);
overflow: auto;
margin-top: 0;
.mce-edit-area {
min-height: 400px;
}
}
}
}
And for the look see the attachment.
Hi Sascha,
thanks for your effort , i added the editor into a notmal Div like this.
Dialog dialog = new Dialog();
TinyMce editor = new TinyMce();
dialog.add(new Div(editor));
Button button = new Button("Open the editor dialog");
button.addClickListener(event ->{
dialog.open();
});
add(button);
The result is the same, menu is not clickable, for instance, click on font size menu, the list opens, but is not possible to click on it.
If i use the keyboard i can move the selection and select the new font size.
I’m using vaadin 14.1.25 and last TinyMce 1.4
Any hint ?
Thanks
Oh, the menu items are not responding. I didn’t check that. Sorry, currently I don’t have a solution for this. It looks like the editor menus are behind the editor. Maybe because they are outside of the shadow DOM of the dialog.
Yup, I’m afraid this is one of those pesky shadow DOM issue. I haven’t been following lately if TinyMCE has some enhancements to work inside shadow dom. If so, should definitely try to update. Otherwise I think we are pretty much out of luck :-(
According to https://community.tiny.cloud/communityQuestion?id=9064N00000098lVQAQ the only chance is, that version 5 supports it.
seems they are working on a web component.
Hi, may this help us?
i don’t know so mutch regarding custom component creation
There is also a webconponent for tinymce,
what do you think on?
https://www.webcomponents.org/element/jaysunsyn/polymer-tinymce
Tinymce version 5.4.0 have some support for shadow dom, i did some test, but i’m not able to make it running.
Cool, so there is some hope :-)
The current version is based on 4.x series, so there are probably bigger changes required.
Hi Matti,
i already did some tests using the 5.4 version but without luck
I have done other tests with tinymce 5.4.2, it looks ok only if the dialog is not modal.
In a modal way the drop-down menus are not clickable.
Tinymce creates a div outside of so when the dialog is modal, the drop-down menus ( that are created inside the div ) are not clickable.
<vaadin-dialog-overlay id="overlay" focus-trap="" resizable="" theme="my-dialog" modeless="" opened="" role="dialog" style="z-index: 201;">
<div class="tox tox-silver-sink tox-tinymce-aux" style="position: relative;"></div>
I did some tests with z-index but without luck
any ideas ?
Bishwajit barua:
i, Any possibility to work it in Vaadin 14 Dialog? Actually we need to tinymce or ckeditor on vaadin 14 with template and Dialog.Thanks Bishwajit Barua
Hi, good news, seems solved with tinymce 5.5.1
Bye
More good news to this thread: Version 2.0 is now based on latest from TinyMCE 5.x series and the webbcomponent implementation. Tested and the functionality seems to be flawless now in Dialog.