السلام عليكم ورحمة الله
انا قمت ببرمجة موقع خاص بالمحتوى والمقالات ورايد بناء محرر مثل محرر مجتمع حسوب
حيث في مجتمع حسوب يستخدم input ولكن عندما تكتب الموضوع وتنقر على enter في لوحة المفاتيح يضيف ولكن لا يراه المستخدم
فهل هنالك احد يمكن ان يفيدني في كيفية برمجة محرر للمقالات لموقعي
أعلم بوجود محررات جاهزة مثل المستعملة في المنتديات والووردبريس ولكن اريد برمجة المحرر بنفسي
قمنا في منشر ببناء محرر من الصفر أسميناه كاربون مفتوح المصدر هنا:
يمكنك تجربته بالعربية هنا:
إذا كان لديك أي استفسار عن كيفية استخدامه يسعدني الإجابة. إذا كان هنالك خطأ برمجي رجاءً افتح تقرير على GitHub وسأحاول مساعدتك هناك.
شكرا لك هذا هو الشيء الذي أبحث عنه
وان شاء الله يكون في ميزان حسناتكم
سوف اقوم بتجربته وان واجهتني اي مشكلة سأتواصل معك
أخي @mkhatib حاولت ان افهم المحرر ولكني لم استطع ان اضيفه الى موقعي
هل يوجد شرح فيديو لكيفية تركيب المحرر
هذا ما قد أفيدك به
/* ----- textarea أو input يعمل من العنصر ----- */
var ss = input.selectionStart, // بداية تحديد النص
se = input.selectionEnd; // نهاية تحديد النص
ss === se // موضع الكتابة
سيفيدك في أن تعرف المكان الذي ستقطع منه النص أو ما شابه
هذا لا يفيد فلا input ولا textArea يدعم عناصر HTML أبناء، حلول:
عنصر مع ContentEditAble: أسهل الحلول الخاصة والمستخدم في حسوب IO، مع Range، Selection لكن هناك الكثير من الإختلافات بين المتصفحات، والكثير من المشاكل، يجعلك تشد شعرك.
عنصر مع محرر وهمي: هو الأفضل برأي فلا إختلاف بين المتصفحات ولا مشاكل وأنت من ستعالج العمليات.
إستخدام محرر صنع لذلك: أسهل وأحيانًا أفضل الحلول فلن تصنع/تخترع العجلة لكنه يقيدك بنظام معين.
لم أقل له أن يضيف عناصر أبناء إنما عندما يكتب المستخدم يمكنه معرفة مكان الكتابة والمتغيرين ss و se هما عددين
ثم ماذا سيفعل صديقي، كيف سيضيف مثلًا عنصر مثل هذا @zakariamouhid أثناء التحرير؟ جميع الحلول التي أفكر بها لذلك غير عملية مثلًا جعله فوق العنصر بـCSS.
أول مرة أرى هذا
<div contenteditable="true">test<span style="color: #f00;">hello</span></div>
بهذا يصبح ال div مثل textarea يمكن وضع العناصر داخله وتلوينها
نعم، والتعامل معه عبر Range، Selection إبدء من window.getSelection() لكن احذر يوجد الكثير من الإختلافات بين المتصفات، وهذه العناصر عند النسخ واللصق تلصق نفس عناصر الHTML بداخلها والحل لتفادي ذلك هو إيقاف الحدث الإفتراضي Pase وكتابة آخر بديل.
هل تعني أن عند نسخ و لصق مثلا
<span>t</span>
سيتم طباعة فقط t ؟
أضن أن الحل هو تحول الرمزين < و > إلى الكتابة &;
هل اكتب هكذا إذن
<div pase="false" contenteditable="true"></div>
لا لا أقصد هذا، جرب فتح هذا الرابط:
data:text/html, <div contenteditable style="width: 200px; height: 300px; border: black 1px solid"></div>
ثم انسخ هذا التعليق وأنظر ماذا يظهر لك :)،
pase="false"
أقصد حل مثل هذا
ليس الأفضل لكنه يعمل.
لم أفهم ما تقصد، هل جربت لصق عنصر نسخته من الصفحة مثلًا أحد التعاليق، وإن لصقت رأبط سيظهر رابط في المحرر.
هكذا لا يتم تحويل الكود إلى ttt إلا إذا وضعته ب JavaScript هكذا
div.innerHTML = "<span>ttt</span>";// ttt
لا تنسخ:
ttt
بل إنسخ عنصر حيّ مثلًا إن نسختَ هذا التعليق سيظهر بنفس الخط فقط انسخ هذا التعليق وضعه :)
فهمت الآن :) عندما أنسخ التعليق تنسخ معه خصايصه كالخلفية وعند لصقه تنفذ خصائص التعليق
هذا هو الحل
<pre contenteditable="true"></pre>
var pre = document.querySelector("pre[contenteditable=true]");
pre.onpaste = function (e) {
"use strict";
e.preventDefault();
var text = e.clipboardData.getData("text/plain");
document.execCommand("insertHTML", false, text);
};
لا يعمل على الكثير من المتصفحات :( لا يسمح بالوصول إلى الـclipboard أفضل متصفح يدعم هذه الطريقة هو كروم غيره بالكاد يدعهما أو لا يدعهما.
جربته على google chrome و firefox النسخ الجديدة نسبيا
وعلى opera في نسخة قديمة ويعمل جيدا
يمكن جعل الكود هكذا
var pre = document.querySelector("pre[contenteditable=true]");
pre.onpaste = function (e) {
"use strict";
e.preventDefault();
var text = "";
if (e.clipboardData && e.clipboardData.getData) {
text = e.clipboardData.getData("text/plain");
} else {
text = window.prompt("paste here: ");
}
document.execCommand("insertHTML", false, text);
};
ولاكن بعد كل هذا هناك مشكلة أخرى فعند لصق مثلا
<span>ttt</span>
يظهر فقط ttt
وأضن أن حل هذه المشكلة هو عوضا عن "text/plain" إستخدام "text/html" لاكن هي أيضا ستعيدنا إلى المشكل الأول :)
جرب إصدار قديم قليلًا :)، بالمناسبة هذه الشيفرة الأفضل:
"use strict";
var pre = document.querySelector("pre[contenteditable=true]");
pre.addEventListener("paste", function (e) {
var vdiv = document.createElement("div"),
text;
if (e.clipboardData && e.clipboardData.getData)
text = e.clipboardData.getData("text/plain");
// انترنت إكسبلور
else if (window.clipboardData && window.clipboardData.getData)
text = window.clipboardData.getData("text");
else
text = window.prompt("paste here: ");
vdiv.textContent = text
document.execCommand("insertHTML", false, vdiv.innerHTML);
e.preventDefault();
});
تدعم إنترنت اكسبلور، وتحل المشكلة السابقة، وأيضًا لا تستخدم الأحداث من on*** لكي تسمح بتعددها. لكن execCommand لا تعمل على إصدارات كثيرة مستخدمة؛ لذا ستستخدم الrange والselection وهذا صعب قليلًا.
كنت اريد احد الاسكربتات الجاهزه الخاصه بمحرر المقالات لو تعرف احدها ارجو ان تعطيني رابط له وجزاك الله خيرا.
التعليقات