I use bower to manage my js packages. I installed CKEditor into bower directory and it worked fine.
The question is: how should I add external plugins to ckeditor? I read here http://ckeditor.com/blog/CKEditor-Supports-Bower-and-Composer that this is possible by using extraPlugins property. But obviously I should somehow download plugin and add it to ckeditor/plugins folder. I'm quite new to bower but as I understand I shouldn't manually add any files or folders into bower directory. Instead I should use bower install plugin_name or something like that.
So, if I simple write it like:
CKEDITOR.replace('pageContent', {
extraPlugins: 'Syntaxhighlighter Interface'
});
I got an error that the plugins is not found
As far as I can see you can't just use Bower to care about the CKEditor plugins but at least you can add plugins from an external folder with this command:
CKEDITOR.plugins.addExternal( 'sample', '/myplugins/sample/' );
/myplugins/sample/ is a path to the folder where the plugin.js file is relative to the web root. sample is the name of the plugin.
Check out the docs on this:
http://docs.ckeditor.com/#!/api/CKEDITOR.resourceManager-method-addExternal
With the page you linked mentions that Ckeditor iteself can be downloaded with bower but not the plugins. After you download the plugins you need to enable them with the extraPlugins option. To download the actual plugin I would use the plugin's download link like so:
bower install http://mydomain/somefile.zip
Extending #codehitman's answer, you can manage the plugin via bower with at least two approaches:
Via CLI:
bower install panelbutton=https://download.ckeditor.com/panelbutton/releases/panelbutton_4.7.2.zip --save
The previous line will download the "panelbutton" addon and rename the downloaded addon to "panelbutton" (specified before the =) and the --save will write the command to bower.json (totally optional).
Via bower.json:
"dependencies": {
"panelbutton": "https://download.ckeditor.com/panelbutton/releases/panelbutton_4.7.2.zip",
"colorbutton": "https://download.ckeditor.com/colorbutton/releases/colorbutton_4.7.2.zip"
}
Just add the name you want to save the downloaded addon and the download url.
EXTRA: since you might want to store the downloaded addons into a ckeditor path, you can accomplish creating .bowerrc and pasting the following:
{
"directory" : "my/path/to/ckeditor/addons"
}
WARNING: If there is only a js on the package, bower renames it to index.js. I solved it running a postinstall script like this (adapt to your needs).
mv ./web/libraries/panelbutton/index.js ./web/libraries/panelbutton/plugin.js
You could try adding the following line to your bower.json file:
"ckeditor": "#full/4.4.7"
This should install all plugins for you!
Related
when i want to use some library, such as Croppie, i should install it by using npm or Bower:
npm install croppie
bower install croppie
As i am using a server, i dont know where is should install it. On the server? in the wordpress files? or in the same folder that contains JS file for this library.
Thanks a lot
Basically you need to add script in your wordpress web app. So there are multiple ways to do so.
1) Add <script src="https://raw.githubusercontent.com/Foliotek/Croppie/master/croppie.min.js" />. It's better either you download this file in your file system or add a CDN link of Croppie.
2) If you have bower.json configured in your project you can use bower install croppie and then link it in your index.php (root file)
If you just have copied your project over to your server, you should have a package.json file, which contains all libraries you used. (Given you saved it via npm install croppie --save or npm install croppie --save-dev)
Then you can just go into your directory which contains the package.json and run npm install.
If you ever install a library which you would like to use without a project, you can install it globally with npm install libraryName -g, thus making it available on the command line.
In general, if you develop locally and deploy to a server, you should install dependencies locally, in /wp-content/themes/(your-theme)/ and don't upload them to your web server along with the rest of the site. The .bowerrc file, placed in the theme directory, should include the target directory in which bower will place the dependencies you've required:
{
"directory": "bower_components"
}
Then you'd want to bundle those dependencies in css/js etc. directories within the theme and deploy those. .gitignore the bower_components directory or just don't FTP that directory up, depending on how you do things.
I am using several open source js libraries in my project. I recently moved to use bower for all the front-end dependencies. I liked how I can just provide a github url instead of a proper package name.
I have customized few libraries. So to manage them using bower, I created a single private repository called myLibs in an organization account on Github.
I am creating branches for each customized library. For example, customized angular-bootstrap library will be in angular-bootstrap branch and customized angular-material library will be in angular-material branch.
Now I am creating tags for each release in each library. The naming convention that I am using is branch-name/x.y.z For example, I have angular-bootstrap/1.0.0 and angular-material/1.1.1 tags.
This was good till I had to install these libraries using bower. To install the custom libraries I called the following command (It's a dummy url, don't try it)
bower install --save-exact library-patch=https://github.com/test_org/myLibs.git#branch-name/1.0.0
The library gets installed and I can see it in bower_components too, but in my bower.json the dependency entry turns up like this -
"library-patch":"https://github.com/test_org/myLibs.git#undefined"
This is not what I wanted. I wanted to have the proper tag name to be saved. I don't want to manually make changes in the bower.json file every time I want to add a custom library.
My first thought was that the naming convention of the tags will be a problem. So I changed it to branch-name-x.y.z from branch-name/x.y.z which allowed me to have the exact version in the bower.json to install it properly, but when trying to install the libraries using the terminal, instead of using bower.json, I am getting the#undefined` tag in the end of the dependencies.
Here's the log I am getting while installing the library from terminal.
bower install --save-exact library-patch=https://github.com/test_org/myLibs.git#branch-name-1.0.0
bower not-cached https://github.com/test_org/myLibs.git#branch-name-1.0.0
bower resolve https://github.com/test_org/myLibs.git#branch-name-1.0.0
bower download https://github.com/test_org/myLibs/archive/branch-name-1.0.0.tar.gz
bower retry Download of https://github.com/test_org/myLibs/archive/branch-name-1.0.0.tar.gz failed with EHTTP, trying with git..
bower checkout library-patch#branch-name-1.0.0
bower resolved https://github.com/test_org/myLibs.git#branch-name-1.0.0
bower install library-patch#branch-name-1.0.0
library-patch#branch-name-1.0.0 bower_components/library-patch
└── angular#1.4.8
Why am I getting undefined in the release/tag name? Am I making any mistake while naming the tags? Is there any way I can install those custom libs from terminal and save the exact tag in bower.json?
The solution for the problem was to use --save instead of --save-exact. I have no explanation for the same right now, but I'll update the answer as soon as I can.
As far as I can tell, it's because the package was getting installed from github directly, instead of from bower registry.
I know what bower does.
But wanted to see if there is any real advantage of using bower files in a AngularJS app instead of just having the minified javascript file?
Those libs are not really your project's source code. They are dependencies. To keep your source code clean, it's better to declare your dependencies in your package.json file if you use npm or in your bower config file if you use bower.
When others download the project, they do not need to download the deps.
Using bower or npm can also help you upgrade your deps conveniently.
In current project I have pretty big bower file. Many dependencies are out of dated and have hardcoded version like ~1.2. I have replaced it with "latest" and run bower install/update and everything went ok.
The problem is that I don't want to have such settings like "latest" on production server. What is the easiest way to grab current versions of bower components and put it to the bower file? aka generate bower file from existing dependencies.
Using bower init, you'll be able to regenerate from scratch your bower.json file with all the current dependencies
With bower install --save jquery#<version_number> you can install specific versions of bower components, e.g.
bower install --save jquery#1.10.2
the --save automatically adds the dependency to bower.json. Normally there is no need to edit bower.json manually.
I've only just started using Bower, so I'm likely doing it wrong. However, when I pull down jQuery through bower using this:
bower install jQuery#1.9.1
I get a folder which is about 700k in size. The only thing I need in that folder however is the jquery.js or jquery.min.js, which are 239k, and 82k respectively.
As far as I understand it, this is because bower simply pulls down everything that's in the Github repository whether it's needed or not.
Is there any way to stop this? So that bower only pulls down what is needed to develop? Or Am I misunderstanding how I should be using Bower?
Thanks.
You're using it correctly. You should have a bower.json file with all of your dependencies specified so that you don't have to include bower's plugin directory with your source code, then just run bower install from a new machine to get the dependencies.
When you install a plugin and want your bower.json automatically updated, run bower install mydependency --save.