FullEditor by 99foundr

A lightweight, framework-free WYSIWYG editor that can be embedded in different websites.

Features

• Small footprint and no dependencies
• Rich text commands: bold, italic, underline, strike
• Headings, blockquotes, lists, and code blocks
• Link insertion with URL normalization
• Image insertion from file picker and clipboard paste
• Custom async image upload handler
• Keyboard shortcuts: Ctrl/Cmd + B, I, U, K
• Public API: getHTML, setHTML, getText, clear, focus, destroy

Funding

Support my opensource work by donating. https://github.com/sponsors/icodervj

How To Use Fulleditor in your website

Option 1: Copy Files Into Your Project

1. Copy editor.js and editor.css into your website.
2. Include them in your page.
3. Initialize the editor.

<link rel="stylesheet" href="editor.css">
<script src="editor.js"></script>

<div id="editor"></div>
<script>
    const editor = new Fulleditor('#editor', {
        placeholder: 'Write something...'
    });
</script>

Option 2: Use GitHub CDN (jsDelivr)

Use latest files from the default branch (no version in URL):

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/icodervj/fulleditor/editor.css">
<script src="https://cdn.jsdelivr.net/gh/icodervj/fulleditor/editor.js"></script>

<div id="editor"></div>
<script>
    const editor = new Fulleditor('#editor');
</script>

For smaller payloads, use the minified bundle:

https://cdn.jsdelivr.net/gh/icodervj/fulleditor/dist/editor.min.js
https://cdn.jsdelivr.net/gh/icodervj/fulleditor/dist/editor.min.css

Image Upload

By default, selected images are embedded as Base64 data URLs.

For production, provide imageUpload(file) that uploads to your backend or cloud storage and returns a final image URL.

const editor = new Fulleditor('#editor', {
    imageUpload: async (file) => {
        const formData = new FormData();
        formData.append('image', file);

        const response = await fetch('/api/upload-image', {
            method: 'POST',
            body: formData
        });

        const data = await response.json();
        return data.url;
    }
});

Configuration

Supported options:

• toolbar: Array of toolbar action keys
• placeholder: Placeholder string
• initialValue: Initial HTML content
• allowedImageTypes: Allowed MIME types
• maxImageSizeMB: Upload size limit
• imageUpload: Async function for image upload
• onChange: Callback with html and plain text

Default toolbar actions:

bold, italic, underline, strike, h2, blockquote, ul, ol, link, image, code, undo, redo

API

editor.getHTML();
editor.getText();
editor.setHTML('<p>Hello</p>');
editor.clear();
editor.focus();
editor.destroy();

Local Demo

Open index.html in a browser.

npm Package

Install:

npm install fulleditor

Use from CDN via npm package (latest, no version in URL):

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fulleditor/dist/editor.min.css">
<script src="https://cdn.jsdelivr.net/npm/fulleditor/dist/editor.min.js"></script>

Build minified bundle locally:

npm install
npm run build

Build output:

dist/editor.min.js
dist/editor.min.css

License

MIT