I want to add multiple plugins(which i have created) on a toolbar of ckeditor. I have written below code in config.js
CKEDITOR.editorConfig = function( config ) {
config.toolbar_Full = [
['Styles', 'Bold', 'Italic', 'Underline', 'SpellChecker', 'Scayt', '-', 'NumberedList', 'BulletedList'],
['Link', 'Unlink'], ['Undo', 'Redo', '-', 'SelectAll'], '/', ['timestamp', '-', 'linkbutton']
];
config.extraPlugins = 'linkbutton, timestamp';
};
and i have two different custom plugins. but another plugin is not accepted. How to add another plugin on a one toolbar?
You are just right except of the space after the comma so your definition regarding http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.extraPlugins should be:
config.extraPlugins = 'linkbutton,timestamp';
You can add another custom plugin like this also:
extraPlugins: 'linkbutton,timestamp,justify'
Related
I have problem with integrating summernote into my code I keep having this problem. I know there is lot of answer out there but I still can't find solution to mine.
Uncaught TypeError: $(...).summernote is not a function
and When I wrapped it in the $(document).ready(function() { I got additional error in my inspect with :
jQuery.Deferred exception: $(...).summernote is not a function TypeError: $(...).summernote is not a function
When I click on the line of error in my inspect it showing me at this line code of mine
let msg = $("#summernote").summernote("code");
I have declare the summernote cdn at my header script
<script type="text/javascript">
$(document).ready(function() {
$('#summernote').summernote({
placeholder: 'description',
tabsize: 2,
height:200,
toolbar:
[
['style', ['style']],
['font', ['bold', 'underline', 'clear']],
['color', ['color']],
['para', ['ul', 'ol', 'paragraph']],
['table', ['table']],
['insert', ['link', 'picture', 'video']],
['view', ['help']]
]
});
});
</script>
<div class="nk-block nk-block-lg">
<div id="summernote"></div>
</div>
How do I fix this ?
More than likely the function isn't available while the page is loading (when it hits your script). Try wrapping it in $(document.ready(function() { /*your code here */ }); to run it after the page finishes loading all its assets (including summernote).
Found my own answer. I have to declare the script into another file and that is how I solve my own questions.
I have a simple webpage which is using Jquery. I want to use CKEditor 5 and it's Mention plugin feature. I know already that CKEditor 5 has a modular architecture and each plugin has a lot of dependencies so they recommend using npm to resolve all the dependencies but I am not at all using npm and do not want to use it. After some research, I found that I can create a custom build using online builder so I went ahead and created my own custom build which has Mention plugin with it. After that, I included mention config while applying ckeditor on my text area as below:
ClassicEditor
.create( document.querySelector( '#editor'), {
toolbar: [ 'heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote' ],
heading: {
options: [
{ model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
{ model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' },
{ model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' }
]
},
mention: {
feeds: [
{
marker: '#',
feed: [ '#Barney', '#Lily', '#Marshall', '#Robin', '#Ted' ],
minimumCharacters: 1
}
]
}
} ).then(function(editor){
window.editor = editor ;
editor.editing.view.document.on( 'keyup', ( evt, data ) => {
ChatterFeed.chatterEvents(data,editor);
} );
})
.catch( error => {
console.log( error );
} );
but this code does not seem to be working and it doesn't do anything when I press # in the textarea. I am not sure if I am missing something here as I have already spent tons of time to search this with no luck.
It was not working because I was showing this editor in the Bootstrap modal popup and may be due to some css issue, it wasn't working. As soon as I showed it on the main html page, it started working fine.
I'm using the latest version (4.7.0) of ckeditor.
I installed it via npm and it lives inside a regular frontend (no fancy js framework).
Problem: The translation js-file - im my case "de.js" is loaded from the wrong url.
When I check the code I see the following in the code:
CKEDITOR.scriptLoader.load(CKEDITOR.getUrl("lang/"+a+".js"),f,this)
Which add just lang/de.js to my current url instead of going to my static file folder.
My config looks like this:
CKEDITOR.editorConfig = function (config) {
config.toolbar = 'Custom';
config.toolbar_Custom = [
{
name: 'basicstyles', items: ['Bold', 'Italic', 'Underline', 'Strike', 'Styles',
'Format', 'NumberedList', 'BulletedList', 'Undo', 'Redo', 'Image', 'Smiley'],
},
];
config.extraPlugins = 'clipboard,dialog,uploadimage,uploadfile';
config.imageUploadUrl = '/uploader/';
config.uploadUrl = '/uploader/';
};
I tried to add:
config.baseHref = '/static/ckeditor/';
and
config.path = '/static/ckeditor/';
and
config.basepath = '/static/ckeditor/';
But still, the code is loaded from the relative URL.
Does anybody know how to properly configure the editor so it's not loading the files from a (wrong) relative path?
Thx
Ron
UPDATE:
This is my config file, I add it via the customConfig parameter:
CKEDITOR.editorConfig = function( config ) {
config.toolbar = 'Custom';
config.toolbar_Custom = [
{
name: 'basicstyles', items: ['Bold', 'Italic', 'Underline', 'Strike', 'Styles',
'Format', 'NumberedList', 'BulletedList', 'Undo', 'Redo', 'Image', 'Smiley'],
},
];
config.extraPlugins = 'clipboard,dialog,uploadimage,uploadfile';
config.imageUploadUrl = '/uploader/';
config.uploadUrl = '/uploader/';
config.basePath = '/static/ckeditor/';
};
There is CKEDITOR.basePath which defines:
The full URL for the CKEditor installation directory.
So the paths for files loaded by CKEditor will be based on this config option if it is set.
You can also use window.CKEDITOR_BASEPATH (see this answer for detailed description):
It is possible to manually provide the base path by setting a global variable named CKEDITOR_BASEPATH. This global variable must be set before the editor script loading.
Any of this two should solve your issue, just use:
CKEDITOR.basePath = '/static/ckeditor/';
or
window.CKEDITOR_BASEPATH = '/static/ckeditor/';
The second one is useful when loading CKEditor by any module loader (like browserify). If it is not the case for you, the first option should be sufficient.
I am working on the file manager using jquery
here is the code:
var elfinder = $('#elfinder').elfinder({
url: '<?= $connector; ?>',
soundPath: '<?= site_url('assets/plugins/elFinder/sounds/rm.wav'); ?>',
height: 700,
lang: 'zh_TW',
uiOptions: {
// toolbar configuration
toolbar: [
['back', 'forward'],
['reload'],
['mkdir', 'upload'],
['copy', 'cut', 'paste', 'rm'],
['rename'],
['view', 'sort']
]
},
contextmenu: {
navbar: ['open', '|', 'copy', 'cut', 'paste', 'duplicate', '|', 'rm', '|', 'info'],
cwd: ['reload', 'back', '|', 'upload', 'mkdir', 'paste', '|', 'info'],
files: [
'open', 'quicklook', 'sharefolder', '|', 'download', '|', 'copy', 'cut', 'paste', 'rm', '|', 'rename', '|', 'info'
]
},
ui: ['toolbar', 'tree', 'stat'],
handlers: {
add: function (e) {
},
upload: function (e, instance) {
alert("test1");
//alert("test2");
//return false;
//console.log(event.data);
//console.log(event.data.selected); // selected files hashes list
}
}
});
The problem are,
1) I would like to have some checking before file upload, if fail then cancel the upload, but in either add / upload event it is fire after upload start , and fire several time
2) Also, it can't capture the on upload complete event as the upload event fire several time
Here is the event list:
https://github.com/Studio-42/elFinder/wiki/Client-event-API
Any suggestion , thanks a lot for helping.
Updated:
Find in Server side, there is a bind options , to override the command e.g. "rm mkdir" etc... however , I would like to get the user id when store, so are there list of event that I can override in client side? Thanks
https://github.com/Studio-42/elFinder/wiki/Connector-configuration-options
Please override the function because there is no hook point before command execution.
var elfinderInstance = $('#elfinder').elfinder({ /* Your options */ }).elfinder('instance');
elfinderInstance.upload = function(files) {
var hasError;
elfinderInstance.log(files); // print to browser consol
if (hasError) {
elfinderInstance.error('upload error');
return $.Deferred().reject();
} else {
return elfinderInstance.transport.upload(files, elfinderInstance);
}
};
I am trying to load a List in a Panel but i am getting following error
Uncaught TypeError: Cannot call method 'substring' of undefined
here is my ProfileContainer.js which contains the List
Ext.define('demo.view.ProfileContainer', {
extend: 'Ext.Panel',
xtype: 'profilecontainer',
// requires: [ 'Ext.TitleBar', 'demo.view.ProfileList' ],
requires: [ 'Ext.TitleBar' ],
config: {
items: [{
xtype: 'titlebar',
title: 'demo',
cls: 'bms-bg'
}, {
xtype: 'profilelist'
}]
}
});
here is the code of ProfileList.js
Ext.define('demo.view.ProfileList', {
extend: 'Ext.dataview.List',
alias: 'widget.profilelist',
requires: ['demo.store.ProfileStore'],
config: {
store: 'ProfileStore',
itemTpl: '{name}',
}
});
here is my ProfileStore.js
Ext.define('demo.store.ProfileStore',{
extend:'Ext.data.Store',
config: {
model: 'demo.model.ProfileModel',
data:[
{ name: 'John Rambo' },
{ name: 'Brad Pitt'}
]
}
});
and ProfileModel.js
Ext.define('demo.model.ProfileModel', {
extend: 'Ext.data.Model',
config: {
fields: [
{ name: 'name', type: 'string' }
]
}
});
but my list isnt loading into panel and i am getting above mentioned error
xtypes are alias defined as widget
So you need to define them like:
alias:'widget.profilecontainer',
or
alias:'widget.profilelist',
Some information on require and uses:
You have dependencies between your classes which need to be resolved. This is normally done by the buildtool or if you don't run it by yourself.
Dependencies are one of the reasons why you use require or uses where require can be threated as strict because it ensure that the class is there as soon as it get required
And here comes a the difference: because this is not valid if you lazy load. At this time the required class will be available after the
class is defined. The build tool cleans this up places the required
classes before the class definition
while uses can be treated as lose because it only ensure that the class exist the time the Ext.onReady get called.
Normally this wan't give you headache but if the class definition requires that dependencies get resolved at definition time it will blow up when lacy loaded. If you now the dependency (xtype) that is causing this you can try to load it manually by using
Ext.require('class');
which need to get placed before the class definition.