Can I control where CKEditor finds plugins to load? - javascript

I'm writing a CKEditor plugin specific to my Web app. Until now, I've successfully kept my own files outside of the CKEditor code structure, but the only documentation I can find about the plugin creation process (being a user-made tutorial, no less) says to just shoehorn my plugin code into ckeditor/_source/plugins.
Is this really the only way to go? Am I stuck with commingling my code with CKEditor release code, or is there a way to tell it where to load plugins from? A PLUGINPATH setting, if you will?

Looking at the tutorial you posted, I see that the section called Plugin Configuration uses CKEDITOR.plugins.add to load the plugin resources. Have you tried using CKEDITOR.plugins.addExternal instead? The API documentation for it can be found here.

You want to load the uncompressed, unpacked plugins to load for debugging purposes right?
Just do this. Refer ckeditor_source.js instead of ckeditor.js. That way your created plugin inside the ckeditor/_source/plugins will run.
Read Minimum Setup for CKEditor with a microscope :)
There is a line like this here
_source — this directory contains CKEditor source code. It is needed
only if you intend to use the
ckeditor_source.js script and load
CKEditor from source files.
Too little documentation for a wonderful editor!
Update:
And inside the wonderful tutorial link you have provided, George Wu has mentioned that in the first paragraph also.
During development, you will want to
execute from source code by using
ckeditor_source.js instead of
ckeditor.js.
Now, create
ckeditor_source\plugins\footnote
folder and plugin.js under that
folder.
BTW, I found Tutorial create external plugin for CKEDITOR helpful too.

Related

How to implement plugins into Electron app?

I'm looking for a way to implement "Plugins" for my Electron tool.
Below is a pseudo example of how I'm thinking it would work
Supply .js/.zip/plugin file
File would contain name of plugin, and it's category (Global, Team centric, Misc)
File would contain HTML for the GUI, which get's placed in a div designated for tool space. This name would be added as an option to the necessary Select, as well as logic added to pull in the HTML to the same div
In the tool, select the plugin file:
page will load the JavaScript script, and add option to select along with logic to switch to the plugin
The hope is to automate my current process.
Currently I'm manually updating the index page to reference the new JavaScript script, and to add the option on the select
The JavaScript Script has logic in it looking at the Select, and looking to see if the option was selected
which then pulls in it's own HTML via a function within
Is there anything I can reference/utilize to make this work?
After 4+ months of working on this, I've managed to get this to work. I will try to outline my approach.
Each "plugin" or "tool" will need it's own .js file
the js file should contain an exports.html function that will return the html for the tool
the js file should contain an exports.Events function that adds all relevant event listeners
create a json file cataloging each tool, along with information needed i.e. a description, image path, .js file path, etc.
require the .js file when selected, load the html and the events
parse the json to figure out which tool to load along with needed info
all i need to do is update the json file and upload the .js file to add a new plugin.
I developed an electron app using vue as the front-end.
My idea was to develop plugins as vue plugins and publish via npm.
I used live-plugin-manager to install and uninstall plugins.
The dependencies were automatically removed by making use of a counter
The only problem I faced was how to load these installed plugins into my main app.
The workaround I found was posted as answer to my own question at How to use electron to load the vue plugins installed dynamically into a plugins folder
Hope it helps
I know I'm a little late to the party but I encountered the same problem. To solve it I have built a plugin framework for Electron called Pluggable Electron and it is available on npm.
The framework handles the lifecycle of plugins, provides as npm packages, like installation, activation, removal, etc. The plugins can then be called on at any time to exend the core app functionality.
The framework is still under development but you can find a 1st version here: pluggable-electron.
I expect it is too late for Marker but still answering here for anyone else that might have this question.

Adding Jquery and Other JS libraries to Firefox Extension

How do I include jquery and other scripts in my firefox extension? I know this topic is a copy of many other questions asked on SO, but none of them were so helpful.
I tried using in one of the JS files where i want to use jquery,
Components.utils.import('chrome://myaddon/content/jquery.min.js');
but it gives me an error saying,
ReferenceError: window is not defined
I also tried adding the script in XUL file, but somehow, I cant get it to work as well.
Is there any other way around it?
Ok man here's the solution to using Custom Events.
Much thanks to #M.J. Saedy for figuring this one out.
Gist - HERE is a template that will listen to custom events dispatched from non-privileged scope.
You can't import a library to use in your addon. What you gotta do is inject that into the web page you want to use it on.
Is this a bootstrap addon? Did you make a chrome.manifest? Before injecting to websites you have to make the injectable stuff contentaccessible in the manifest.
so an example manifest file:
content myaddon ./ contentaccessible
then your code of Cu.import('chrome://myaddon/content/jquery.min.js') will work
if you want to use this library in an iframe for like a panel. put in that iframe <script src="chrome://myaddon/content/jquery.min.js">
Let me know if you need more help, if you upload it to GitHub I can see what exactly you're doing

How can I reverse engineer my JavaScript files with js/uml?

