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
Related
I'm trying to create a custom plugin for TinyMce.
This is my code so far:
(function() {
var redactor = (function(domGlobals) {
'use strict';
var global = tinymce.util.Tools.resolve('tinymce.PluginManager');
var setupButtons = function(editor) {
editor.ui.registry.addToggleButton('link', {
text: 'My button',
tooltip: 'My button',
onAction: function() {
alert('My Button');
}
});
};
var Controls = {
setupButtons: setupButtons,
};
global.add('redactor', function(editor) {
Controls.setupButtons(editor);
});
function Plugin() {}
return Plugin;
}(window));
})();
This is my init:
tinymce.init({
selector: '#editor',
plugins: 'redactor',
toolbar: 'redactor',
menubar: 'redactor'
});
My editor renders without any button and no JS error on it.
What am I doing wrong? I tried to emulate some of the plugins but I cant get it to work.
Seems that I needed to search a little bit more in the documentation. I have to add each button manually to the toolbar:
tinymce.init({
selector: '#editor',
plugins: 'redactor',
toolbar: 'redactorBtn1',
menubar: 'redactor'
});
and each name should be unique for the plugin:
So, the code for my plugin:
(function () {
var redactor = (function (domGlobals) {
'use strict';
var global = tinymce.util.Tools.resolve('tinymce.PluginManager');
var setupButtons = function (editor) {
editor.ui.registry.addToggleButton('redactorBtn1', {
text: 'My button',
tooltip: 'My button',
onAction: function () {
alert('My Button');
}
});
};
var Controls = {
setupButtons: setupButtons,
};
global.add('redactor', function (editor) {
Controls.setupButtons(editor);
});
function Plugin () {
}
return Plugin;
}(window));
})();
If you want to add more buttons to the toolbar, you have to put them one by one:
toolbar: 'redactorBtn1 redactorBtn2',
Its old code, at tinyMCE they change everything now and then. A good example is the code plugin. Copy this code plugin to a directory named: custom. Change the names code in the plugin.js file to custom and add custom to the plugins array and the toolbars string in tinymce.init function and you are ready to go.
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.
I try to implement Summertnote editor. Here is the JS code:
$(document).ready(function() {
//Summernote
//var te_markdown = document.getElementById("code-markdown");.
var textarea = document.getElementById("code");
var HelloButton = function (context) {
var ui = $.summernote.ui;
// create button
var button = ui.button({
contents: '<i class="fa fa-child"/> Hello',
tooltip: 'Ciao!',
click: function () {
// invoke insertText method with 'hello' on editor module.
context.invoke('editor.insertText', 'hello');
}
});
return button.render(); // return button as jquery object
}
function autoFormat() {
var totalLines = editor.lineCount();
editor.autoFormatRange({line:0, ch:0}, {line:totalLines});
}
$('#st-editor').summernote({
lang: 'it-IT', // set italian language
height: 350, // set editor height
width: 350, // set editor width
minHeight: null, // set minimum height of editor
maxHeight: null, // set maximum height of editor
dialogsFade: true, // set fade on dialog
prettifyHtml: false,
toolbar: [
['mybutton', ['hello']]
],
buttons: {
hello: HelloButton
},
codemirror: { // codemirror options
mode: "text/html",
lineNumbers: true,
lineWrapping: true,
extraKeys: {"Ctrl-Q": function(cm){ cm.foldCode(cm.getCursor()); }},
foldGutter: true,
theme: 'monokai',
gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
}
},
focus: true set focus to editable area after initializing summernote
});
I get the code here: http://summernote.org/deep-dive/#custom-button
So, In this example I want to simply put a "Hello" string clicking the button but it gives me an error "TypeError: context is undefined". Can someone help me?
Thanks
Instead of
context.invoke('editor.insertText', 'hello');
use
$('#st-editor').summernote('editor.insertText', 'hello');
works only if you have one editor of course. I'm still searching how to get this context thingy passed. Maybe something with onInit, but I couldn't get it working yet.
#wessel code works, for multiple ids I do an iteration using jQuery each:
Make sure oyu attach an id attribute to all editors:
if ($('.summernote').length) {
var blockQuoteButton = function(itemId) {
var ui = $.summernote.ui;
var button = ui.button({
className: 'note-btn-blockquote',
contents: '<i class="fa fa-quote-right">Quo</i>',
tooltip: 'Blockquote',
click: function() {
$('#' + itemId).summernote('editor.formatBlock', 'blockquote');
}
});
return button.render();
}
$('.summernote').each(function(k, item) {
let itemId = $(item).attr('id');
$('#' + itemId).summernote({
height: 100,
toolbar: [
['style', ['style']],
['font', ['bold', 'italic', 'underline']],
['para', ['ul', 'ol']],
['mybutton', ['blq']]
],
buttons: {
blq: blockQuoteButton(itemId)
}
});
});
}
This issue appeared in version 0.8.12. Reverting back to 0.8.10 fixes it
Inside package.json specify
"dependencies": {
...
"ngx-summernote": "0.7.0",
"summernote": "0.8.10",
...
},
and run npm install afterwards. It works after that
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!!');
}
});
}
I am using qtip2 for displaying the alert messages for my web application ( as shown at http://craigsworks.com/projects/qtip2/demos/#dialogues )
my code is
1) for dialogue
function dialogue(content, title) {
/*
* Since the dialogue isn't really a tooltip as such, we'll use a dummy
* out-of-DOM element as our target instead of an actual element like document.body
*/
$('<div />').qtip(
{
content: {
text: content
, title: {
text: 'PMGSY ',
button: 'Close'
}
},
position: {
my: 'center', at: 'center', // Center it...
target: $(window) // ... in the window
},
show: {
ready: true, // Show it straight away
modal: {
on: true, // Make it modal (darken the rest of the page)...
blur: false, // ... but don't close the tooltip when clicked
escape: false
}
},
hide: false, // We'll hide it maunally so disable hide events
style: {
classes: 'qtip-shadow qtip-rounded qtip-dialogue', // Optional shadow...
widget: true //themeroller
},
events: {
// Hide the tooltip when any buttons in the dialogue are clicked
render: function (event, api) {
$('button', api.elements.content).click(api.hide);
},
// Destroy the tooltip once it's hidden as we no longer need it!
hide: function (event, api) { api.destroy(); }
}
});
}
2) to call it as alert
function Alert(message) {
// Content will consist of the message and an ok button
var message = $('<p />', { text: message }),
ok = $('<button />', { text: 'Ok', 'class': 'full' });
dialogue(message.add(ok), 'Alert!');
}
the problem is when i use it ,its does not block the further processing until user click on ok button (like default alert function).
e.g this alert does not even show up.
Alert("Customised alerts"); //this doesent show
window.location.replace("/Home/startPage");
how to make my custom alert mimic the default alert function ?
Please help
Replace
ok = $('<button />', { text: 'Ok', 'class': 'full' });
with
ok = $('<button />', { text: 'Ok', 'class': 'full' }).click(function(){
window.location.replace("/Home/startPage");
});