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

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

Related

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',
})

Custom Summernote Button to create links with classes

So I'm thoroughly confused as how to make a custom SummerNote button which will allow me to either add classes to an already inserted HTML element (i.e. links) or even wrap selected text in something like:
<button class="btn btn-primary"> **selected text** </button>
From the Summernote Deep Dive it shows how to create a custom button that inserts static text and I understand how to implement it. However, I can't seem to figure out how to make it dynamic for whatever text is selected. I've tried replacing the 'text' part of the example after context.invoke call but it doesn't convert the text to html, it just prints it.
The need is for creating links as buttons. Ideally I'd wish to access the Insert Link dialog already built into SummerNote to make buttons that will insert links with predefined classes but I'm not sure how complicated that would be.
Does anyone have any suggestions?
var bsButton = function (context) {
var ui = $.summernote.ui;
// create button
var button = ui.button({
contents: 'Btn',
tooltip: 'Create Button',
click: function () {
// invoke insertText method with 'hello' on editor module.
context.invoke('editor.insertText', '<button class="btn btn-primary"></button>');
}
});
return button.render(); // return button as jquery object
}
I've reviewed a ton of different posts but I haven't gotten much further than the example for what I'm trying to accomplish. Thanks in advance to anyone who takes the time to help.
As I was doing more research I stumbled upon Summernote's 'Awesome Summernote' GitHub page which led me to a plugin, summernote-addclass. While this doesn't necessarily answer the heart of the question (i.e. achieving this same thing without a plugin) but it does exactly what I need to do. Maybe this will help someone else in the future. Enjoy!
By using jQuery in summernote callback method onInit I have added custom class for custom button
Here is my custom button code:
var AddPage = function(context) {
var ui = $.summernote.ui;
var button = ui.button({
contents: '<i class="fa fa-plus"/> Add Page',
tooltip: "Set a New Page",
class: "btn-primary",
click: function() {
addPage();
}
});
return button.render();
};
And i use callback methods to add custom class btn-primary to the button
$("#editor").summernote({
airMode: false,
dialogsInBody: false,
toolbar: [["mybutton", ["customButton"]],
buttons: {
customButton: AddPage
},
callbacks: {
onInit: function(e) {
var o = e.toolbar[0];
jQuery(o)
.find("button:first")
.addClass("btn-primary");
}
}
});
});
I think this may be helpful for anyone, even if this is not gud answer.

Kendo UI Multiselect: Remove delete action on data binding

I have a Kendo multiselect UI element and I am trying to check a certain condition and make sure that element is non-deletable right at the initial data load. My code is as follows:
$scope.programSelect = $("#selectPrograms1").kendoMultiSelect({
dataSource:new kendo.data.DataSource({
data: $scope.programs
}),
dataTextField: "name",
dataValueField:"id",
select: addProgram,
dataBound: function (e) {
//check condition on data
//if true then do
//$(e.sender.tagList).find("li span.k-delete").remove();
},
change: programRemove
}).data("kendoMultiSelect");
I had some help from this link here. This piece of code doesn't seem to be working for some reason and I'm at a loss. Would appreciate any suggestions. Am I checking at the wrong place?

Pebble.JS card when "action" is set - "scrollable" fails

I am trying to create a card that would have action on clicking "select" button and still have scrollable text, something like:
var card = new UI.Card({
title: 'Title',
body: 'long text goes here...',
action: {
select: 'images/refresh.png',
backgroundColor: 'white'
},
scrollable: true
});
card.on('click', function(e) {
if (e.button == 'select') {
//some code
}
});
if executed like this - icon in action bar is visible and "click" event runs, but "scrollable: true" no longer has effect. If I comment "action" property - "click" event still runs and this time "scrollable: true" is working, but of course no icon is displayed. Is it a bug or is it by design? How can I have best of both worlds - display icon for "select" and keep card scrollable?
Thanks to this question, I've made a commit that will allow you to use the action bar layer and scroll layer at the same time: https://github.com/pebble/pebblejs/commit/04f926f137395a0ebd0faaab8b0722da9aa75a7d.
I'll update this answer when the commit is merged into CloudPebble.

Add help button to Extjs gridpanel header

I want to add a button to the right hand side of my gridpanel header but can't find anyway of doing so.
I don't want to add a toolbar since it's only 1 button I want to add.
Check out the panel's tools config. Simply add it to grid's config:
Ext.create('Ext.grid.Panel', {
// ...
tools:[
{
type:'help',
tooltip: 'Get Help',
handler: function(event, toolEl, panel){
// show help here
}
}],
// ...
});
Here is demo.

Categories