I'm using TinyMce Style Formats to add custom formats to the ""Formats" dropdown.
The problem is that I have too many styles to add, and I would like to use another "Formats" dropdown, separated from the first one. I know I can nest formats but it's not enough, I want to add two different Dropdown, how can I do it?
Have a look at the style plugin in tinymce3 (in tinymce4 it is part of the tinymce core). You may copy that plugin rename it and configure it to your needs. Then you need to add the plugin to your plugin list and the tinymce button to your button list.
This is best done adding formats to the formatter programmatically and then adding a menu item and trigger the formatter
editor.on( 'Init', function( e ) {
editor.formatter.register(
'page-title',
{ 'selector': 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li',wrapper: false, classes : ['giga', 'primary-font'] }
);
} );
editor.addButton( 'typography', {
text: 'Typography',
icon: false,
type: 'menubutton',
menu: [
{
text: 'Page Title',
menu: [
{
text: '(Giga) 88 Clan pro thin #000000',
onclick: function() {
editor.formatter.toggle( 'page-title' );
}
},
]
},
]
});
Related
In a CKEditor plugin, you can specify a toolbar for a button with this :
init:function(editor){
editor.ui.addButton('myplug',{
label:'my plug',
command:'myplug',
toolbar:'mytoolbar'
With widget, I don't find this possibility. Is there a way to do that without move the node in JS, that is a bit complicated ?
You can do the same with widgets. Here's a widget's plugin.js file with a button and toolbar declaration under the init function:
CKEDITOR.plugins.add( 'mywidget', {
requires: 'widget',
icons: 'mywidget',
init: function( editor ) {
CKEDITOR.dialog.add('mywidget', this.path + 'dialogs/mywidget.js')
editor.widgets.add( 'mywidget' , {
//
// Your widget logic is here ...
//
});
editor.ui.addButton('mywidget', {
label: 'My Widget'
command: 'mywidget'
toolbar: 'mytoolbar, 1'
});
}
} );
You'll need to add the "mytoolbar" toolbar in your config.js file, but I suppose you already have because you mentioned being able to add a button for a plug-in.
I'm tying to add code into a tinymce textarea and I'm planning to hightlight it using highlight.js
In order to to so, I just need to wrap the code between the tags <pre></pre> and highlight.js will do the rest.
I tried using the code plugin in tinymce, which opens a popup where the user can paste the code. But to my surprise it does actually nothing with that text. It only allows you to see the HTML code for it, which will basically just show the text between </p> tags.
I would prefer not to use codesample plugin because I just want to add the pre tag and do not apply any codesample styles to it. I do not want either to have a list of languages to select from or to treat the whole code text as a block that has to be removed in a whole.
Any ideas of how to do this?
If I understand your question you want a dialog where someone can paste in some HTML and you will wrap that in <pre> and </pre> tags as you insert the content into the editor.
There is not a plugin in TinyMCE that does precisely what you want. You are correct that the codesample plugin is more complex than that (it uses something called Prism.js to handle syntax coloring and highlighting).
You can do one of two things:
Look at how plugins like codesample and template create their dialogs (they use windowManager) and then you could make your own plugin that takes the user's input and wraps it in <pre> and </pre> tags as its inserted into the editor.
Add a toolbar button or menu item via the TinyMCE init and have that code open a dialog (via windowManager) and insert the content into the editor.
If you prefer the first option, using one of TinyMCE's existing templates as a starting point will save you a bit of coding time and show you a good example of how to use windowManager.
Here is an overly simply example of how you might use windowManager in the init:
tinymce.init({
...
setup: function (editor) {
editor.addButton('insertusername', {
text: 'Insert User Name',
icon: false,
onclick: function () {
var person = {
firstname: '',
lastname: ''
};
editor.windowManager.open({
title: 'Insert User Name - Custom Dialog',
body: [
{
type: 'textbox',
name: 'firstname',
label: 'First Name:',
value: '',
minWidth: 800,
value: person.firstname,
oninput: function() {
person.firstname = this.value();
}
},
{
type: 'textbox',
name: 'lastname',
label: 'Last Name',
value: '',
minWidth: 800,
value: person.lastname,
oninput: function() {
person.lastname = this.value();
}
}
],
onsubmit: function(e) {
// console.log('onSubmit called');
editor.insertContent('<span class="abc">'+ person.firstname + ' ' + person.lastname + '</span> ');
}
});
}
}
}
...
});
I would like to use a custom window as popup editor of a Kendo UI Grid. Its content will be complex with search fields and a grid to display search results. To do that, I don't want to use the Kendo template mechanism but a real popup window.
While doing tests with custom editor I faced an issue. Even with a very basic and simple scenario (just the create command), I'm only able to open the editor once. The second time I get an error, the editor doesn't show up anymore and the grid becomes empty.
Here is my HTML code :
<div id="main-content">
<div id="custom-window">
</div>
<table id="my-table-grid">
</table>
</div>
The JavaScript part :
function openCustomWindow(e) {
e.preventDefault();
myWindow.center().open();
}
function editorWindowClosed(e) {
myGrid.cancelRow();
}
var myWindow = $("#custom-window").kendoWindow({
modal: true,
resizable: false,
title: "Test",
visible: false,
close: editorWindowClosed
}).data("kendoWindow");
var dummyDataSource = new kendo.data.DataSource(
{
schema : {
model : {
id: "id",
fields: {
postion: { type: "number"},
name: { type: "string"},
}
}
}
});
dummyDataSource.add({postion: 1, name: "gswin"});
var myGrid = $("#my-table-grid").kendoGrid({
dataSource: dummyDataSource,
toolbar: [ {
name: "create",
text: "Create"
} ],
editable: {
mode: "popup",
window: {
animation: false,
open: openCustomWindow,
}
},
columns: [
{
field: "postion",
title: "Postion"
},
{
field: "name",
title: "Name"
}
]
}).data("kendoGrid");
The error message in the JavaScript console :
Uncaught TypeError: Cannot read property 'uid' of
undefinedut.ui.DataBoundWidget.extend.cancelRow #
kendo.all.min.js:29ut.ui.DataBoundWidget.extend.addRow #
kendo.all.min.js:29(anonymous function) #
kendo.all.min.js:29jQuery.event.dispatch #
jquery-2.1.3.js:4430jQuery.event.add.elemData.handle #
jquery-2.1.3.js:4116
And finally a jsfiddle link to show what I'm doing. (The popup is empty because I just want to fix the open / close mechanism before going any further)
I don't understand why I get this error, I expected to be able to open / close the popup as many time as I wanted. The default editor popup is working fine.
One of my colleague found the solution (thanks to him).
Actually this piece of code
editable: {
mode: "popup",
window: {
animation: false,
open: openCustomWindow,
}
}
is designed to configure the default popup...
The right way to use a custom popup is the following :
editable :true,
edit: openCustomWindow,
With this approach it's also better to use
function editorWindowClosed(e) {
myGrid.cancelChanges();
}
Instead of
function editorWindowClosed(e) {
myGrid.cancelRow();
}
Working jsfiddle link
Actually the approach in my previous answer solved my issue but is causing another issue. The grid becomes editable but in the default mode (which is "inline").
Doing this
editable: "popup",
edit: openCustomWindow
has fixed this other issue but is now displaying 2 popups.
I finally succeeded to hide the default popup and only show my custom popup but it ended with the orginal issue described in initial question...
Considering all those informations I arrived to the conclusion that working with a custom popup window is definitely not an option. I'll start working with teamplates instead.
Another solution would have been to use a template to override the toolbar with a custom "Add" button and use a custom command for edition. But at this point I consider that too "tricky".
To prevent Kendo UI custom grid popup editor window, define the editable property:
editable:
{
mode: "popup",
window: {
animation: false,
open: updateRowEventHandler
}
} // skip edit property
Then paste preventDefault() at the beginning of the handler:
function updateRowEventHandler(e) {
e.preventDefault(); //
I'm trying to build a custom plugin based on a stock TinyMCE 4 image plugin. It'll have two drop-downs. When user clicks the first one - I'd like to hide the second one (css style display: none;).
Here is a bit of code that adds drop-downs in the initializer:
targetTest1ListCtrl = {
name: 'test1',
type: 'listbox',
label: 'Test1',
values: buildValues('target_list', 'target', InputDataArray),
onClick: function(e) {
//code I'm looking for
},
};
generalFormItems.push(targetTest1ListCtrl);
targetTest2ListCtrl = {
name: 'test2',
type: 'listbox',
label: 'Test2',
values: buildValues('target_list', 'target', InputDataArray2)
};
generalFormItems.push(targetTest2ListCtrl);
Both drop-downs generate just fine, if I put alert in my onclick event - it's triggered perfectly fine, but in no way I can find how to access my test2 through the TinyMCE and change styling on it.
Found an answer:
sampleElement = win.find('#test2')[0];
sampleElement.hide();
Where #test2 is #+name of your Ctrl.
CKEditor lets you add custom styles to the styles combo box by editing the file styles.js (see What is a good javascript HTML editor for adding custom HTML elements? for details)
I would like to add unique buttons to the toolbar to apply my custom styles, rather than the user having to select them from the styles combo.
How do you add custom buttons to the CKEditor toolbar?
Go ahead with the following code:
// Your custom style.
var myStyle = new CKEDITOR.style( {
element: 'span',
attributes: {
'data-foo': 'bar',
'class': 'myClass'
},
styles: {
color: 'red'
}
} );
CKEDITOR.replace( 'editor1', {
on: {
// Register command and button along with other plugins.
pluginsLoaded: function() {
var editor = this;
// Registers a command that applies the style.
// Note: it automatically adds Advanced Content Filter rules.
this.addCommand( 'myStyle', new CKEDITOR.styleCommand( myStyle ) );
// Add toolbar button for this command.
this.ui.addButton && this.ui.addButton( 'myStyleButton', {
label: 'My style',
command: 'myStyle',
toolbar: 'insert,10'
// You may want to set some icon here.
// icon: 'someIcon'
} );
}
}
} );