Leksy Editor

Leksy Editor is an alternative to traditional WYSIWYG editors, designed primarily for creating mail templates, blogs, and documents without any content manipulation.

Features

• Supports React, Vue, and Vanilla JavaScript applications.
• Rich plugin system for extended functionalities.
• Customizable CSS variables for multiple themes and modes.
• Mention system with category-based labels.

Installation

npm install leksy-editor

Usage

React Example

import LeksyEditor from 'leksy-editor';
import { useEffect, useRef } from 'react';

function App() {
  const editorRef = useRef(null);
  const editor = useRef(null);

  useEffect(() => {
    editor.current = LeksyEditor.create(editorRef.current, {
      plugins: [/* plugin list here */],
      // Other options
    });
  }, []);

  return <div ref={editorRef} />;
}

Vue Example

import { createApp, ref, onMounted } from 'vue';
import LeksyEditor from 'leksy-editor';

const app = createApp({
  setup() {
    const editor = ref(null);

    onMounted(() => {
      const editorElement = document.getElementById('editor');
      editor.value = LeksyEditor.create(editorElement, {
        plugins: [/* plugin list here */],
        // Other options
      });
    });

    return { editor };
  },
  template: `<div id='editor'></div>`
});

Plugins

| Plugin Group | Plugins | |--------------------------------|---------| | Basic Actions | undo, redo | | Text Formatting | bold, underline, italic, strike | | Font Styling | font, font-size | | Subscript/Superscript | subscript, superscript | | Colors | font_color, highlight_color | | Alignment | align_justify, align_left, align_center, align_right | | Lists | ordered_list, unordered_list, table_of_content | | Media | image, video, table, attachment | | Clipboard | cut, copy, paste, select_all | | Links | link, unlink, embed | | Text Styles | format-block, text_style, line_height, paragraph_style | | Indentation & Formatting | indent, outdent, horizontal_rule, remove_format | | Extras | emoji, mention | | Third-Party Integrations | pexels, giphy, tenor | | Utilities | fullscreen, print, code_view |

Configuration Options

| Option | Description | |--------|-------------| | classPrefix | Custom class prefix for styling. | | placeholder | Placeholder text when the editor is empty. | | plugins | List of enabled plugins. | | labels | Labels for mentions and categories. | | customPlugins | Additional custom plugins. | | spellcheck | Enables/disables spellchecking. | | closePluginOnClick | Closes plugins when clicking outside. | | value | Initial value of the editor. | | hideNavigation | Hides the navigation toolbar. | | giphyApiKey | API key for Giphy integration. | | pexelsApiKey | API key for Pexels integration. | | tenorApiKey | API key for Tenor integration. | | cssVariables | Custom CSS styling variables for multiple themes and modes. | | disablePastedColorStyles | Remove color-related CSS while pasting. | | removeColorsWhilePasting | Remove all color and bg color CSS while pasting. | | autoHeight | Automatically adjusts height based on content. | | height | Height for the editor. | | maxHeight | Maximum height for the editor. | | minHeight | Minimum height for the editor. | | iframeStyle | To design inside iframe, pass your css here | | disabled | To disabled editor | | onFullScreen | To open custom preview | | showTabs | Enables or disables the display of tabs. |

CSS Customization

cssVariables: {
  primary: "hsl(160, 100%, 40%)",
  baseWhite: "hsl(0, 0%, 100%)",
  whiteDark: "hsl(223, 5%, 92%)",
  resizer: "hsl(211, 100.00%, 62.40%)",
  resizerBackground: "hsl(211, 100%, 62%, 0.3)",
  shadow: "hsla(0, 0.00%, 0.00%, 0.30)",
  mention: "hsl(0, 0.00%, 93.70%)",
  mentionHighlight: "#dddddd",
  dashedBorder: "gray",
  tableResizer: "cornsilk",
  tableResizerOutline: "darkblue",
  textColor: "hsl(216, 10%, 20%)",
  resizerPosition: "#fff",
  resizerPositionBackground: "#333",
  linkColor: "#0000ff",
  scrollbarThumb: "hsl(160, 100%, 40%)",
  scrollbarTrack: "hsl(223, 5%, 76%)",
}

Labels (Mentions Fields)

labels: [
  {
    name: 'Category 1',
    category: 'CATEGORY_ONE',
    fields: [
      { value: 'CATEGORY_ONE.apple', name: 'Category 1 Apple' },
      { value: 'CATEGORY_ONE.orange', name: 'Category 1 Orange' }
    ]
  },
  {
    name: 'Category 2',
    category: 'CATEGORY_TWO',
    fields: [
      { value: 'CATEGORY_TWO.name', name: 'Category 2 Apple' },
      { value: 'CATEGORY_TWO.firstName', name: 'Category 2 Orange' }
    ]
  }
]

Giphy Integration Example

Leksy Editor supports Giphy integration for inserting GIFs.

import LeksyEditor from 'leksy-editor';

const editor = LeksyEditor.create(document.getElementById('editor'), {
  plugins: ['giphy'],
  giphyApiKey: 'YOUR_GIPHY_API_KEY' // Replace with your actual API key
});

Similarly, Pexels and Tenor can be integrated using pexels and tenor plugins along with their respective API keys.

Functions

| Function | Description | |----------|-------------| | setContents(html) | Sets the editor's content. | | getContents() | Returns the current HTML content of the editor. | | onChange(html) | Triggered when content changes. | | onBlur(html) | Triggered when the editor loses focus. | | onAttachment(files) | Fires when files are attached. | | manipulateImage() | Custom function for manipulating images. | | handleFilePicker() | Custom function for file upload, useful for Android and iOS file upload. | | uploadVideo(file) | Handles video uploads, returns a promise with video URL. | | focus() | Focuses the editor. | | getCore() | Returns the core editor instance. | | updateHeight() | To update editor container height. | | updateCssVariables() | To update cssVariables. | | updateLabels() | To update label. | | getLocalCursor() | Return local cursor position | | setRemoteCursor() | Sets remote cursor position | | onLocalCursorChange() | Trigger when local cursor change. | | onLocalSyncChanges() | Trigger on content change, returns in chunks. | | applyRemoteSyncChanges() | Apply remote chunks. | | setDisabled() | Pass true/false to disable/enable editor. | | getCurrentTab() | To fetch current tab data. | | parseTabFromHTML(html) | Creates a temporary tab-like object from an HTML string. | | compare(tabs1, tabs2) | Compare tabs and return in Boolean. |

License

MIT License. Free to use and modify.

Author

Leksy Editor is developed and maintained by Agami Technologies.