I have a console error that says Uncaught ReferenceError: tinymce is not defined and I really don't know how to solve that. It says that the error is in the javascript file below:
(function() {
"use strict";
tinymce.PluginManager.add('wdm_mce_button', function( editor, url ) {
editor.addButton('wdm_mce_button', {
text: 'Team',
icon: false,
onclick: function() {
// change the shortcode as per your requirement
editor.insertContent('[team_section]');
}
});
editor.addButton('services', {
text: 'Services',
icon: false,
onclick: function() {
// change the shortcode as per your requirement
editor.insertContent('[services_section]');
}
});
});
})();
So the error should be in the "tinymce.PluginManager.add" line. I must mention that this code is running on wordpress and I use it to add some buttons in my classic editor. I'm waiting for some help please.
Thank you!
Related
I am trying to make an essay writing test website, I input an essay using a text area and then I want to comment on that inputted text like PDF annotations/highlighted the comment I have tried the annotation API for TinyMCE but it throws an error
invalid call to Attr.set. Key data-mce-alpha :: Value undefined :: Element
tinymce.min.js:8:48481
Error: Attribute value was not simple
and Annotation.js is 5 years old and jquery throws an error on that
any idea how I can do it using JS and store it?
If you used example code from here https://www.tiny.cloud/docs/advanced/annotations/ then that example code did not work for me either.
This is a part of code which was in documentation:
ed.on('init', function() {
ed.annotator.register('alpha', {
persistent: true,
decorate: function(uid, data) {
return {
attributes: {
'data-mce-alpha': data.alpha
}
};
}
});
});
Change data.alpha to data.comment, so that piece of code should look like this:
ed.on('init', function() {
ed.annotator.register('alpha', {
persistent: true,
decorate: function(uid, data) {
return {
attributes: {
'data-mce-alpha': data.comment
}
};
}
});
});
Then example will work - just need to write some text in comment prompt dialog otherwise it will throw the same error - so make sure that you will implement some kind of check if comment string is not empty.
Hope that helps.
Well I solved the issue by adding an older Jquery,
here is the code:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="/js/annotator-full.min.js"></script>
<link rel="stylesheet" href="/css/annotator.min.css">
<script type="text/javascript">
jQuery(function ($) {
var annotation{{ $questionss->id }} = $('#content{{ $questionss->id }}').annotator().annotator('addPlugin', 'Tags');;
annotation{{ $questionss->id }}.annotator('addPlugin', 'Store', {
prefix: '/annotation',
loadFromSearch : {
page : {{ $questionss->q_type_id }}
},
annotationData : {
page : {{ $questionss->q_type_id }}
},
urls: {
create: '/store',
update: '/update/:id',
destroy: '/delete/:id',
search: '/search'
}
});
hope it helps
I'm implementing a FileUploader, displayed in a Dialog. Relevant Code:
function onAddExcelData() {
var that = this;
if(this.fixedDialog === undefined) {
this.fixedDialog = new sap.m.Dialog({
title: "Choose CSV File for Upload",
beginButton: new sap.m.Button({
text: "Upload",
press: function(oEvent) {
that.fixedDialog.close();
}
}),
content: [
new sap.ui.unified.FileUploader("excelUploader")
],
endButton: new sap.m.Button({
text: "Cancel",
press: function() {
that.fixedDialog.close();
}
})
})
this.getView().addDependent(this.fixedDialog);
this.fixedDialog.attachBeforeClose(this.setDataToJsonFromExcel, this);
}
this.fixedDialog.open();
}
Whenever I want to click the beginButton or endButton, the console shows the error
Uncaught TypeError: I.fFunction.call is not a function
I read about this issue and the suggested solution is always, to define a new variable before calling the press function. But even though I added that variable, I still get the error. Does anyone have further ideas?
It has something to do with this line. I don't know what it does so I can't comment further on this issue. The functions work just fine without it. Are you sure function setDataToJsonFromExcel exists in your controller?
Hope this helps.
this.fixedDialog.attachBeforeClose(this.setDataToJsonFromExcel, this);
I'm trying to edit open source program called PartKeepr (v0.1.9). In a specific part of program I want to add a button that opens a new Ext.window.Window. My codes are as following which doesn't work (I'm pretty new in extjs but I'm given a hard task I guess, so I'm open to all advice for where to start learning, I'm just trying to learn from existing codes and apply some things by looking similar parts of available code)
Ext.define('PartKeepr.FindWindow',{
extend:'Ext.window.Window',
constrainHeader: true,
title: i18n("Find Number"),
initComponent: function() {
this.okButton=Ext.create("Ext.button.Button",{
text:i18n("OK")});
this.buttons=[this.okButton];
}
});
{
xtype: 'button',
text: i18n("Find"),
name: 'findButton',
handler: Ext.bind(this.findNumber, this)
}
findNumber: function(){
var j = new PartKeepr.FindWindow();
j.show();
}
Edit: When I press the find button, console giving me the following error: ext-all.js:21 Uncaught TypeError: Cannot read property 'insert' of undefined
You need to call the superclass initComponent method:
Ext.define('PartKeepr.FindWindow', {
extend: 'Ext.window.Window',
constrainHeader: true,
title: i18n("Find Number"),
initComponent: function() {
this.okButton = Ext.create("Ext.button.Button", {
text: i18n("OK")
});
this.buttons = [this.okButton];
this.callParent();
}
});
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 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(); //