Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/finesse/froala-editor-paragraph-format-extended-plugin
A plugin for Froala Editor 2 that allows to choose paragraph format (tag name, class, etc.) from a list
https://github.com/finesse/froala-editor-paragraph-format-extended-plugin
format froala-editor paragraph plugin style text
Last synced: 8 days ago
JSON representation
A plugin for Froala Editor 2 that allows to choose paragraph format (tag name, class, etc.) from a list
- Host: GitHub
- URL: https://github.com/finesse/froala-editor-paragraph-format-extended-plugin
- Owner: Finesse
- License: mit
- Created: 2016-05-03T10:23:12.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2019-06-24T12:42:05.000Z (over 5 years ago)
- Last Synced: 2024-04-30T01:21:28.579Z (7 months ago)
- Topics: format, froala-editor, paragraph, plugin, style, text
- Language: JavaScript
- Homepage:
- Size: 84 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# [Froala Editor](http://github.com/froala/wysiwyg-editor/) Paragraph Format Extended plugin
[](https://www.npmjs.com/package/froala-editor-paragraph-format-extended-plugin)
[](https://bundlephobia.com/result?p=froala-editor-paragraph-format-extended-plugin)
A plugin for Froala WYSIWYG Editor v3 that allows to choose paragraph format (tag name,
class, etc.) from a list. It is like a mixture of the `paragraphFormat` and the `paragraphStyle` plugins with some
extended features.
If you need a plugin for Froala Editor v2, use [version 0.1](http://github.com/Finesse/froala-editor-paragraph-format-extended-plugin/tree/froala-v2).
It won't get new features.
## Status
[](https://travis-ci.org/Finesse/froala-editor-paragraph-format-extended-plugin)
[](https://david-dm.org/Finesse/froala-editor-paragraph-format-extended-plugin)
[](https://david-dm.org/Finesse/froala-editor-paragraph-format-extended-plugin?type=dev)
[](https://david-dm.org/Finesse/froala-editor-paragraph-format-extended-plugin?type=peer)
## Installation
There are several ways to install the plugin:
Simple
Download the [plugin script](dist/paragraph_format_extended.umd.min.js) and import it using a `` tag after the
Froala Editor import.
```html
<!-- Froala Editor required stuff -->
<link href="//cdn.jsdelivr.net/npm/[email protected]/css/froala_editor.css" rel="stylesheet" type="text/css" />
<link href="//cdn.jsdelivr.net/npm/[email protected]/css/froala_style.css" rel="stylesheet" type="text/css" />
<script src="//cdn.jsdelivr.net/npm/[email protected]/js/froala_editor.min.js">
```
AMD/RequireJS
The script requires the following AMD modules to be available:
* `froala-editor` — the Froala Editor main script.
Installation:
```js
require.config({
paths: {
'froala-editor': '//cdn.jsdelivr.net/npm/[email protected]/js/froala_editor.min',
'froala-editor-paragraph-format-extended-plugin': '//cdn.jsdelivr.net/npm/[email protected]/dist/paragraph_format_extended.umd.min'
}
});
define('myModule', ['froala-editor', 'froala-editor-paragraph-format-extended-plugin'], function (FroalaEditor) {
// ...
});
```
You can find more information about installation of Froala Editor using AMD in [the editor readme](http://github.com/froala/wysiwyg-editor#load-from-cdn-as-an-amd-module).
Node.js/NPM/Yarn/Webpack/Rollup/Browserify
Install the plugin:
```bash
npm install froala-editor-paragraph-format-extended-plugin --save
```
Require it:
```js
const FroalaEditor = require('froala-editor');
require('froala-editor-paragraph-format-extended-plugin');
```
## Basic usage
Create an editor, add a `paragraphFormatExtended` button to the toolbar and set up the formats list:
```html
```
```js
new FroalaEditor({
toolbarButtons: [/* Other your buttons... */ 'paragraphFormatExtended'],
paragraphFormatExtended: [
{title: 'Normal'},
{tag: 'h1', title: 'Heading 1'},
{tag: 'h2', title: 'Heading 2'},
{tag: 'h2', 'class': 'fr-text-bordered', title: 'Header 2 bordered'},
{tag: 'pre', id: 'code', title: 'Code'}
]
});
```
## Reference
The name of the toolbar button of this plugin is `paragraphFormatExtended`.
When a paragraph format is changed by the user via the dropdown, the `class` and `id` attributes of the selected
paragraphs are purged and replaced with the chosen format values even if they are not set.
### Options
#### paragraphFormatExtended
**Type**: `Array`
**Default value:**
```js
[
{title: 'Normal'},
{tag: 'h1', title: 'Heading 1'},
{tag: 'h2', title: 'Heading 2'},
{tag: 'h3', title: 'Heading 3'},
{tag: 'h4', title: 'Heading 4'},
{tag: 'h4', 'class': 'fr-text-bordered', title: 'Header 4 bordered'},
{tag: 'pre', title: 'Code'}
]
```
A list with the formats that will appear in the Paragraph Format Extended dropdown from the toolbar. Array items are
objects with the following attributes:
* `title` (String, required) — Format title that is shown in the dropdown. It is [translated by Froala Editor](http://froala.com/wysiwyg-editor/docs/methods#language.translate) before displaying.
* `tag` (String|Null) — Paragraph tag name. If `null` or nothing is provided the default editor tag is used.
* `class` (String|Null) — Paragraph CSS class name. May contain multiple classes devided by space.
* `id` (String|Null) — The value of paragraph `id` HTML attribute.
#### paragraphFormatExtendedSelection
**Type**: `Boolean`
**Default value:** `false`
Should the Paragraph Format Extended button from the toolbar be replaced with a dropdown showing the actual paragraph format name for the current text selection.
### Building
The source code is located in the `src` directory. Do the following to modify and compile it:
1. Install [node.js](https://nodejs.org/) version 8 or greater.
2. Open a console, go to the project root directory and run `npm install`.
3. Run `npm run build` to compile distribution files from the source files.
### Testing
Build the source code, open the [index.html](index.html) file in a browser and test it manually.
Rebuild the source code and reload the browser page manually when you change the source code.
## Versions compatibility
The project follows the [Semantic Versioning](http://semver.org).
## License
This package is available under MIT License. However, in order to use Froala WYSIWYG HTML Editor plugin you should purchase a license for it.
See https://froala.com/wysiwyg-editor/pricing for licensing the Froala Editor.