leksy-editor v1.0.1

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

Configuration Options

CSS Customization

cssVariables: {
  primary: "hsl(12, 79.60%, 52.00%)",
  midDarker: "hsl(103, 64.60%, 49.80%)",
  baseWhite: "hsl(234, 70.90%, 61.00%)",
  whiteDark: "hsl(223, 5%, 92%)",
  resizer: "rgb(235, 28, 235)",
  shadow: "rgba(20, 179, 54, 0.3)"
}

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

License

MIT License. Free to use and modify.

Author

Leksy Editor is developed and maintained by Agami Technologies.