I want to add custom tool in kendo editor.
It is pretty good in jQuery method via directive, But have problem with model binding.
It seems I have to use angular method like this:
<textarea naccordion id="htmleditor" ng-model="Model._Active.Paragraph" class="editor" k-options="accordion" k-encoded="false" kendo-editor k-tools="['fontName','bold','italic','underline','strikethrough','fontSize','justifyLeft','justifyCenter','justifyRight','justifyFull','foreColor','insertUnorderedList','insertOrderedList','indent','outdent','createLink','unlink','insertImage','cleanFormatting','backColor','viewHtml','formatting']"></textarea>
So, I put my k-options code in controller:
$scope.accordion = {
tools:
{
name: "accordion",
tooltip: "Accordion items",
exec: function (e) {
var editor = $(this).data("kendoEditor");
editor.exec("inserthtml", {
value: "<accordion close-others='true'><accordion-group is-open='Model._openSettings'><accordion-heading>[Title]</accordion-heading><br>[Text]</accordion-group></accordion>"
});
}
}
};
It is not work.
I do not know what is accordion scope is right or no?
Any idea?
tools needs to be an array:
$scope.accordion = {
tools:[
{
name: "accordion",
tooltip: "Accordion items",
exec: function (e) {
var editor = $(this).data("kendoEditor");
editor.exec("inserthtml", {
value: "<accordion close-others='true'><accordion-group is-open='Model._openSettings'><accordion-heading>[Title]</accordion-heading><br>[Text]</accordion-group></accordion>"
});
}
}
]
};
Related
I'm creting a jquery context menu, using https://swisnl.github.io/jQuery-contextMenu/ .
I've sucessfully done the creation part of the submenu.
I had to use build, in order to have some data that is only available on runtime.
This data appears on a submenu, and I need to have a title on each of those submenu items, as well as click funtion on each of them.
I cant seem to make it work, both the title and the function on those submenu items.
Here is my code:
$.contextMenu({
selector: '.gridRelatorioCursorMorada',
build: function ($triggerElement, e) {
var coords = $triggerElement[0].attributes['data-coord'].nodeValue;
var coordsArray = coords.split(',');
return {
callback: function (key) {
if (key === 'get') {
getdata();
}
},
items: {
get: {
name: "Get data"
},
see: {
name: "See data",
items: {
normal: { name: coords },
graus: { name: dd2dms(coordsArray[0], coordsArray[1]) },
siresp: { name: decimalToSIRESPCoordinates(coordsArray[0], coordsArray[1]) }
}
}
}
};
}
});
Since the events part of contextMenu doesnt work with build, I dont know what else to do.
I've also added the following code:
$(document).on('contextmenu', function () {
$('.context-menu-submenu > ul > li').attr('title', 'tituro');
});
But it also doesnt work.
My mistake.
Event does work on build.
This got me to get the title on each of the submenu items.
The click function I got it working with the callback function.
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'm trying to use bootstrap-markdown and everything works fine except I can't call the plugin via JavaScript. For instance:
$("#content").markdownEditor({
autofocus: false,
savable: false,
iconlibrary: 'fa',
resize: 'vertical',
additionalButtons: custom_buttons, // an array defining custom commands
onPreview: function (e) {
var content = e.getContent();
console.log('content', content);
}
});
Does anyone has any ideas what might be the case? Couldn't find anything useful on the web or repo's github page. And yes I've already included markdown.js and to-markdown.js which weren't mentioned in the docs at all but it was quick find anyway.
All I need now is to call the editor, add a couple of custom toolbar buttons (image upload, code block insert etc.) and be done with it.
Code snippets, links & live fiddles are much appreciated :)
For some reason, changing the order of script references fixed this.
Here's the order now:
lib/markdown.js
lib/bootstrap-markdown.js ,
lib/to-markdown.js
And here's my initialization:
$(function () {
var custom_buttons = [[
{
name: "insertCode",
data: [{
name: "cmdInsertCode",
toggle: "toggle",
title: "Insert Code",
icon: "fa fa-fire",
callback: function (e) {
var selected = e.getSelection(),
content = e.getContent();
// e.replaceSelection(chunk);
// var cursor = selected.start;
//e.setSelection(cursor, cursor + chunk.length);
console.log('cmdInsertCode clicked');
}
}]
}
]];
$("#content").markdown({
autofocus: false,
savable: false,
iconlibrary: 'glyph',
resize: 'vertical',
additionalButtons: custom_buttons,
onShow: function (e) {
console.warn('e:editor shown');
}
});
});
Kudos :godmode:
I'm using the video.js 4.12 library and I want replace control bar items. For example, move one of my custom buttons to the 2nd slot of the control bar.
How do I change the order of items on the taskbar? I had no luck on Google.
Videojs place good class on elements. By this way you can identify control bar's elements.
To handle the item's order I used Jquery :
var createPrevButton = function() {
var props = {
className: 'vjs-control player-prev-button', //We use this class in Jquery
innerHTML: '<div class="vjs-control-content"></div>',
role: 'button',
'aria-live': 'polite',
tabIndex: 0
};
return videojs.Component.prototype.createEl(null, props);
};
var myPlayer = me.player = videojs(me.idVideo, {
plugins : { chapters : {} },
children: {
controlBar: {
children: [
{
name: 'playToggle'
},
{
name: 'currentTimeDisplay'
},
{
name: 'timeDivider'
},
{
name: 'durationDisplay'
}
/*
...........
*/
]
}
}
});
$(".player-prev-button").insertAfter(".vjs-play-control");
$(".player-next-button").insertAfter(".player-prev-button");
After the instanciation of my player just handle item by Jquery.
I think it's better than use CSS.
But the best way should be by videojs's option or somethink like that
what i am trying to do is dynamically generate WordPress tinymcs listbox values. but it seems my getValue function is not working well or its not possible to add getvalue() function to value parameter. this code is not working. please tell me how to do this. i need this for my new plugin development. sorry for bad english :(
here i have posted the code bellow
(function() {
tinymce.PluginManager.add('AP_tc_button', function( editor, url ) {
editor.addButton( 'AP_tc_button', {
text: 'My test button',
icon: 'wp_code',
onclick: function() {
editor.windowManager.open( {
title: 'Select Your AD',
body: [
{
type: 'listbox',
name: 'level',
label: 'Header level',
values: getValues()
}],
onsubmit: function( e ) {
editor.insertContent('dd');
}
});
}
});
});
})();
function getValues() {
//Set new values to myKeyValueList
tinyMCE.activeEditor.settings.myKeyValueList = [{text: 'newtext', value: 'newvalue'}];
return editor.settings.myKeyValueList;
}
Try changing return statement to
return tinyMCE.activeEditor.settings.myKeyValueList;
variable editor is probably undefined in global scope.