Goal
My goal is to get an UML model out of my JavaScript project (consisting of several .js files) and store it as XMI.
How far I've come
I searched the internet and found out js/uml is the first place to go.
I've managed it to get the js/uml plugin running with Eclipse 3.7.1 (Win32) and a local installation of my pre-downloaded additional plugins:
mdt-uml2tools-Update-incubation-I201103290512.zip (installs required org.eclipse.uml2.diagram.clazz 0.10.0)
jsuml-eclipse-0.8.4.zip (only works with Eclipse 3.7.1 (Indigo))
I loaded the provided example project jsuml-example-yui-0.8.4.zip into Eclipse and added all my .js files to this project also.
Problem
Now I'm stuck and do not get it how to call the reverse engineering of my .js files. I can call 'New'->'Other'->'UML 2.1 Diagrams'->'Class Diagram' from the project's context menu, but I don't get the following steps of that assistant dialog, nor do I get it if this is the right way at all. Please, could you help me with an easy understandable click tutorial? The js/uml homepage does not explain it well enough IMHO. Thanks for your help in advance.
Someone adapted UML for web artifact, its called the "WAE" extension of UML. This way you can see not only your javascript files but the html and css. If you work with node.js, i created a module that generate class diagram for javascript/node/html/css. Its called wavi. For javascript, function,variable are automatically recognized. You can use it for documenting your application.
https://www.npmjs.org/package/wavi
Well, I think I have come quite close.
There's a command-line tool called Code2Flow. which uses GaphViz to generate graphs for Python and JavaScript sources.
I tried it, it does generate the graphs but somehow i can't make to do right.
I hope this will help you or someone.

Tool for showing javascript, CSS, HTML dependencies

I am relatively new to JavaScript and trying to find a way to get a good overall understanding of JavaScript projects, frameworks, etc.. For example when I look at a JavaScript based source on Github I would like a one page snapshot of the dependencies between the html, css and the various .js files requiring further js files( modules) , instead of looking at the source code tree and opening up the individual files. What I am looking for is either an object diagramming tool or something like a "file diagram".
Is there a tool out in the wild already doing this? (and ,yes I have already tried Google-ing it)
(I used to use a tool in the Windows world for tracking DLLs which is a similar concept.)
https://github.com/nodejitsu/require-analyzer gets you part of the way there.
One could also implement a file dependency analyzer if you are looking for more comprehensive html/template analysis with these two:
http://nodejs.org/docs/v0.4.8/api/fs.html#fs.readdir
http://nodejs.org/docs/v0.4.8/api/fs.html#fs.watchFile
Using Firebug you can see the files requested by each page, the server response and you can filter them by type. The HTML view lets you see the entire page including related js/css content. I don't think it's exactly what you are looking for, but I find it helpful for this sort of thing.
here are some bookmarklet code that could help (taken from https://www.squarefree.com/bookmarklets/webdevel.html
view style sheet :
javascript:s=document.getElementsByTagName('STYLE');%20ex=document.getElementsByTagName('LINK');%20d=window.open().document;%20/set%20base%20href/d.open();d.close();%20b=d.body;%20function%20trim(s){return%20s.replace(/^\s*\n/,%20'').replace(/\s*$/,%20'');%20};%20function%20iff(a,b,c){return%20b?a+b+c:'';}function%20add(h){b.appendChild(h);}%20function%20makeTag(t){return%20d.createElement(t);}%20function%20makeText(tag,text){t=makeTag(tag);t.appendChild(d.createTextNode(text));%20return%20t;}%20add(makeText('style',%20'iframe{width:100%;height:18em;border:1px%20solid;'));%20add(makeText('h3',%20d.title='Style%20sheets%20in%20'%20+%20location.href));%20for(i=0;%20i
view scripts:
javascript:s=document.getElementsByTagName('SCRIPT');%20d=window.open().document;%20/140681/d.open();d.close();%20b=d.body;%20function%20trim(s){return%20s.replace(/^\s*\n/,%20'').replace(/\s*$/,%20'');%20};%20function%20add(h){b.appendChild(h);}%20function%20makeTag(t){return%20d.createElement(t);}%20function%20makeText(tag,text){t=makeTag(tag);t.appendChild(d.createTextNode(text));%20return%20t;}%20add(makeText('style',%20'iframe{width:100%;height:18em;border:1px%20solid;'));%20add(makeText('h3',%20d.title='Scripts%20in%20'%20+%20location.href));%20for(i=0;%20i

Problem porting WordPress Editor to a non-WP application

I like the look and feel of the WordPress editor (version 2.7), and I would like to use it in another web application that is written in ASP.NET. I've used TinyMCE before, and I've even extended it in the past. However, I can't seem to get the Wordpress configuration to work!
I've downloaded the entire WordPress package and taken the TinyMCE code (from the "js" folder) and put it in my web site. It ends up giving me an error on the following line of tiny_mce.js
return f.apply(s||this,Array.prototype.slice.call(arguments,2))
'undefined' is null or not an object.
Now, I've carefully made sure that the steps of execution are identical with the WordPress demonstration site that I've based this from.
I'm not a Javascript newbie (at all), but I can't seem to figure out why this is not working. Has anybody tried to do this before? What am I missing?
A demo of what I am talking about is here (username="admin", password="demo"). View the source, I have the three parts of Javascript that are (seemingly) required to power the editor.
Something of a stab in the dark, but I'm suspecting that there's a dependency on WP's prototype.js and you didn't bring that over with TinyMCE.
If you are able to determine which bit is undefined that might give you a clue. I tried looking at the demo with firebug, but tinymce.js was all one line, so I gave up trying to find that code.
Try putting in either some console.log() if you have firebug, or alert()s before that line, and try to see what f,s,this,arguments etc are when yu get the error, then do the same thing with a vanilla WP install and see the difference?
I suggest including the tiny_mce_src.js istead of the minified version, this way you can use firebug to debug and receive helpfull information.

Categories

Resources