I need to install this plugin on my application, so I followed the instruction and executed:
npm install --save #ckeditor/ckeditor5-upload
Usually, to load a plugin I create a file inside the load directory which contains the plugin name, in particular:
Views
load
ckeditor.php
which contains this:
<!-- Push section js -->
<?= $this->section('js') ?>
<script src="https://cdn.ckeditor.com/ckeditor5/27.1.0/classic/ckeditor.js"></script>
<script src="https://cdn.ckeditor.com/ckeditor5/27.1.0/classic/translations/it.js"></script>
<?= $this->endSection() ?>
so to include in a specific section of my app, I simply do:
<?= $this->include('App\Views\Backend\load\ckeditor') ?>
and this will inject the plugin into my app, but how can I do this with local dependencies installed via npm?
It looks like you want to use NPM modules client-side, which you actually can do. Check out Browserify: https://browserify.org/
It allows you to bundle up all the dependencies of NPM modules into JS code that you can deliver to the client, allowing you to use those NPM modules as 'native' functions in your client-side Javascript.
NPM (node package manager) packages are used for applications that run on node.js. Since your app is using PHP on backend, it's not suited to import backend JS packages.
In general, you can't use a backend JS package on a frontend because it usually contains code that is not available in the browser JS (such as accessing local files).
You'll need to find some other package that does a similar thing but for combination of PHP and browser JS.
Note: Configuring your HTTP server (usually Apache or Nginx) to publish the node_modules and link the (public URL of) NPM package from the frontend is a bad practice. Plus this particular package won't work anyway because it's using features that are not available in the browser JS.
In order to use CKEditor in your PHP application, The simplest way is to use CKEditor online builder tool and download complied version of the CKEditor code, and place it in your PHP application.
Visit: CKEditor online build
Follow the below steps:
Visit the above link of the CKEditor Online Build Tool.
Select Choose editor type as your desired editor.
Select the desired plugin that you want in your editor.
In the next section drag/drop and customize your editor layout.
At last select language and download the zip file.
Extract it and place it in your application's public folder eg.
public/ckeditor5.
Now navigate to the downloaded folder and open the index.html under
sample folder (public/ckeditor5/sample/index.html)
Copy last both scripts and place them in your working file where you
want to use CKEditor. Don't forget to modify the relative path of
your ../build/ckeditor.js file.
Related
I am fairly new to node and npm so this is a theoretical question.
I want so start using Jquery on my websites, so I did npm install jquery and this created a node_modules directory inside my webpage directory along with my html, js and css files.
In order to make it work I had to add the following in my head tag in html <script src="node_modules/jquery/dist/jquery.js"></script>
Question 1) Why npm installed node_modules directly into my directory? I would assume it would install it in my global directory usr/local/lib/node_modules
Question 2) If I would host the website somewhere else this would not work correct? I assume this method only works on client side.
Question 3) How would I have to setup my html or js in order to import jquery?
Apologies if this is a stupid question, but I'm trying to understand the mechanics of what I program.
Why npm installed node_modules directly into my directory? I would assume it would install it in my global directory usr/local/lib/node_modules
npm is designed to manage dependencies for a project. While you can make it install modules globally, this is really only intended for whole applications that are distributed via NPM.
If I would host the website somewhere else this would not work correct? I assume this method only works on client side.
The src attribute needs to be a URL that resolves to the script file. If you don't upload the script to the right place then it won't resolve.
How would I have to setup my html or js in order to import jquery?
With a <script> element.
Note that npm is not very good at managing dependencies for a client-side JavaScript project by itself. It only becomes useful when combined with a module system and a bundler such as browserify.
My nodejs package contains code for execution both on the backend, and a single .js file for execution on browsers. To make use of the browser script, it has to be put into a script element in an HTML file, obviously. My question is if there's a standard practice/convention with respect to how that browser .js file should be exposed to npm (or webpack or whatever) in a way that is independent of webpack, gulp, grunt, or other packaging tools. For example, by placing it into a scripts/ dir somewhere, or by including a simplistic nodejs/expressjs 3-line middleware that, when accessed via http://example.com/scripts/myscript.js, will send my script's content to browsers.
I've found this article, but that merely explains the trivial details of how to use a script element in an HTML page, rather than how to make npm install a script in standardized asset folder for pickup by static serving routes, asset management tools, or similar.
If you are publishing your package on NPM, an alternative that could work in your situation could be by using https://unpkg.com/ CDN. All packages that are published on NPM are available via this CDN.
Then in your frontend code you could simply reference that single js file you need.
<script src="https://unpkg.com/yourpackage/path/to/your/file.js"></script>
CDN is your best bet if you are not packing the web content in the same package. If your web contents are in the same package you could use
"scripts": {
"prepublish": "cp <source_path_of_file.js> <destination_dir>"
}
in package.json to pack it as a part of your npm package.
I would like to use CanvasJS library in my project but it does not exist in bower packages, so I tried to install it from a local zip file that I downloaded from their website. After successful installation the bower.json file includes the library's version and local path
"canvasjs-1.9.8": "C:\\path\\to\\myfolder\\canvasjs-1.9.8.zip"
Then if I try to build the project using gulp (e.g gulp serve), the library is not automatically added in the of index.html, as it happens for all the other libraries.
Is it a problem that it was installed from a local file? Is there another way to add CanvasJS library to my project and to my index.html file which is automatically generated with gulp build?
Thank you.
You can use gulp-inject in order to automatically inject code inside your index for example. Here the link:
https://www.npmjs.com/package/gulp-inject
So you can manually download your library (please include the .js version not the .zip), put it inside your project and dynamically include it inside the index using that plugin, adding a new task inside your gulp serve/build process.
You can also think to provide support for the library in the bower repository. It will make it available through bower to you and to the other users too in the future, if they may need it.
If you want to create a bower package, please refer to the official documentation that is really well done:
https://bower.io/docs/creating-packages/
For the bower installation I followed the instructions of this answer, and I assumed that using the .zip file that I downloaded would work. Since it didn't, the solution was to unistall it, un-compress the zip file and install the local .js file of the library. Then gulp serve command included the library in the index.html.
I recently started using NPM, but I don't understand how the files in node_modules are added to my index.html.
Case 1: CDN
For example, if I want to use jQuery via CDN, it is so simple! I add the CDN link to a <script> tag on my index.html file and $ is immediately available.
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<script>
$(document).ready(function(){
$('body').css('background','red');
});
</script>
</body>
</html>
Case 2: NPM
Now I'm trying to use node modules and npm rather than CDNs. I have done the following:
Created package.json by using npm init --yes
Installed the jQuery package with npm install jquery --save
Now, my project folder looks like this:
I have removed the script tag with the link to the jQuery CDN from index.html, but I don't understand how to add jQuery from node_modules?
I am doing this on a browser.
CDN
Use CDN if you are developing a website that will be accessible by public internet users.
CDN Benefits:
Will be cached on most browsers because it's used by a lot of other websites
Reduce the bandwidth
check for more benefits here
NPM
npm is a great tool to manage dependencies in your app using a module bundler.
Example:
assume using a webpack module bundler and jQuery is installed
import $ from 'jQuery'
...
var content = $('#id').html();
but the browser does not understand the import statement so you have to transpile the code with Webpack commands, the bundler will check all the used dependencies and bind them in a single file without any dependencies problems.
Useful links: Getting started with webpack
in addition to above, npm install packages to local also:
let your local IDE provide code intellisense and type-checking;
provide source code for (Webpack) bundling, which combines all the JavaScript files to be a (minified) single file, so no dependencies.
I might have misunderstood your question... But can't you just add this line to your index.html file?
<script src="node_modules/jquery/dist/jquery.min.js"></script>
I think you want to host jQuery yourself and use it within a web app running in the browser.
If so, you need to host this file - make it downloadable via the same web server you are using to host index.html.
If you are using Express, you might do something like this on the server side:
app.use('jquery', express.static(__dirname + '/node_modules/jquery/dist/'));
And then reference the file in index.html:
<script src="/jquery/jquery.js"></script>
See Express' manual for serving static files.
If you're not using Express, you need to consult your web server's stack manual. No way to guess unfortunately - I gave an Express.js example because this is probably the single most popular package like that for node.js.
It won't be "filed" unless you link the js file in your template (replacing the CDN one). A bundler output or your compiled and public js file needs to be linked instead of the CDN link URI.
I wrote an editor in HTML/JS that I want to use for multiple Electron based applications and a website.
For testing purposes I have package all dependencies, some are npm modules, some are font files, some are images, into a single file using browserify. For development I find this quite attractive as npm take care of keeping the packages up-to-date and browserify build even things like images and CSS into a single JS file. And included this bundle using a script tag in a html file.
Now I would love to get this onto npm to use as a dependency for other projects. But frankly I am at a loos as to how to do this.
Some blogs suggest to use:
module.exports = mymodule
But I want people and myself to be able to either get a single file and insert it using a script tag to get a global function to start my editor as well as require it using npm for Electron based apps.
startEditor = require('mymodule')
<script src="path/to/mymodule"></script>
Should both be valid ways to use the editor.
You can see the current state of the project on GitHub