Here's my code
CKEDITOR.rbcPluginTools.addCustomPlugins('custom_author_signature', [
{
name: "author_signature",
title: "Подпись автора",
tooltip: "Добавить подпись автора",
icon: 'author_signature',
hidpi: true,
toolbar: "media,9",
exec: function (plugin, editor) {
selection = editor.getSelection();
if(selection.getSelectedText()) {
editor.insertHtml(`<div class="back_container author_signature">${editor.getSelection().document.getBody().getHtml()}</div>`);
}
}
}
]);
'back_container' is for background-color. Looks like it duplicates divs for some weird reason, cause after 2 executions it makes 3 back colors instead of two.
Expected behavior:
select text -> press plugin button -> 1 background container
select text inside this background container -> press plugin button -> 2 background containers (not 3!)
Related
i'm trying to create a dropdown menu in CKEditor to group some normal button tool just because i need to compress the toolsbar. For this i'm trying to create, for example, a justify group button menu, for this i have compile this plugin :
CKEDITOR.plugins.add('justifygroup', {
requires: ['justify'],
init: function (editor) {
var items = {
justifyleft: {
label: editor.lang.justify.left,
group: 'justify_group',
command: 'justifyleft',
// icon: CKEDITOR.getUrl(this.path + 'icons/icon.png'),
order: 1
},
justifycenter: {
label: editor.lang.justify.center,
group: 'justify_group',
command: 'justifycenter',
order: 2
},
justifyright: {
label: editor.lang.justify.right,
group: 'justify_group',
command: 'justifyright',
order: 3
},
justifyblock: {
label: editor.lang.justify.block,
group: 'justify_group',
command: 'justifyblock',
order: 4
}
};
editor.addMenuGroup('justify_group');
editor.addMenuItems(items);
editor.ui.add('JustifyGroup', CKEDITOR.UI_MENUBUTTON, {
label: 'Justify Group',
icon: 'JustifyLeft',
// Disable in source mode.
modes: {
wysiwyg: 1
},
onMenu: function () {
var activeItems = {};
// Make all items active.
for (var prop in items)
activeItems[prop] = CKEDITOR.TRISTATE_OFF;
return activeItems;
}
});
}
});
here it is a demo of this plugin : https://codepen.io/seltix/pen/dWxWbO
CKEDITOR.replace('textarea', {
extraPlugins: 'justifygroup',
toolbar:[{name: 'test', items: ['JustifyGroup']}]
});
the problems :
1 - if i dont call one of the align buttons on the toolbar ('JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock') the
button menu does not show any button
2 - i'm unable to control some
sort of visual mark to show what alignment is in use (like on the
toolbar buttons)
UPDATE : I found the solution for this problem on the "onMenu" function replacing activeItems[prop] = CKEDITOR.TRISTATE_OFF; with activeItems[prop] = editor.getCommand(items[prop].command).state;
3 - i dont know why but the first option is always
with "focus", how can I set the focus to match a specific item?
thanks all!
1 - The problem that is causing buttons not to display is ACF. Buttons that you're grouping in your dropdown requires certain tags/attrs to be available. In the simplest case it requires text-align to be applicable on p.
It looks that there's a bug in CKEditor that buttons added using editor.addMenuItems are not registering properly new ACF rules, while they do if added directly to the toolbar.
3 - I couldn't find a proper function for that, IMHO it should be doable in onMenu function, however it does not provide enough references to do that. Sounds like a feature request.
Generally you should look at language plugin, as it has many things you are looking for so it's a nice source of inspiration.
For future reference, please create separate StackOverflow question for each case. Though these issues were releated, they are a different cases.
I want to ask if it's possible to add new content "outside" of content that has beed added recently.
So, i have custom button which adds some simple HTML.
And what i want to archive is to add the same html but outside of existing one, so in place marked green on my screenshot. I'm looking for a way how to escape from this div, and add new html after existing one.
below screenshot, and code - how javascript button in generated - very simple.
Thanks for advice.
var oferta = '<div class="col-sm-3"><h1>test</h1></div>'
setup: function (ed) {
ed.addButton('example', {
title: 'example.desc',
image: './/',
text: 'Oferta',
icon: true,
onclick: function () {
tinyMCE.execCommand('mceInsertContent', false, oferta);
}
});
},
EDIT: Below how this looks now when i hit button 3 times in row.(every next content is added to existing one.)
Is very easy to do it try to change you code with this example.
setup: function (editor) {
ed.addButton('example', {
title: 'example.desc',
image: './/',
text: 'Oferta',
icon: true,
onclick: function () {
var h1 = editor.dom.create('h1');
h1.innerText = 'test';
var oferta = editor.dom.create('div' ,{'class': 'col-sm-3'});
oferta.appendChild(h1);
var divs = editor.dom.select('div');
if(divs && divs.length > 0){
editor.dom.insertAfter(oferta,divs[divs.length-1])
}else{
tinyMCE.execCommand('mceInsertContent', false,oferta.outerHTML);
}
editor.selection.select(oferta);
editor.selection.collapse(true);
}
});
},
CKEditor's Mathjax plugin contains several elements in the dialog: one textarea (id: equation) and one div (id: preview).
https://github.com/ckeditor/ckeditor-dev/blob/master/plugins/mathjax/dialogs/mathjax.js
When some mathjax code is entered in the textarea, the formula is written in the div. I am trying to add several predefined buttons that add usual formulae mathjax text to the textarea, so users only have to populate these formulae.
Adding a button into the elements works nice, but I can only access to change the div element. Accessing the textarea does not work, it seems that is not available in any scope at all.
id: 'info',
elements: [
{
id: 'testButton',
type: 'button',
button: 'aaaa',
onClick: function() {
// Changing the ID value does work
preview.setValue('Test');
// but changing the textarea does not.
// equation.setValue('Test');
// document.getElementById('equation').setValue('Test');
}
},
{
id: 'equation',
type: 'textarea',
label: lang.dialogInput,
onLoad: function() {
var that = this;
if ( !( CKEDITOR.env.ie && CKEDITOR.env.version == 8 ) ) {
this.getInputElement().on( 'keyup', function() {
// Add \( and \) for preview.
preview.setValue( '\\(' + that.getInputElement().getValue() + '\\)' );
} );
}
},
Sorry if this is a simple question, but how can I access to equation textarea?
After much reading, it seems that this is a way, not sure it's the best way though.
onClick: function() {
this._.dialog.setValueOf("info","equation","TEST");
}
I have created a simple plugin to move some of the formatting buttons to a dropdown button. The dropdown button has both an icon and a label. The plugin works as intended except that when clicked on the label shows both the intended text as well as adding "(selected)" to the end.
Here is the button default view (the formatting button):
And here is how it looks when clicked on:
Here is the code for the plugin:
CKEDITOR.plugins.add( 'sf_formatting', {
init: function( editor ) {
var format = {};
editor.addMenuGroup( 'format_group' );
format.indent = {
label: 'Increase Indent',
group: 'format_group',
command: 'indent',
order: 6
};
format.outdent = {
label: 'Decrease Indent',
group: 'format_group',
command: 'outdent',
order: 7
};
editor.addMenuItems( format );
editor.ui.add( 'Formatting', CKEDITOR.UI_MENUBUTTON, {
label: 'Formatting',
// Disable in source mode.
modes: {
wysiwyg: 1
},
icon: 'dropdown',
onMenu: function() {
var active = {};
// Make all items active.
for ( var p in format )
active[ p ] = CKEDITOR.TRISTATE_OFF;
return active;
}
} );
}
});
I have a second issue
The outdent (decrease indent) only appears when the text has been indented. In the main menu it is always there but greyed out. How can I force the outdent button to always be visible in the dropdown box but not accessible.
Here is a screenshot of the dropdown when the text has been indented:
I'd be really grateful for any help.
I managed to create a hack to make this work as no one seems to know the answer.
In the language file, the relevant entry is "%s (Selected)". %s is replaced by the menu title in the plugin code.
I just removed the "(Selected") and now it works fine FOR MY USE.
It may break other things I am unaware of, but it works for me
I've following issue: I have two kogrids on my page. One one the left, one on the right side.
Between them I added two buttons so that the user can move selected items from the left to the right side and the other way round.
Therefor my view model has 4 arrays, ItemsA, SelectedItemsA, ItemsB and selectedItemsB. The two kogrids are configured as followed:
<div data-bind="koGrid: {
data: ItemsA,
selectedItems: SelectedItemsA,
displaySelectionCheckbox: false,
enableRowReordering: true,
enableSorting: false,
columnDefs: [
{ field: 'Name', cellTemplate: tableCellTemplate, cellClass: 'player-row' },
{ field: 'ClubName', displayName: 'Mannschaft' },
{ field: 'DisplayPosition', displayName: 'Position', cellTemplate: playerPositionNameTemplate}
],
footerVisible: false
}">
</div>
On moving items from left to the right, I will push every item from SelectedItemsA into ItemsB via:
$.each(self.SelectedItemsA(), function(idx, player) {
self.ItemsB.push(player);
});
And cleaning the selection on the left side via:
self.ItemsA.removeAll(self.SelectedItemsA());
They items will appear correctly in the grid on the right side bounded to ItemsB, but they are automatically selected. So if I want to move a single item back, I first have to deselect all items I moved previously! How can I prevent kogrid from automatically selecting newly added items?
Its a bug in koGrid.
In koGrid-2.1.1.debug.js:
self.setRenderedRows = function (newRows) {
self.renderedRows(newRows);
self.refreshDomSizes();
};
newRows is an array of the rows you selected / copied.
koGrid copies them as they are, that means, that newRows.selected() (observable) is true.
UPDATE
Turns out, the above change would also de-select rows after they scrolled out of vision range. But i figured you can just set __kg_selected__ to false for each row you want to copy.
Say:
ko.utils.arrayForEach(self.SelectedItemsA(), function(player) {
player.__kg_selected__ = false;
});
and then push them all to the new array:
ko.utils.arrayPushAll(self.ItemsB(), self.SelectedItemsA());