أفضل محرر نص غني لموقعك

[خليل سليم]

إن محرر النصوص الغني WYSIWYG editor لأداة ضرورية في مواقعك، حيث يطلبها أصحاب المواقع باستمرار، وتوجد العشرات من هذه المحرات، ومتوافرة بكثرة في المواقع المختصة، منها ما هو مجاني ومنها ما هو مدفوع، منها ما هو مفتوح المصدر ومنها ما هو مغلق المصدر، والسؤال هنا: من أفضلها؟.
لقد جربت الكثير من المحررات، وإن أفضل محرر رأيته وأعجبني هو محرر مجاني ومفتوح وصدر حديثا، ألا وهو محرر مايكروسوفت الموجود في مكتبة AjaxControlToolKit.

استخدمت هذا المحرر من أول يوم صدر به، واستغنيت فورا عن كافة المحررات الأخرى للعديد من المزايا منها لا الحصر، السرعة في التحميل، الخغة على المتصفح، دعم المعايير.
دعونا نجرب الأداة ونكسب الوقت
قم بتحميل الأداة من هنا
http://ajaxcontroltoolkit.codeplex.c...eleaseId=33804

الآن قم بإضافة الأداة للمشروع، و سأختصر الأمر كثيرا إن كنت لا تعرف كيف ، قم بفك الضغط عن المجلد المضغوط وانسخ ما بداخل المجلد ما عدا المستندين النصيين إلى مجلد Bin في موقعك وإن لم يكن المجلد موجود أضفه بالنقر بالزر الزر الأيمن على خصائص المشروع ثم إضافة مجلد مخصص كالتالي:


الآن لاستدعاء المكتبة في صفحة عليك، إضافة السطر التالي لتعليمات الصفحة

<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit.HTMLEditor" tagprefix="cc1" %>

طبعا يضاف هذا السطر بعد السطر الأول للصفحة مباشرة


يتوجب عليك استدعاء هذه الأداة أيضا ويجب وضعها قبل المحرر

<asp:ScriptManager runat="server"> </asp:ScriptManager>

الأن تستطيع استدعاء المحرر في أي مكان عبر إضافته بالوسم التالي:

<cc1:Editor ID="Editor1" runat="server" />

مبارك /لقد أضفت المحرر بنجاح وستظهر لك خصائصه، بالكامل وتستطيع التعديل عليها وضبطها كما تريد.

وفق الله الجميع

المصدر
http://developers.ps/articles.aspx?id=41

[عبدالله حسن]

ممتاز أخي برمودا

لكن هناك الكثير من الأمور لا يدعمها المحرر منها تعدد اللغات أو على الأقل تغيير لغة و اتجاه المحرر
من اليمين إلى اليسار و كذلك أيضاً أزرار المحرر ... نعم بإمكان ذلك لكن ليس بالمرونة المطلوبة


عملت تطبيق للمحرر و هو عبارة عن مثالين

المثال الأول المحرر بالوضع الطبيعي واستخدامه مع UpdateProgress بأبسط طرقه

المثال الثاني تحويل اتجاه المحرر إلى RTL و أيضاً كذلك الأزرار مع تحويل tooltip إلى العربية
أيضاً أضفت خاصية بسيطة بإسم FloatToptoolbar و تملك قيمتين Right و Left و هي
لتحويل اتجاه أزرار المحرر إما لليمين أو اليسار

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

و هنا الصنف للمحرر العربي

using System;
using System.Text;
using System.ComponentModel;
using System.Web.UI;
using AjaxControlToolkit.HTMLEditor;

namespace CustomSwalifEditor
{
    public class SwalifEditor : Editor
    {
        public string Floating;

        public SwalifEditor()
        {
            Content = "<div style=\"direction: rtl; \"></div>";
            TopToolbar.Style.Add("direction", "rtl");
        }

        protected override void OnInit(EventArgs e)
        {
            Floating = (FloatToptoolbar == Float.Right) ? "right" : "left";

            StringBuilder sb = new StringBuilder();
            sb.Append("<style type=\"text/css\">");
            sb.Append(Environment.NewLine);
            sb.Append("div#" + this.ID);
            sb.Append(" .ajax__htmleditor_editor_toptoolbar div { float:");
            sb.Append(Floating);
            sb.Append(";}");
            sb.Append(Environment.NewLine);
            sb.Append("</style>");

            Page.Header.Controls.Add(new LiteralControl(sb.ToString()));
            base.OnInit(e);
        }

