Nostalgic Piano Music

    @topol.io/editor
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.0-alfa.16 • Public • Published
    Tailwind CSS

    Easy and quick! Drag and drop HTML editor and builder for beautiful responsive email templates.

    Documentation

    Installation

    Install Editor from NPM using:

    npm install @topol.io/editor
    
    //or
    
    yarn add @topol.io/editor

    Usage

    Add HTML element Editor will load to

    <div id="app" style="position: absolute; width: 100%; height: 100%"></div>

    In your JS or TS file import TopolPlugin, initialize the editor, as an ID provide the id you defined the HTML, in this example its app

    For more options see the docs for TopolOptions configuration

    import TopolPlugin from "@topol.io/editor";
    
    const TOPOL_OPTIONS = {
      id: "#app",
      authorize: {
        apiKey: "YOUR_API_TOKEN",
        userId: "some-user-id",
      },
      callbacks: {
        onSave(json, html) {},
      },
    };
    
    TopolPlugin.init(TOPOL_OPTIONS);

    Call Topol Plugin actions

    To call actions to the editor import:

    import { TopolPlugin } from "@topol.io/editor";
    
    TopolPlugin.save();

    List of all available TopolPlugin actions:

    Action Description
    TopolPlugin.save() Saves the content of the editor more info
    TopolPlugin.load(template) Loads the provided template more info
    TopolPlugin.togglePreview() Toggles editor preview more info
    TopolPlugin.togglePreviewSize() Toggles editor preview size
    TopolPlugin.undo() Undo change in editor more info
    TopolPlugin.redo() Redo change in editor more info
    TopolPlugin.setSavedBlocks(savedblock: ISavedBlock[]) Sets the saved blocks more info
    TopolPlugin.createNotification(notification: INotification) Creates editor's notification more info
    TopolPlugin.changeEmailToMobile() Change email to mobile view more info
    TopolPlugin.changeEmailToDesktop() Change email to desktop view more info
    TopolPlugin.toggleBlocksAndStructuresVisibility() Toggle hidden structures visibility for blocks and structures more info
    TopolPlugin.destroy() Destroys the editor initialization more info


    TypeScript

    Topol Editor provides full TypeScript integration and exports all necessary types.

    import { ITopolOptions, INotification, ISavedBlock } from "@topol.io/editor";

    Install

    npm i @topol.io/editor

    Homepage

    topol.io/

    DownloadsWeekly Downloads

    61

    Version

    0.0.0-alfa.16

    License

    Apache-2.0

    Unpacked Size

    17.2 kB

    Total Files

    30

    Last publish

    Collaborators

    • tomsq
    • ecomail