Develop Reference

Add custom class to selected text in tinymce V5

I'm trying to implement inside tinymce a custom button, that when clicked, would add a class around the selected text.
I've tried this :
editor.ui.registry.addButton('fwnormal', {
text: 'N',
class: 'nongras'
});
But it doesn't work, I get an error Could not find valid *strict* value for "onAction"
Any idea how can I do that?

https://www.tiny.cloud/docs/configure/content-formatting/
Use the codes like these:
tinymce.init({
selector: "#mytextarea",
tinymce options: ... ,
toolbar: "add_class",
setup: function(editor) {
editor.on("init", function(e) {
tinymce.activeEditor.formatter.register("new_class", {
selector: "p,div,h1,h2,h3,h4,h5,h6", // choose elements
classes: "myclass",
styles: { ... },
attributes: { ... },
}); // close formatter.register
}); // close editor.on init
editor.ui.registry.addButton("add_class", {
tooltip: "new class",
icon: "edit-block", // look editor-icon-identifiers page
onAction: function() {
tinymce.activeEditor.formatter.apply("new_class");
}
}); // close registry.addButton
}, // close setup function
}); // close tinymce.init
Or try these codes:
tinymce.init({
selector: "#mytextarea",
tinymce options: ... ,
toolbar: "add_class",
setup: function(editor) {
editor.ui.registry.addButton("add_class", {
tooltip: "new class",
icon: "edit-block", // look editor-icon-identifiers page
onAction: function() {
var element = tinymce.activeEditor.selection.getNode();
tinymce.activeEditor.dom.setAttrib(element, "class", "myclass");
}
}); // close registry.addButton
}, // close setup function
}); // close tinymce.init

Custom classes are set in the style_formats https://www.tiny.cloud/docs/configure/content-formatting/

example
tinymce.init({
selector: 'textarea',
style_formats: [
{title: 'Class name', selector: 'p', classes: 'myclass'}
]
});
http://fiddle.tinymce.com/Slhaab

Create a custom button plugin in Summernote

