جاهز للعمل في ثلاث خطوات

استخدم مدير الحزم لديك، أو حمّل سكربتًا واحدًا من CDN دون أي خطوة بناء.

npm install open-wysiwyg-editor

حمّل ملف التنسيق مرة واحدة. فهو ينسّق المحرّر وواجهته ومحتواه. ولا يغيّر CSS صفحتك مظهرَ المحرّر، بما في ذلك Tailwind: خصّصه عبر رموز التصميم.

import "open-wysiwyg-editor/style.css"; // or style.min.css

تركّب createEditor(options) المحرّر داخل العنصر الذي تمرّره وتعيد كائن editor. استدعِها في المتصفح بعد وجود العنصر.

import { createEditor } from "open-wysiwyg-editor";

const editor = createEditor({
  element: "#editor", // a selector, or an HTMLElement
  placeholder: "Write something…",
  onUpdate: (editor) => console.log(editor.getHTML()),
});

اقرأ الـ HTML النظيف والمعقَّم (أو JSON بصيغة ProseMirror) وحمّله لاحقًا.

editor.getHTML();              // clean, sanitized HTML: save this
editor.getJSON();              // or ProseMirror JSON
editor.setContent("<p>…</p>"); // load saved content back

في صفحة بلا محرّر، حمّل content.css وغلّف الـ HTML المعقَّم بـ owe-content-root.

<!-- import "open-wysiwyg-editor/content.css" -->
<div class="owe-content-root">
  <!-- your sanitized, saved HTML -->
</div>