Web Projeleriniz İçin En Hızlı
WYSIWYG HTML Editor & Rich Text Editor

<!-- 1. CSS ve JS Kütüphanelerini Dahil Edin -->
<link rel="stylesheet" href="/assets/css/aieditor-editor.css">
<div id="my-editor"></div>
<script src="/assets/js/aieditor.js"></script>

<script>
  // 2. Editörü Başlatın
  const editor = new AiEditor('#my-editor', {
    licenseKey: 'LIC-XXXX-XXXX-XXXX', // Satın aldığınız lisans anahtarı
    placeholder: 'Yazmaya başlayın veya komutlar için / tuşlayın...',
    slashCommands: true,
    stickyToolbar: true,
    onChange: (html, text) => {
      console.log('Semantik HTML5 Çıktısı:', html);
    }
  });
</script>
import React, { useEffect, useRef } from 'react';
// AiEditor Pure JS SDK Entegrasyonu
export default function AiEditorWrapper({ initialHtml, onChange }) {
  const containerRef = useRef(null);
  const editorInstance = useRef(null);

  useEffect(() => {
    if (containerRef.current && !editorInstance.current) {
      editorInstance.current = new window.AiEditor(containerRef.current, {
        licenseKey: 'LIC-XXXX-XXXX-XXXX',
        placeholder: 'İçeriğinizi yazın...',
        slashCommands: true,
        onChange: (html) => onChange?.(html)
      });
      if (initialHtml) editorInstance.current.setHTML(initialHtml);
    }
    return () => editorInstance.current?.destroy();
  }, []);

  return <div ref={containerRef} className="rounded-md border border-slate-200" />;
}
<template>
  <div ref="editorEl" class="rounded-md border border-slate-200"></div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';

const editorEl = ref(null);
let editor = null;
const emit = defineEmits(['change']);

onMounted(() => {
  editor = new window.AiEditor(editorEl.value, {
    licenseKey: 'LIC-XXXX-XXXX-XXXX',
    slashCommands: true,
    onChange: (html) => emit('change', html)
  });
});

onUnmounted(() => editor?.destroy());
</script>
<!-- Laravel Blade / Saf PHP Form Alanı -->
<form action="/posts/save" method="POST">
  @csrf
  <div id="editor-container">{!! $post->content ?? '' !!}</div>
  <input type="hidden" name="content" id="editor-content-input">
  <button type="submit" class="btn btn-primary mt-3">Kaydet</button>
</form>

<script src="{{ asset('assets/js/aieditor.js') }}"></script>
<script>
  const editor = new AiEditor('#editor-container', {
    licenseKey: '{{ config('services.aieditor.key') }}',
    onChange: (html) => {
      document.getElementById('editor-content-input').value = html;
    }
  });
</script>
import { AiEditor, AiEditorOptions } from './types/aieditor';

const options: AiEditorOptions = {
  licenseKey: 'LIC-XXXX-XXXX-XXXX',
  strictLicense: false,
  slashCommands: true,
  quickInsert: true,
  height: 480,
  onChange: (html: string, text: string) => {
    console.log(`Kelime: ${text.length}, HTML Boyutu: ${html.length} byte`);
  }
};

const editor = new AiEditor('#editor-target', options);
const cleanHtml: string = editor.getHTML();