JSPM

editorify-dev

1.1.5
    • ESM via JSPM
    • ES Module Entrypoint
    • Export Map
    • Keywords
    • License
    • Repository URL
    • TypeScript Types
    • README
    • Created
    • Published
    • Downloads 1
    • Score
      100M100P100Q33361F
    • License ISC

    A versatile open-source package providing reusable UI components for backend systems and development, including a powerful text-to-HTML editor ,intuitive image uploader, calendar etc. Designed to simplify content management and enhance user interfaces for e-commerce platforms and other web applications.

    Package Exports

    • editorify-dev
    • editorify-dev/css
    • editorify-dev/css/editor
    • editorify-dev/css/imageUploader
    • editorify-dev/editor
    • editorify-dev/imageUploader

    Readme

    editorify-dev

    Editorify is A versatile open-source package providing reusable UI components for backend systems and development, including a powerful text-to-HTML editor ,intuitive image uploader, calendar etc. Designed to simplify content management and enhance user interfaces for e-commerce platforms and other web applications.

    Table of Contents

    Installation

    To install the package, use either npm or yarn:

    Using npm

    npm install editorify-dev

    Using yarn

    yarn add editorify-dev

    Image Uploader

    The image uploader component streamlines image uploads with a responsive UI ideal for web development and e-commerce. Users can easily drag and reposition images, ensuring a polished look. Its compatibility with any JavaScript environment makes it a must-have for seamless image management.

    Usage React

    Example component

    import React from "react";
import { ImageUploaderComponent } from "editorify-dev/imageUploader";
import "editorify-dev/css/imageUploader";

function ImageUploader() {
    const handleImagesChange = (images) => {
        // Handle the updated images here
        console.log("Updated images:", images);
    };

    return (
        <div>
            <ImageUploaderComponent
                id="fkjdlfj"
                onImagesChange={handleImagesChange}
                maxImages={5}         // Optional: Maximum number of images allowed
                maxFileSize={1024}    // Optional: Maximum file size in KB
                validTypes={["image/jpeg", "image/png", "image/webp", "image/gif"]} // Optional: Valid file types
            loadedImages={["https://news.ubc.ca/wp-content/uploads/2023/08/AdobeStock_559145847.jpeg"]} // to load the image urls at the initial loading helps while updating the images so that you can fetch and provide the links to display those images
            />
        </div>
    );
}

export default ImageUploader;

    Usage in standard HTML/Javasctipt or any js environment

    Make sure to import css and image uploader form the package

    <body>
    <div id="image-uploader-container"></div>
    <script>
        const handleImagesChange = (images) => {
            console.log("Updated images:", images);
        };

        const uploader = new ImageUploader({
            containerId: 'image-uploader-container',
            maxImages: 5,
            maxFileSize: 1024,
            validTypes: ["image/jpeg", "image/png", "image/webp", "image/gif"],
            onImagesChange: handleImagesChange,
            loadedImages=["https://news.ubc.ca/wp-content/uploads/2023/08/AdobeStock_559145847.jpeg"]
        });
    </script>
</body>

    Props

    Prop Type Required Default Value Description
    id string Yes - A unique ID for the component's container.
    maxImages number No -1 The maximum number of images that can be uploaded.
    maxFileSize number No -1 The maximum file size (in KB) for uploaded images.
    validTypes array No Default types An array of valid MIME types for uploaded images.
    onImagesChange function No - Callback function that receives the updated images when the list changes.
    loadedImages array No - An array of image links

    Additional Information

    • maxImages: If set to -1, there is no limit on the number of images that can be uploaded.
    • maxFileSize: If set to -1, there is no limit on the file size of uploaded images.
    • validTypes: This allows you to specify which types of images are accepted during the upload process.

    Editor

    The text editor component offers a smooth and intuitive experience for creating and editing content, with automatic text-to-HTML conversion. It supports rich formatting options such as bold, italics, lists, and links, with real-time HTML preview. The editor is fully responsive and designed for easy integration into both React and standard HTML/JavaScript environments. Its customizable toolbar and clean, minimalistic interface make it an efficient and user-friendly solution for any web application requiring rich text editing and seamless HTML conversion.

    Contributing

    We welcome contributions! Please see our CONTRIBUTING.md for guidelines.

    License

    This project is licensed under the MIT License.