        protected override void FillTopToolbar()
        {
            TopToolbar.Buttons.Add(new CustomSwalifEditor.Italic());
            TopToolbar.Buttons.Add(new CustomSwalifEditor.Underline());
            TopToolbar.Buttons.Add(new CustomSwalifEditor.Bold());

            TopToolbar.Buttons.Add(new AjaxControlToolkit.HTMLEditor.ToolbarButton.HorizontalSeparator());

            TopToolbar.Buttons.Add(new CustomSwalifEditor.JustifyLeft());
            TopToolbar.Buttons.Add(new CustomSwalifEditor.JustifyCenter());
            TopToolbar.Buttons.Add(new CustomSwalifEditor.JustifyRight());

        }

        protected override void FillBottomToolbar()
        {
        }

        [Category("Appearance"), DefaultValue(Float.Right)]
        public virtual Float FloatToptoolbar { get; set; }
    }

    public class Bold : AjaxControlToolkit.HTMLEditor.ToolbarButton.Bold
    {
        public override string ToolTip
        {
            get { return "خط غامق"; }
        }
    }

    public class Italic : AjaxControlToolkit.HTMLEditor.ToolbarButton.Italic
    {
        public override string ToolTip
        {
            get { return "خط مائل"; }
        }
    }

    public class Underline : AjaxControlToolkit.HTMLEditor.ToolbarButton.Underline
    {
        public override string ToolTip
        {
            get { return "تسطير"; }
        }
    }

    public class JustifyLeft : AjaxControlToolkit.HTMLEditor.ToolbarButton.JustifyLeft
    {
        public override string ToolTip
        {
            get { return "محاذاة إلى اليسار"; }
        }
    }

    public class JustifyCenter : AjaxControlToolkit.HTMLEditor.ToolbarButton.JustifyCenter
    {
        public override string ToolTip
        {
            get { return "توسيط"; }
        }
    }

    public class JustifyRight : AjaxControlToolkit.HTMLEditor.ToolbarButton.JustifyRight
    {
        public override string ToolTip
        {
            get { return "محاذاة إلى اليمين"; }
        }
    }

    public enum Float { Right, Left }
}

و هذه صورة للمثال الثاني :






لتحميل المشروع كاملاً لمن يريده
http://www.mediafire.com/?tijz1gnoyl2

[خليل سليم]

ما شاء الله جميل أخي الفاضل عبدالله

بخصوص تعدد اللغات فأدوات الأجاكس جميعها تدعم localization وتجد العديد من اللغات بها الا ان كنت تقصد تغيير اللغة يدوي مع الاتجاه

بخصوص الاتجاه فأنا كنت أستغني عنه مثل ما انت عملت بوضع ديف يمين وتنتهي القضية

أنت اختصرت الوقت لاعادة العملية في اضافة الديف
وفتحت الفرصة للتطوير

بنظري الأداة جديدة وستضاف العديد العديد من الخواص لها .. ويمكنك مراسلة الأداة على الموقع الخاص لها واضافة ما توصلت اليه.

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

[laidi009]

اخي برمودا ...ممكن تقلي كيف يمكنني ربط صفحة بهذا المحرر مع ملف xml
يعني تكون هناك صفحات واحدة بمحرر ويتم فيه تعديل النص ثم حفظه على ملف xml
وصفحة اخرى تعرض الملف ..
يعني من دون استخدام اي قاعدة بيانات فقط ملف الـ xml

[خليل سليم]

السلام عليكم
أخي وليد ليس للمحرر دخل في الحفظ في قاعدة او في ملف
المحرر عليه ان ينسق فقط
والباقي عليك
ابحث في الانترنت عن كيفية الكتابة في ملف xml وعندها ستكون الصورة قد اتضحت لك

[laidi009]

اوك .. شكرا اخي برمودا

[star_tamer_1980]

بصراحة أن مش عارف أقولك إيه
حضرتك أهديتني شيء أنا كانت دايخ علشان أعرف إزاي أدرجه في الموقع بتاعي
ولثاني مرة ألف شكر
وجزاك الله كل خير