Noctiflorous Pansy Mulch

    froala-editor-paragraph-format-extended-plugin

    0.2.0 • Public • Published

    Froala Editor Paragraph Format Extended plugin

    npm Supported Froala Editor versions Gzip size

    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. It won't get new features.

    Status

    Build Status dependencies Status devDependencies Status peerDependencies Status

    Installation

    There are several ways to install the plugin:

    Simple

    Download the plugin script and import it using a <script> tag after the Froala Editor import.

    <!-- Froala Editor required stuff -->
    <link href="//cdn.jsdelivr.net/npm/froala-editor@3.0/css/froala_editor.css" rel="stylesheet" type="text/css" />
    <link href="//cdn.jsdelivr.net/npm/froala-editor@3.0/css/froala_style.css" rel="stylesheet" type="text/css" />
    <script src="//cdn.jsdelivr.net/npm/froala-editor@3.0/js/froala_editor.min.js"></script>
     
    <!-- Paragraph Format Extended plugin -->
    <script src="//cdn.jsdelivr.net/npm/froala-editor-paragraph-format-extended-plugin@0.2/dist/paragraph_format_extended.umd.min.js"></script>
    AMD/RequireJS

    The script requires the following AMD modules to be available:

    • froala-editor — the Froala Editor main script.

    Installation:

    require.config({
      paths: {
        'froala-editor': '//cdn.jsdelivr.net/npm/froala-editor@3.0/js/froala_editor.min',
        'froala-editor-paragraph-format-extended-plugin': '//cdn.jsdelivr.net/npm/froala-editor-paragraph-format-extended-plugin@0.2/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.

    Node.js/NPM/Yarn/Webpack/Rollup/Browserify

    Install the plugin:

    npm install froala-editor-paragraph-format-extended-plugin --save

    Require it:

    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:

    <div id="editor"></div>
    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:

    [
      {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 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 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 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.

    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.

    Install

    npm i froala-editor-paragraph-format-extended-plugin

    DownloadsWeekly Downloads

    175

    Version

    0.2.0

    License

    MIT

    Unpacked Size

    45.9 kB

    Total Files

    6

    Last publish

    Collaborators

    • surgie