ما هو محرر JavaScript الذي يجب أن أستخدمه؟

Question

خلفية

أنا أعمل على تطبيق يتطلب محتوى يديره المستخدم ، وقررت استخدام محرر تخفيض النمط على غرار مكدس. بعد البحث في هذا الموضوع خلال الأيام القليلة الماضية ، أدرك أن هناك العديد من الشوكات من محرر WMD الأساسي ، وبعضها مع بعض التحسينات الأساسية وبعضها مع اختلافات خطيرة من Overflow One.

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

فيما يلي المتطلبات ، بالإضافة إلى ما تمكنت من العثور عليه بالفعل. آمل أن يساعدني هذا السؤال في تحديد الإصدار الذي يجب الذهاب إليه ، وربما ساعدني في اكتشاف منفذ مناسب لاحتياجاتي.

---

متطلبات مشروعي

• معاينة حية
• العديد من المحررين على نفس الصفحة (لا أعرف عدد المقدمة ، حيث يمكن للمستخدم إضافة مربع تحرير آخر ديناميكيًا).
• القدرة على تمديد الأزرار الإضافية (أريد زر تحميل صورة ، بدلاً من مجرد إضافة ملف img URL).
• القدرة على إظهار/إخفاء مربع التحرير ديناميكيًا (ومشاهدة مربع المعاينة فقط).
• ليس هناك حاجة مطلقة ، لكنني أفضل التمسك بأقرب من مظهر المكدس المزيج والشعور به ، لأنه معروف جيدًا.
• لا أعرف ما إذا كان هذا مهمًا ، لكن الواجهة الخلفية مكتوبة في Django.

المحررين الذين نظرت إليهم

فيما يلي بعض قواعد التعليمات البرمجية التي نظرت إليها ، مع الأفكار. من الواضح ، قد أفتقد حلًا آخر هناك.

• ال derobins إصدار. من ما يمكنني قوله ، هذا هو إصدار Overflow الرسمي. يبدو أنه لا يدعم العديد من المحررين في صفحة واحدة.
• jquery.markedit. تبدو جيدة جدًا ، ولكنها مختلفة تمامًا عن إصدار Overflow Stack.
• Moowmd. يبدو أن الفائز الآن ، لكنني قلق قليلاً لأنه يبدو أقل نشاطًا/قابلاً للاختراق من Markedit.
• ال WMD-New إصدار. لست متأكدًا ، يبدو وكأنه قاعدة كود قديمة دون استخدام كبير.
• ال فرع socialsite. يبدو أنه ليس للاستخدام العام.

Answer 1

في النهاية ، بعد أن نظرت حولها أكثر قليلاً لمحرر جاهز ، استقرت على منفذ WMD المفتوح ، الموجود في http://github.com/openlibrary/wmd.

الأسباب التي اخترت هذا المحرر

1. يجتمع عظم من متطلباتي.
2. يبدو أن محرر Stack Overflow. هناك بعض الاختلافات السلوكية (انظر أدناه).
3. تم تصميمه على قمة jQuery (ولا يتطلب موتول, ، وهو ميزة إضافية على المنافس الجاد الآخر ، Moowmd).

انتهى بي الأمر بتنفيذ الوظيفة التي تعرض/تخفي صندوق التحرير بنفسي ، والذي أثبت أنه سهل للغاية بالنسبة للجزء الأكبر. أنا لا مدد المحرر بأي أزرار ، وأنا متأكد من أنه سيتطلب بعض العبث في مصدره ، لكنني لا أعتقد أنها ستكون صفقة كبيرة جدًا.

الاختلافات من إصدار Overflow Stack

هناك بعض الاختلافات من محرر Overflow Stack:

1. واحد يدخل في نهاية الخطوط يسبب أ <br/>, ، بدلا من اعتبار فقرة واحدة. لقد تفضلت ذلك بهذه الطريقة ، لذلك أنا بخير مع هذا التغيير.
2. القوائم المرقمة هي رقم تلقائي ، ALA Microsoft Word. هذا هو الضرب يدخل بعد كتابة "1. العنصر الأول" سيحصل عليك تلقائيًا على خط يبدأ بـ "2.". هذا أيضًا تغيير أحبه حقًا.

حسنًا ، آمل أن يساعد هذا أي شخص يبحث عن محرر مماثل. إذا انتهى بي الأمر إلى تخصيص المحرر ، فسوف أقوم بإنشاء فرعتي الخاصة (تم ترخيصه بموجب ترخيص معهد ماساتشوستس للتكنولوجيا) ، لكن الآن سأفلت من العبث بالرمز المصدري.

Answer 2

حسنًا ، أصبح هذا السؤال (والحلول) قديمة جدًا ، لذلك اعتقدت أنني ربما أضع شيئًا محدثًا هنا. قون

إنها بداية عام 2014 ، وعندما وصلت إلى نفس المشكلة التي استخدمتها في النهاية pagedown-bootstrap. إنه محرر WMD المستند إلى Twitter Bootstrap ، مع شريط نمط قابل للتخصيص بالكامل (شريط الأزرار).

هناك أيضًا بديل يسمى bootstrap-markdown, ، والتي تبدو أيضا واعدة للغاية.

Answer 3

لجزء المعاينة المباشرة ، المواجهة المكتبة سهلة العمل معها (وكما يشير إدان ، يتم تضمينها في قاعدة الشفرة)

يمكنك استخدامه شيئًا كهذا (لا تحتاج إلى استخدام jQuery إذا كنت لا تريد ذلك)

$(document).ready(function(){
    var converter = new Attacklab.showdown.converter();
    function update_description_preview(){
        $('#description-preview').html(converter.makeHtml($("#id_description").val()));
    }
    update_description_preview();

    $("#id_description").keyup(function(){
        update_description_preview();
    });
});

تستخدم وظيفة update_description_preview كائن المحول لقراءة markdown في عنصر #ID_Description ، وتفريغه في عنصر #الوصف preview.

أنا هنا أتصل بالوظيفة مباشرة بعد تعريفها لتهيئة نوافذ المعاينة (كان هناك بعض النصوص المحملة مسبقًا في المحرر)

البت الأخير هو مجرد تسجيل الوظيفة مع حدث keyup.

Answer 4

لست متأكدًا مما إذا كان يتناسب تمامًا مع المتطلبات القديمة ، ولكن هناك حل آخر متاح في عام 2014 هو محرر تخفيض المصدر مفتوح المصدر مع معاينة مرخصة بموجب Apache 2.0 وتم إنشاؤها بواسطة Topten Software.

العرض التوضيحي عبر الإنترنت متاح هنا: http://www.toptensoftware.com/markdowndeep/dingus

Answer 5

اساسي تخفيض مشترك يتضمن ملف JavaScript المستقل لتحويل Markdown إلى HTML. من السهل تنفيذها كما هو موضح في المسؤول العرض التوضيحي أو هذا بلونكر.

بقسوة:

<script src="//jgm.github.io/stmd/js/stmd.js"></script>
...
var reader = new stmd.DocParser();
var writer = new stmd.HtmlRenderer();
...
var parsed = reader.parse("Some **markdown** text");
var result = writer.renderBlock(parsed);