📦 CDN Documentation

Get started with Akhlaq Digital Editor using our CDN for vanilla JavaScript projects. Perfect for quick prototyping or adding rich text editing to any website.

🚀 Quick Start

1. Include CSS and Script

<!-- Include editor styles -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@akhlaqdigital/editor/dist/styles.css">

<!-- Include editor script -->
<script src="https://cdn.jsdelivr.net/npm/@akhlaqdigital/editor/dist/ad-editor.js"></script>

2. Create HTML Container

<div id="editor-container"></div>

3. Initialize the Editor

<script>
  // Wait for the CDN to load
  function onCDNLoaded() {
    const editor = window.AkhlaqDigitalEditor.init({
      container: '#editor-container',
      placeholder: 'Start typing...',
      onChange: (content) => {
        console.log('Content changed:', content);
      }
    });
  }
</script>

⚙️ Configuration Options

Option	Type	Default	Description
container	string	required	CSS selector for the container element
content	string \| null	null	Initial HTML content
placeholder	string	"Start typing..."	Placeholder text when editor is empty
onChange	function	-	Callback when content changes
isAutoFocus	boolean	false	Enable auto focus on editor
isEditable	boolean	true	Enable editing capabilities
isRefreshEditor	boolean	false	Force remount editor when dependencies change
isShowMention	boolean	true	Enable @mention functionality
isFileUpload	boolean	true	Enable file upload features
isShowEmoji	boolean	true	Enable emoji picker with categorized emojis
isBottomToolbar	boolean	false	Position toolbar at the bottom
height	number	300	Initial height of the editor in pixels
acceptedFileTypes	string	"*"	Accepted file types for upload
mentions	Array<{id, label}>	[]	List of mentionable users
className	string	-	CSS classes for the editor container
onInit	function	-	Callback when editor is initialized
onDestroy	function	-	Callback when editor is destroyed
handleImageInsertion	function	-	Custom image upload handler
handleFilesChange	function	-	Custom file upload handler

🔧 Advanced Example

<!DOCTYPE html>
<html>
<head>
  <title>My Editor App</title>
</head>
<body>
  <div id="my-editor"></div>

  <script src="https://cdn.jsdelivr.net/npm/@akhlaqdigital/editor/dist/ad-editor.js"></script>
  <script>
    function onCDNLoaded() {
      const editor = window.AkhlaqDigitalEditor.init({
        container: '#my-editor',
        content: '<h1>Welcome!</h1><p>Start writing...</p>',
        placeholder: 'Type your content here...',
        isAutoFocus: false,
        isEditable: true,
        isShowMention: true,
        isShowEmoji: true,
        isFileUpload: true,
        mentions: [
          { id: 1, label: 'John Doe' },
          { id: 2, label: 'Jane Smith' }
        ],
        onChange: (content) => {
          // Save content to localStorage
          localStorage.setItem('editorContent', content);
        },
        onInit: (instance) => {
          console.log('Editor initialized:', instance);
        }
      });
    }
  </script>
</body>
</html>

🎨 Styling & CSS

CSS Classes

The editor uses scoped CSS classes with the akd- prefix to avoid conflicts:

.akd - Main editor container with all core styles
.dropdown-menu - Dropdown menus for mentions and tools
.tableWrapper - Table container for responsive table handling

Custom Styling

/* Custom editor container */
.akd {
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto;
}

/* Focus state */
.akd:focus-within {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Dark theme example */
.akd.dark-theme {
  background: #1a1a1a;
  color: #ffffff;
  border-color: #374151;
}

/* Custom mention styling */
.mention {
  background: #3b82f6;
  color: white;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 500;
}

📚 API Reference

Global Methods

window.AkhlaqDigitalEditor.init(options)

Initializes a new editor instance with the given options.

editor.getContent()

Returns the current HTML content of the editor.

editor.setContent(html)

Sets the editor content to the provided HTML.

editor.destroy()

Cleans up and destroys the editor instance.

🎯 Try It Live

See the CDN version in action with our interactive demo.

View Live Demo →