We Keep Coding

How to use CKEditor plugins in a non npm environment?

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.

How to get the before upload event at the elfinder plugin (a file manager plugin)

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);
}
};

Any hacks to use wrapper js lib instead of Extjs 5.x by Sencha CMD 5.x?

In respect of Extjs 4.1.x I was able to use custom/wrapper library to manipulation model, store, view, controller as well as other utilities. So my demand is to replace boiler plate of code through my custom/wrapper library. Regarding the code as bellow:-
var Lib = Lib || {
$class : 'Lib',
$package : 'Default',
version : '1.0.00',
getName : function(){
return Lib.$class;
},
define : function(name, config){
return Ext.define(name, config);
}
};
is my custom library, right now I would like to replace the following code
Ext.define('Myapp.view.main.MainModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.main',
data: {
name: 'Myapp'
}
});
as bellow the replacement/wrapper of Extjs code:
Lib.define('Myapp.view.main.MainModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.main',
data: {
name: 'Myapp'
}
});
But here is the problem cause Sencha CMD 5.x build error where previous version of Sencha SDK, CMD support to use 3rd party library simply use it in index.html
<script id="extwrapper" type="text/javascript" src="Lib.js"></script
but latest Sencha CMD 5.x with Extjs 5.x occurred compilation error. Any way I would like to use custom/wrapper library instead of Extjs 5.x use directly. Do you have any hacks? While I tried by adding my customer/wrapper library in app.json as
"js": [
{
"path": "${ext.dir}/build/ext-all-rtl-debug.js"
},
{
"path": "${ext.dir}/Lib.js",
"bootstrap": true
},
{
"path": "app.js",
"bundle": true
}
],
still its appear Sencha CMD 5.x build error. Any kind of reference does not support on className even java script closure/inline function. for example
Ext.define((function(){ return 'Myapp.view.main.MainModel';})(), {
extend: 'Ext.app.ViewModel',
alias: alias,
data: {
name: 'Myapp'
}
});
on data it's support simple java script closure/inline function but no reference. for example
Ext.define( 'Myapp.view.main.MainModel', (function(){
return {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.main',
data: {
name: 'Myapp'
}
}
})());
even when I am going to use simple reference it does not work. for example
Ext.define( 'Myapp.view.main.MainModel', (function(){
var data = {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.main',
data: {
name: 'Myapp'
}
};
return data;
})());
Build Failure for code as above I mentioned
Sencha Cmd v5.0.2.270
[INF] Processing Build Descriptor : default
[INF] Loading app json manifest...
[WRN] C1003: Unsupported Ext.define syntax (function does not return object lite
ral) -- g:\js\extjs\myapp\app\view\main\MainModel.js:1
[WRN] C1003: Unsupported Ext.define syntax (function does not return object lite
ral) -- g:\js\extjs\myapp\app\view\main\MainModel.js:1
[ERR] C2008: Requirement had no matching files (Myapp.view.main.MainModel) -- g:\j
s\extjs\myapp\app\view\main\Main.js:12:50
[ERR]
[ERR] BUILD FAILED
[ERR] com.sencha.exceptions.ExBuild: Failed to find any files for g:\js\extjs\my
app\app\view\main\Main.js::ClassRequire::Myapp.view.main.MainModel
[ERR]
[ERR] Total time: 7 seconds
[ERR] The following error occurred while executing this line:
g:\js\extjs\myapp\.sencha\app\build-impl.xml:376: The following error occurred whi
le executing this line:
g:\js\extjs\myapp\.sencha\app\init-impl.xml:292: com.sencha.exceptions.ExBuild: Fa
iled to find any files for g:\js\extjs\myapp\app\view\main\Main.js::ClassRequire::
Myapp.view.main.MainModel
Where is the problem? There was no restriction with Extjs 4.1.3 with previous version Sencha SDK/CMD. but why they added such type of feature?
By Extjs-4.1.3 I was able to write and compile as the code as bellow
Ext.define(Lib.view.getAbsView('V01I001001X01'), {
extend : 'Ext.form.Panel',
alias : Lib.app.getAlias('V01I001001X01'),
id : 'V01I001001X01'.toLowerCase(),
bodyStyle : {
background : 'none'
},
defaults : {
//TODO
},
initComponent: function() {
var me = this;
//TODO
me.callParent(arguments);
}
});
Which one work as like as hard code as bellow
Ext.define('Myapp.view.m01001.m0i001.v01i001001.V01I001001X01'), {
extend : 'Ext.form.Panel',
alias : 'widget.v01i001001x01'
id : 'v01i001001x01',
bodyStyle : {
background : 'none'
},
defaults : {
//TODO
},
initComponent: function() {
var me = this;
//TODO
me.callParent(arguments);
}
});

Part of your problem is that Sencha Command does not just run JavaScript it also parses and compiles it in order to do a lot of "clever" stuff. This means that there are some restrictions on how your code should be formed. See:
http://www.sencha.com/forum/showthread.php?261509-Unsupported-Ext.define-syntax-%28function-does-not-return-object-literal%29
You have this code:
Ext.define( 'Myapp.view.main.MainModel', (function(){
return {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.main',
data: {
name: 'Myapp'
}
}
})());
Which it seems CMD is parsing and seeing the second argument as something other than an object literal (which makes sense since it's not, it's a function). Obviously the following would work:
Ext.define( 'Myapp.view.main.MainModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.main',
data: {
name: 'Myapp'
}
});
I don't understand why you would ever want to use the first form, it seems to have no advantage over the standard method of doing it. Either way though, it looks like you would be better trying to work with Ext JS and CMD rather than hacking around this issue.

Is there a way to build a Dojo module that includes a single file from the package location?

I have the following build profile for a small app:
var profile = (function(){
var copyOnly = function(filename, mid){
/* ..snip.. */
};
return {
basePath: "../../src",
releaseDir: "../dist",
releaseName: "lib",
action: "release",
packages: [
'dojo',
'dijit',
//'dojox',
'amd',
{
name: 'lodash',
location: 'lodash',
trees: [
[".", ".", /(\/\.)|(~$)|(vendor|test)/]
]
},
{
name: 'd3',
location: 'd3',
main: 'd3.min',
trees: [
[".", ".", /(\/\.)|(~$)|(src|lib|test)/]
]
},
{ name: 'app', location: 'app' }
],
layers: {
"dojo/dojo": {
include: [ "dojo/dojo", "amd/d3","amd/gmaps",
"app/main", "app/run" ],
customBase: true,
boot: true
}
},
resourceTags: {
/* ..snip.. */
}
};
})();
The problem is this: all I need is the lodash.min.js file to be processed by the Dojo build system. Unfortunately, when you include a package definition in your profile, the build system looks at all files in the relevant directory using an implicit trees value. You can overwrite it (as I have done here) and add some ignore directives, but this is ugly and leaves you open to missing something of. What I'd like to do is affirmatively indicate precisely which file(s) that I'm interested in processing for my build process.
Does Dojo allow you to do this? The documentation is a little scant in this area, but if you can help me find a resource that explains this more clearly, that would be great!

As of 1.9 at least, I believe this can be done:
// ... snip ...
{
name:'lodash',
location:'lodash',
trees:[],
dirs:[],
files:[
["lodash.min.js"]
]
},
This explicitly lists the files, while also squashing implicit tree and directory discovery.
My belief here is based on a cursory review of util/build/discover.js -- but as I read the documentation files only should be supported.

add multiple extra plugins on a toolbar of ckeditor

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'