How to add a class to custom tinymce toolbar menu item? - javascript

I've added custom toolbar button for tinymce with image, I want to add a class to that. I've tried of adding class parameter but didnt work for me.
pls advice
tinyMCE.PluginManager.add('subBtn', function(editor, url) {
editor.addButton('subBtn', {
class :'buttonClas',
image: icon-path,
icon: true,
tooltip: tooltip,
onclick: function() {
// Open window
editor.windowManager.open({
title: 'PTION',
body: [
{type: 'textbox',value: subBtin, name: 'title', label: 'subBtn'}
],
onsubmit: function(e) {
}
});
}
});
});

Try "classes" instead of "class" - you can add more than one, divided by spaces.

Related

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

Using custom context menu for cytoscape.js nodes

I am trying to use this context menu javascript library but can't seem to get it to trigger when a node is right clicked.
I tried implementing the basic demo and that works, so I have the necessary js on the page.
I added it to the left click of a node and tried to trigger the context menu through the custom way like so:
graph.$('node').on('cxttapstart', function (event) {
event.cyTarget.contextMenu();
});
$.contextMenu({
selector: '.context-menu-one',
trigger: 'none',
callback: function (key, options) {
var m = "clicked: " + key;
window.console && console.log(m) || alert(m);
},
items: {
"edit": { name: "Edit", icon: "edit" },
"cut": { name: "Cut", icon: "cut" },
"copy": { name: "Copy", icon: "copy" },
"paste": { name: "Paste", icon: "paste" },
"delete": { name: "Delete", icon: "delete" },
"sep1": "---------",
"quit": { name: "Quit", icon: function ($element, key, item) { return 'context-menu-icon context-menu-icon-quit'; } }
}
});
but I just don't know what to do on line
selector: '.context-menu-one'
so that the context menu shows up next to the node.
Anybody done this before?
Cheers
event.cyTarget (2.x) or event.target (3.x) is not a dom element. It's a cytoscape element. You need to create your own dom element (e.g. div) for the menu and position it relative to node.renderedPosition() on cxttap.
If you want to use a context menu with cytoscape, it's easier to just use an existing extension.
There's one that has a modern circular swipe menu: https://github.com/cytoscape/cytoscape.js-cxtmenu
There's also one that's a traditional list menu: https://github.com/iVis-at-Bilkent/cytoscape.js-context-menus

Custom styling for tinyMCE nonEditable element

I'm using tinyMCE 4 in AngularJS (angular-ui-tinymce). I'm trying to use the noneditable plugin to get some variable that I have predefined to show up nicely. I have a plnkr here http://plnkr.co/edit/AImGWCDO6a1J6VC7kD73?p=preview
Now my settings for tinyMCE is as shown
vm.settings = {
menubar: false,
toolbar: 'firstButton | secondButton',
plugins: 'noneditable',
noneditable_regexp: [
/<my-variable>(.*?)<\/my-variable>/g,
/<other-variable>(.*?)<\/other-variable>/g
],
extended_valid_elements :'my-variable,other-variable',
custom_elements: '~my-variable,~other-variable',
content_style: "my-variable: {background: yellow;} other-variable: {background: blue;}",
setup: function(editor){
editor.addButton('firstButton', {
text: 'Insert first',
icon: false,
onclick: function () {
editor.insertContent('<my-variable>MY-VARIABLE</my-variable>');
}
});
editor.addButton('secondButton', {
text: 'Insert second',
icon: false,
onclick: function () {
editor.insertContent('<other-variable>OTHER-VARIABLE</other-variable>');
}
});
}
};
And I just call these on my tinyMCE object with
<div ui-tinymce="vm.settings" ng-model="vm.content"></div>
So it's pretty standard.
My question is: How can I make <my-variable> and <other-variable> have different styles? When TinyMCE translates them they only seem to take on the class of 'mceNonEditable'. I would rather not have to add a class attribute to my custom tags as they are meant to be parsed in a later stage, and it's much easier if there are no attributes on them.

Use Existing Icon in Tiny MCE custom Button

could we use existing icon to custom button? (not an image)
I have tried this, but it doesn't work:
tinymce.init({
...
toolbar: 'example'
setup: function(ed) {
ed.addButton('example', {
title: 'My title',
image: '../js/tinymce/plugins/example/img/example.gif',
classes: 'mce-ico mce-i-image',
onclick: function() {
ed.insertContent('Hello world!!');
}
});
}
});
Yes you can use an existing icon.
You can take the class name from an existing button - e.g. "mce-i-image" as you've done - then, rather than apply that to the class name of your new button, you strip off the "mce-i-" prefix and use the remainder - "image" in this case - as the icon key.
I've amended your example below.
e.g.
setup: function(ed) {
ed.addButton('example', {
title: 'My title',
icon: 'image', // This line sets the icon key.
onclick: function() {
ed.insertContent('Hello world!!');
}
});
}

Listen to click events inside CKEditor dialog

I have a ckeditor instance, to which I added a custom dialog box using:
CKEDITOR.dialog.add('quicklinkDialog', function(editor) {
return {
title: 'Quick Links',
minWidth: 400,
minHeight: 200,
contents: [
{
id: 'tab1',
label: 'Add a quick link',
elements: [
{
type: 'html',
html: '<p>This is some text and then: Click me!</p>'
}]
};
});
I want to add a "click" event listener on the link inside my dialog box. When that link is clicked, content will be inserted into my textrea (the dialog box will also be closed).
Anyone knows how I might do this? Thanks in advance!
Here you go:
{
type: 'html',
html: '<p>This is some text and then: Click me!</p>',
onLoad: function( a ) {
CKEDITOR.document.getById( this.domId ).on( 'click', function() {
var dialog = this.getDialog();
dialog.hide();
dialog._.editor.insertHtml( this.html );
}, this );
}
}
See the API to know more.

Categories

Resources