4

بناء محرر كتابة المقالات php

السلام عليكم ورحمة الله

انا قمت ببرمجة موقع خاص بالمحتوى والمقالات ورايد بناء محرر مثل محرر مجتمع حسوب

حيث في مجتمع حسوب يستخدم input ولكن عندما تكتب الموضوع وتنقر على enter في لوحة المفاتيح يضيف ولكن لا يراه المستخدم

فهل هنالك احد يمكن ان يفيدني في كيفية برمجة محرر للمقالات لموقعي

ملاحضة

أعلم بوجود محررات جاهزة مثل المستعملة في المنتديات والووردبريس ولكن اريد برمجة المحرر بنفسي

يرجى الدخول لحسابك أو تسجيل حساب لتستطيع إضافة تعليق
حساب جديد دخول

التعليقات

4
mkhatib أضف ردا

قمنا في منشر ببناء محرر من الصفر أسميناه كاربون مفتوح المصدر هنا:

يمكنك تجربته بالعربية هنا:

إذا كان لديك أي استفسار عن كيفية استخدامه يسعدني الإجابة. إذا كان هنالك خطأ برمجي رجاءً افتح تقرير على GitHub وسأحاول مساعدتك هناك.

1
عبدالسميع أضف ردا

شكرا لك هذا هو الشيء الذي أبحث عنه

وان شاء الله يكون في ميزان حسناتكم

سوف اقوم بتجربته وان واجهتني اي مشكلة سأتواصل معك

0
عبدالسميع أضف ردا

أخي @mkhatib حاولت ان افهم المحرر ولكني لم استطع ان اضيفه الى موقعي

هل يوجد شرح فيديو لكيفية تركيب المحرر

1
zakariamouhid أضف ردا

هذا ما قد أفيدك به

/* ----- textarea أو input يعمل من العنصر ----- */
var ss = input.selectionStart, // بداية تحديد النص

       se = input.selectionEnd; // نهاية تحديد النص


ss === se // موضع الكتابة

سيفيدك في أن تعرف المكان الذي ستقطع منه النص أو ما شابه

1
يوسف سيد أضف ردا

هذا لا يفيد فلا input ولا textArea يدعم عناصر HTML أبناء، حلول:

  1. عنصر مع ContentEditAble: أسهل الحلول الخاصة والمستخدم في حسوب IO، مع Range، Selection لكن هناك الكثير من الإختلافات بين المتصفحات، والكثير من المشاكل، يجعلك تشد شعرك.

  2. عنصر مع محرر وهمي: هو الأفضل برأي فلا إختلاف بين المتصفحات ولا مشاكل وأنت من ستعالج العمليات.

  3. إستخدام محرر صنع لذلك: أسهل وأحيانًا أفضل الحلول فلن تصنع/تخترع العجلة لكنه يقيدك بنظام معين.

1
zakariamouhid أضف ردا

لم أقل له أن يضيف عناصر أبناء إنما عندما يكتب المستخدم يمكنه معرفة مكان الكتابة والمتغيرين ss و se هما عددين

0
يوسف سيد أضف ردا

ثم ماذا سيفعل صديقي، كيف سيضيف مثلًا عنصر مثل هذا @zakariamouhid أثناء التحرير؟ جميع الحلول التي أفكر بها لذلك غير عملية مثلًا جعله فوق العنصر بـCSS.

0
zakariamouhid أضف ردا

أول مرة أرى هذا

<div contenteditable="true">test<span style="color: #f00;">hello</span></div>

بهذا يصبح ال div مثل textarea يمكن وضع العناصر داخله وتلوينها

1
يوسف سيد أضف ردا

نعم، والتعامل معه عبر Range، Selection إبدء من window.getSelection() لكن احذر يوجد الكثير من الإختلافات بين المتصفات، وهذه العناصر عند النسخ واللصق تلصق نفس عناصر الHTML بداخلها والحل لتفادي ذلك هو إيقاف الحدث الإفتراضي Pase وكتابة آخر بديل.

0
zakariamouhid أضف ردا

هل تعني أن عند نسخ و لصق مثلا

<span>t</span>

سيتم طباعة فقط t ؟

أضن أن الحل هو تحول الرمزين < و > إلى الكتابة &;

هل اكتب هكذا إذن

<div pase="false" contenteditable="true"></div>
1
يوسف سيد أضف ردا

لا لا أقصد هذا، جرب فتح هذا الرابط:

data:text/html, <div contenteditable style="width: 200px; height: 300px; border: black 1px solid"></div>

ثم انسخ هذا التعليق وأنظر ماذا يظهر لك :)،

pase="false"

أقصد حل مثل هذا

ليس الأفضل لكنه يعمل.

0
zakariamouhid أضف ردا

ولاكن النسخ واللصق يعمل تلقائيا دون نافذة

0
يوسف سيد أضف ردا

لم أفهم ما تقصد، هل جربت لصق عنصر نسخته من الصفحة مثلًا أحد التعاليق، وإن لصقت رأبط سيظهر رابط في المحرر.

0
zakariamouhid أضف ردا

هكذا لا يتم تحويل الكود إلى ttt إلا إذا وضعته ب JavaScript هكذا

div.innerHTML = "<span>ttt</span>";// ttt
1
يوسف سيد أضف ردا

لا تنسخ:

ttt

بل إنسخ عنصر حيّ مثلًا إن نسختَ هذا التعليق سيظهر بنفس الخط فقط انسخ هذا التعليق وضعه :)

1
zakariamouhid أضف ردا

فهمت الآن :) عندما أنسخ التعليق تنسخ معه خصايصه كالخلفية وعند لصقه تنفذ خصائص التعليق

0
zakariamouhid أضف ردا

هذا هو الحل

<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);
};
0
يوسف سيد أضف ردا

لا يعمل على الكثير من المتصفحات :( لا يسمح بالوصول إلى الـclipboard أفضل متصفح يدعم هذه الطريقة هو كروم غيره بالكاد يدعهما أو لا يدعهما.

0
zakariamouhid أضف ردا

جربته على 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" لاكن هي أيضا ستعيدنا إلى المشكل الأول :)

0
يوسف سيد أضف ردا

جرب إصدار قديم قليلًا :)، بالمناسبة هذه الشيفرة الأفضل:

"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 وهذا صعب قليلًا.

1
mahmoud015 أضف ردا

كنت اريد احد الاسكربتات الجاهزه الخاصه بمحرر المقالات لو تعرف احدها ارجو ان تعطيني رابط له وجزاك الله خيرا.

1
عبدالسميع أضف ردا

هذا محرر جاهز

تقدر تضيفه لموقعك