I'm trying to create a custom button plugin in Summernote, but the ui.button creates of course, a button. Is there any way to make that a div for example?
context.memo('button', function() {
return ui.buttonGroup([
ui.button({
className: 'someClass',
tooltip: 'tooltipInfo',
data: {
toggle: 'dropdown'
},
click: function() {}
}),
What I tried is to do:
var buttonGroup = ui.buttonGroup([ ... ]);
buttonGroup.changeTag('div');
return buttonGroup;
Then update manually the button and change its tag to div. It "works" but for instance, the click event in the buttonGroup that I set doesn't work in this case.
Even tried attaching an on('click') event to buttonGroup variable, and still, the click isn't triggering.
Any ideas on how I can achieve this in another way?

The process of creating a button for summernote is relatively simple, you should first create a variable for your button.
In this variable you will assign a function that collects the summernote UI and then assign it a button with the desired properties inside it.
Already when loading summernote you will pass as the parameter of UI the variable used to create your button, as you can see in the example below
var btnAttch = function (context) {
var ui = $.summernote.ui;
var button = ui.button({
contents:
'<label class="custom-file-upload"> <input type="file" class="input-file" id="input-file-' + id + '" multiple/>' +
'<i class="glyphicon glyphicon-paperclip"></i> </label>',
tooltip: 'Attach file',
});
}
$(".txtInstrucoes-" + id).summernote({
height: 300,
toolbar: [
['style', ['bold', 'italic', 'underline']],
['color', ['color']],
['para', ['ul', 'ol', 'paragraph']],
['fontsize', ['fontsize']],
['btn-anexar', ['btnAnexar']]
],
buttons: {
btnAttch: btnAttch
},
disableDragAndDrop: true,
disableResizeEditor: true,
callbacks: {
onInit: function () {
$.EmpresaAPI.Events.OnChangeInputFile(id);
},
}
})

Dijit Dialog in JSFiddle launching immediately - not onClick

I'm struggling to get a Dijit dialog to work for a reproducible example. I took the working code from this JSfiddle and simply tried to turn this into a named function to use throughout the example.
The author uses:
new Button({label: 'Show dialog', onClick: function() {
//Create dialog programmatically here
}
});
but I've changed this to be slightly different:
function launchSelectDialog(selectOptions) {
//Create dialog programmatically here
}
registry.byId("default-launch", "onClick", launchSelectDialog(allOpts));
Here is my version. Unfortunately, this just launches the dialog immediately upon loading the page, and never again when clicking on the button.
I have checked the NoWrap option in JSFiddle. I have no other clues about what's going on.
Please help if you have any ideas.

There are couple of issue.
1) Like others a have pointed out, you are invoking the function not setting up the event with function. hence the dialog is visible onload.
2) You need to wait till the html has been parse. or you need to use parser.parse()
Here is the updated fiddler: http://jsfiddle.net/49y3rxzg/9/

() is an invocation operator. You are calling the function yourself and the returned value of the function is set as the event handler. If you want to reuse the function, use a closure:
function launchSelectDialog(selectOptions) {
// the returned function will be used as the event handler
return function() {
// the passed `selectOptions` is remembered in this context
}
}
Another option is:
registry.byId("default-launch", "onClick", function() {
launchSelectDialog(allOpts);
});

You need to initiate your Button widget before retrieving with registry.byId().
In your code actually registry.byId("default-launch") was returning undefined;
Also registry.byId() function accept only an id so additional parameters will be ignored.
To fix it you should initiate a Button instance properly and declare launchSelectDialog(allOpts) withinonClick, as:
var myButton = new Button({
label: "Default Options",
onClick: function() {
launchSelectDialog(allOpts);
}
}, "default-launch");
Below fixed version for your script.
http://jsfiddle.net/usm829jq/
require([
"dojo/dom",
"dijit/Dialog",
"dijit/form/Button",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dijit/registry",
"dojo/domReady!"
], function(dom, DijitDialog, Button, BorderContainer, ContentPane, registry) {
var allOpts = [{
label: "Foo",
value: "foo"
}, {
label: "Bar",
value: "bar"
}]
var myButton = new Button({
label: "Default Options",
onClick: function() {
launchSelectDialog(allOpts);
}
}, "default-launch");
function launchSelectDialog(SelectOptions) {
var layout = new BorderContainer({
design: "headline",
style: "width: 400px; height: 400px; background-color: yellow;"
});
var centerPane = new ContentPane({
region: "center",
style: "background-color: green;",
content: "center"
});
var actionPane = new ContentPane({
region: "bottom",
style: "background-color: blue;"
});
(new Button({
label: "OK"
})).placeAt(actionPane.containerNode);
(new Button({
label: "Cancel"
})).placeAt(actionPane.containerNode);
layout.addChild(centerPane);
layout.addChild(actionPane);
layout.startup();
var dialog = new DijitDialog({
title: 'dialog title',
style: {
//width: '400px',
//height: '400px',
},
content: layout
});
dialog.containerNode.style.backgroundColor = "red";
dialog.startup();
dialog.show();
}
})

How to add tooltip to text form field in extjs6

I have function for creating/rendering input fields but i don't know how to add tool tip on it in EXTjs6
this is my function:
createInputField: function(value, fieldsMarginBottom, readonly) {
var fieldStyle = this.getFieldStyle(readonly);
var nameField = Ext.create('Ext.form.field.Text', {
name: 'name',
readOnly: true,
hideLabel: true,
value: value,
width: this.fieldWidth,
style: {
marginBottom: fieldsMarginBottom + 'px'
},
//My try which is not working
tooltip: {
trackMouse: true,
width: 140,
renderer: function(tip, item){
tip.setTitle('name');
tip.update('Count: ');
}
},
fieldStyle: fieldStyle
});
return nameField;
}
I hope you guys can help me. If you need any additional informations, please let me know and I'll provide. Thank you

As can be seen in the textfield docs, fields do not have a way to add a tooltip to their configuration, so you would have to create the tooltip manually.
If you look at the docs for Ext.tip.ToolTip how to do that, you may find a small example, where you just have to change the target as per the target configuration description:
var tip = Ext.create('Ext.tip.ToolTip', {
target: nameField.getEl(),
html: 'Press this button to clear the form'
});

Above answer is correct. Here is example of generic function which you write once and use wherever you required in project by using using attributes.
addToolTip : function (id, msg) {
new Ext.ToolTip({
target : id,
dismissDelay : 0,
anchor : 'right',
html : msg
});
};

tinyMCE 4.x - restore default formatting after inserting html

I created an initial version of a plugin for inserting footnotes in tinyMCE, basing on some resources that I found for WordPress and Drupal. Here's the code:
tinymce.PluginManager.add('footnotes', function(editor) {
function showDialog() {
var win = editor.windowManager.open({
title: "Add a footnote",
id: 'footnote-dialog',
body: {
type: 'textbox',
name: 'footnote',
multiline: true,
minWidth: 520,
minHeight: 100,
//style: 'direction: ltr; text-align: left'
},
onSubmit: function(e) {
e.preventDefault();
var footnote = e.data.footnote;
if (footnote.length){
var html = '<span><sup class="footnote-elem" data-toggle="tooltip" data-placement="top" title="'+footnote+'">[*]</sup></span>';
editor.undoManager.transact(function() {
tinyMCE.activeEditor.execCommand('mceInsertRawHTML', false, html);
});
editor.windowManager.close();
}
}
});
}
editor.addButton("footnotes", {
title : 'Insert a footnote',
image : tinyMCE.baseURL + '/plugins/footnotes/img/note_add.png',
onclick: showDialog
});
});
the plugin basically works:
the problem is that the following inserted text is inserted as <sup> too:
So the desired behaviour would be:
put the cursor immediately after the inserted html;
restore original formatting.
Any suggestion/help on how to achieve that?
Thanks