We Keep Coding

Custom CTA button plugin CK5Editor

I started creating my own CK5 Editor plugins, and am now stuck at the plugin for creating a custom call-to-action button.
What I want
I've created a button in the editor toolbar to create a new button. What I want to happen is that a button element is created, and the user is able to edit it's textual content.
<button> [this must be editable text] </button>
Where I got stuck
So I made it so far that a button element is created as soon as I click on the action in the toolbar. But as soon as I start typing, the button disappears and a paragraph is created. It looks like the cursor is inside the button element though. I've been reading through the API documentation for a while now, but I didn't get any further.
My code so far
First I register the callToAction schema
const schema = this.editor.model.schema
schema.register('callToAction', {
isObject: true,
allowWhere: '$block',
inline: true
})
Then I define the converters
conversion.for('upcast').elementToElement({
model: 'callToAction',
view: {
name: 'button',
classes: 'cta-button'
}
})
conversion.for('dataDowncast').elementToElement({
model: 'callToAction',
view: {
name: 'button',
classes: 'cta-button'
}
})
conversion.for('editingDowncast').elementToElement({
model: 'callToAction',
view: (modelElement, viewWriter) => {
/* The Button element is editable on selection */
const button = viewWriter.createContainerElement('button', {
class: 'cta-button',
})
/* Makes the element editable */
return toWidgetEditable(button, viewWriter)
}
})
I Also created a command to execute the creation of the button element
function createCallToAction(writer) {
const callToAction = writer.createElement('callToAction')
return callToAction
}
The actual question
How can I create the button with a standard placeholder text, let's say Enter text, and let the user edit this text inside the button? I've searched the internet for answers, looked at other plugins, but didn't get the solution I need.
Hope someone can help me, or at least send me in the right direction.
Thanks in advance

I believe, toWidgetEditable(button, viewWriter) does not change the 'editability' of an element, it just creates the widget. So when you create a container-element with:
const button = viewWriter.createContainerElement('button', {
class: 'cta-button',
})
This cannot later on 'become' editable.
Instead, create an editable element with:
const button = viewWriter.createEditableElement('button', {
class: 'cta-button',
})

how to popup menu from mouse event to dom body?

I don't have lot of experience with web .. and i need to do something on web client.
I have some code that someone wrote in reactjs - and i want to popup menu when the user click on right click.
I wrote function that call on the right click event ( stop on this event on the right click ) and on this function i create (dynamicly) the menu.
Now i try to add this menu to the dom-> body and i don't know how to do it.
I also don't know how to add the position of the menu.
The code:
// the func event that call on right click
popupMenuOnRightClick(position){
// create the manu
var menu = [
{
name: 'item1'
title: 'itemTitle1',
func: function()
{
alert('I am itemTitle1')
}
},
{
name: 'item2'
title: 'itemTitle2',
func: function()
{
alert('I am itemTitle2')
}
}
];
document.body.appendChild(menu);
}
My code is nead to be popup from the react code file ( jsx file ).

Fancybox 3 JQuery: Close gallery when click outside element

I am having trouble getting Fancybox 3 to exit when a parent element or outside element is clicked.
Fancybox 3 options documentation (http://fancyapps.com/fancybox/3/docs/#options) states the following:
// Interaction
// ===========
// Use options below to customize taken action when user clicks or double clicks on the fancyBox area,
// each option can be string or method that returns value.
//
// Possible values:
// "close" - close instance
// "next" - move to next gallery item
// "nextOrClose" - move to next gallery item or close if gallery has only one item
// "toggleControls" - show/hide controls
// "zoom" - zoom image (if loaded)
// false - do nothing
// Clicked on the content
clickContent : function( current, event ) {
return current.type === 'image' ? 'zoom' : false;
},
// Clicked on the slide
clickSlide : 'close',
// Clicked on the background (backdrop) element
clickOutside : 'close',
Following is my JS file:
$("[data-fancybox]").fancybox({
loop : true,
toolbar : true,
buttons : [
'close'
],
clickOutside : 'close',
});
I am using the group option to enable a gallery.
data-fancybox="group"
I've tried a few things and just can't seem to get it to work yet. Help is greatly appreciated, take care. Sorry for lack of info, I have to head out.

It's hard to understand the problem (add codepen)
If you want - click on the image to close the gallery this is the code (change from "zoom" to "close" (Conditional (ternary) Operator))
// Clicked on the content
clickContent : function( current, event ) {
return current.type === 'image' ? 'close' : false;
},
Also you are doing wrong implementation. This is the default value:
clickOutside : 'close', /* i am default */
If you write this for example:
clickOutside : 'toggleControls',
Result: Now when you click on the overlay area (black) - show/hide controls.

Sorry for my English first. I hope I got you right. I just ran into similar trouble with a gallery of images. And I was irritated by the names of interaction options. For me worked option "clickSlide"
In that way you should be able to control what happens if you click on the open slide but outside the (Image-) Content. Instead of using 'toggleControls' you can use false.
Hope that helps
$("[data-fancybox]").fancybox({
clickSlide: 'toggleControls'
});

Froala Wysiwyg - adding custom and toolbar buttons in a custom dropdown

I'm trying to create a more custom dropdown for adding all the toolbar buttons under it when toolbarXS is activated (all the missing icons in the XS should be under the more dropdown.
unfortunately the docs aren't that clear and outputting only text options which does nothing besides showing.
i was wondering if anybody could help in how to do it.
i.e
// define annotation button for imagePopup
$.FroalaEditor.DefineIcon('annotationIcon', { NAME: 'pencil'}); // the icon
$.FroalaEditor.RegisterCommand('annotation', { // the button
title: 'Annotation',
icon: 'annotationIcon',
undo: true, // Save the button action into undo stack.
focus: true, // Focus inside the editor before the callback.
showOnMobile: true, // Show the button on mobile or not.
refreshAfterCallback: true, // Refresh the buttons state after the callback.
// Called when the button is hit.
callback: function () {
annotateImage(this);
}
})
// Define `more` dropdown button.
$.FroalaEditor.RegisterCommand('moreDropdown', {
title: 'More',
icon: 'More',
undo: true,
focus: true,
type: 'dropdown',
options: {
"annotation": 'annotation'
},
});
Thanks in advance
EDIT:
the only way i could figure out now is to use
html: function() {
return 'HTML_CODE'
}
and just write all the ul by myself which is disgusting and doesn't seem like the proper way of doing it.
Any help will be appreciated.

After talking with froala guys!
Custom popup
is a solution for implementing a popup with toolbar buttons as a dropdown.
Thanks

TinyMCE - How to add a button with a name

I know I can add buttons in TinyMCE 4 using addButton . But when I use addButton and enter a title for it, only an empty button is shown in the editor with a tooltip that contains the content of title. How do I add a title, that is actually shown in the menubar, like for the save button?

// Create and render a button to the body element
tinymce.ui.Factory.create({
type: 'button',
text: 'My button'
}).renderTo(document.body);

I found the solution, thanks to Eslam.
You actually just set the 'text' value of addButton:
$('#site_content').tinymce({
setup : function(ed) {
ed.addButton('name', {
text : 'TEXT',
onclick : function() {
}
});
}
});
The documentation of TinyMCE is just awful at some parts, if you'd ask me