branflake2267/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Simple Froala Webpack Project Example

This covers the basic directions to get up and running with webpack.
Configure

If you're creating your webpack configuration from scratch, these plugins will be needed.
Webpack


Run npm install --save-dev webpack
Run npm install --save-dev webpack webpack-cli
Run npm install --save-dev path

Webpack Plugins

The html-webpack-plugin will copy the index.html template to the dist folder and add the bundle.js resource to it.

Run npm install --save-dev html-webpack-plugin
Run npm install --save-dev clean-webpack-plugin
Run npm install --save-dev style-loader
Run npm install --save-dev css-loader

Froala Editor


Run npm install froala-editor

Download Dependencies

If you copy or delete the ./node_modules folder, download the dependencies first.

Run npm install

Debug

This will run webpack and it observes the changes and will output the changes to the ./dist directory.

Run npm run dev
Open the webpack generated ./dist/index.html.


## index.html
<!DOCTYPE html>
<html>
  <head>
    <title>Simple Froala Webpack Example Template</title>
  </head>
  <body>

    <!-- The Froala Editor -->
    <div id='editor'></div>

  </body>
</html>

## index.js
// index.js - App source file

// 1. Import the Froala Editor
import FroalaEditor from 'froala-editor';

// 2. Import a Froala Editor plugin(s)
import 'froala-editor/js/plugins/align.min.js';

// 3. Import the Froala Editor css
// The webpack style-loader & css-loader are required to import css here.
import 'froala-editor/css/froala_editor.pkgd.min.css';

// 4. Render the Froala editor in the <div/> with id of `editor`.
new FroalaEditor('#editor');

## package.json
{
  "name": "simple-froala-webpack-project",
  "version": "1.0.0",
  "description": "Show how to use webpack",
  "scripts": {
    "dev": "webpack --watch",
    "build": "webpack"
  },
  "author": "",
  "license": "ISC",
  "repository": {},
  "dependencies": {
    "froala-editor": "^3.0.6"
  },
  "devDependencies": {
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^3.2.0",
    "html-webpack-plugin": "^3.2.0",
    "path": "^0.12.7",
    "style-loader": "^1.0.0",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.10"
  }
}

## webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
  mode: 'development',
  entry: './index.js',
  // Build output lands in the ./dist folder
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      // This is used to load the Froala css from the library.
      {
        test: /\.css$/i,
        use: [ 'style-loader', 'css-loader' ],
      },
    ],
  },
  plugins: [
    // Clean the ./dist directory.
    new CleanWebpackPlugin(),
    // Copy the index.html file to the ./dist directory and put the bundle.js in the index.html.
    new HtmlWebpackPlugin({
      template: './index.html',
    })
  ]
};
	<!DOCTYPE html>
	<html>
	<head>
	<title>Simple Froala Webpack Example Template</title>
	</head>
	<body>

	<!-- The Froala Editor -->
	<div id='editor'></div>

	</body>
	</html>
	// index.js - App source file

	// 1. Import the Froala Editor
	import FroalaEditor from 'froala-editor';

	// 2. Import a Froala Editor plugin(s)
	import 'froala-editor/js/plugins/align.min.js';

	// 3. Import the Froala Editor css
	// The webpack style-loader & css-loader are required to import css here.
	import 'froala-editor/css/froala_editor.pkgd.min.css';

	// 4. Render the Froala editor in the <div/> with id of `editor`.
	new FroalaEditor('#editor');
	{
	"name": "simple-froala-webpack-project",
	"version": "1.0.0",
	"description": "Show how to use webpack",
	"scripts": {
	"dev": "webpack --watch",
	"build": "webpack"
	},
	"author": "",
	"license": "ISC",
	"repository": {},
	"dependencies": {
	"froala-editor": "^3.0.6"
	},
	"devDependencies": {
	"clean-webpack-plugin": "^3.0.0",
	"css-loader": "^3.2.0",
	"html-webpack-plugin": "^3.2.0",
	"path": "^0.12.7",
	"style-loader": "^1.0.0",
	"webpack": "^4.41.2",
	"webpack-cli": "^3.3.10"
	}
	}
	const path = require('path');
	const HtmlWebpackPlugin = require('html-webpack-plugin');
	const { CleanWebpackPlugin } = require('clean-webpack-plugin');

	module.exports = {
	mode: 'development',
	entry: './index.js',
	// Build output lands in the ./dist folder
	output: {
	filename: '[name].bundle.js',
	path: path.resolve(__dirname, 'dist'),
	},
	module: {
	rules: [
	// This is used to load the Froala css from the library.
	{
	test: /\.css$/i,
	use: [ 'style-loader', 'css-loader' ],
	},
	],
	},
	plugins: [
	// Clean the ./dist directory.
	new CleanWebpackPlugin(),
	// Copy the index.html file to the ./dist directory and put the bundle.js in the index.html.
	new HtmlWebpackPlugin({
	template: './index.html',
	})
	]
	};