فعال سازی قسمت ارسال فایل و تصویر ویرایشگر آنلاین RedActor در ASP.NET MVC
اندازه‌ی قلم متن
تخمین مدت زمان مطالعه‌ی مطلب: دو دقیقه

در سایت جاری از ویرایشگر آنلاین RedActor استفاده شده و کار کردن با آن هم بسیار ساده است:
یک TextArea ساده را به صفحه اضافه کرده و این افزونه جی‌کوئری را بر روی آن اجرا می‌کنید. به این ترتیب TextArea به صورت خودکار تبدیل به یک ویرایشگر مطلوب خواهد شد. برای مثال:
@Html.TextAreaFor(model => model.ArticleBody, htmlAttributes: new { style = "width:98%; height:500px" })

<script type="text/javascript">
$('#ArticleBody').redactor({
                autoformat: false,
                convertDivs: false
            });
</script>
اما فعال سازی قسمت ارسال فایل و تصویر همراه با آن چطور؟
یک سری مثال نوشته شده با PHP به همراه این ویرایشگر آنلاین هستند که برای ایده گرفتن بد نیستند (البته به این معنا نیست که این ویرایشگر نیازی به PHP دارد. تنها قسمت سمت سرور مثال‌های آن با PHP است). برای مثال اگر در PHP از دستور echo برای ارائه یک نتیجه نهایی به ویرایشگر RedActor استفاده شده، معادل آن در ASP.NET MVC مساوی return Content است.
<script type="text/javascript">
$('#ArticleBody').redactor({
                imageUpload: "@Url.Action(result: MVC.RedactorUpload.ImageUpload())",
                fileUpload: "@Url.Action(result: MVC.RedactorUpload.FileUpload())",
                linkFileUpload: "@Url.Action(result: MVC.RedactorUpload.FileLinkUpload())"
                , autoformat: false
                , convertDivs: false
            });
</script>
برای فعال سازی قسمت آپلود این ادیتور نیاز است پارامترهای imageUpload، fileUpload و linkFileUpload مقدار دهی شوند.
همانطور که ملاحظه می‌کنید از T4MVC برای مشخص سازی مسیرها استفاده شده. برای مثال MVC.RedactorUpload.ImageUpload به این معنا است که در کنترلری به نام RedactorUpload، اکشن متدی به نام ImageUpload پذیرای ارسال فایل ادیتور خواهد بود و به همین ترتیب در مورد سایر پارامترها.
RedactorUploadController هم ساختار بسیار ساده‌ای دارد. برای مثال هر کدام از متدهای آپلود یاد شده یک چنین امضایی دارند:
[HttpPost]
public virtual ActionResult ImageUpload(HttpPostedFileBase file)
{
}
البته در مورد مسایل امنیتی آپلود هم پیشتر در سایت بحث شده است. برای مثال در اینجا استفاده از فیلتر زیر را فراموش نکنید:
 [AllowUploadSpecialFilesOnly(".jpg,.gif,.png")]
در هر کدام از متدهای آپلود (به سه متد برای سه پارامتر یاد شده نیاز است)، ابتدا HttpPostedFileBase را در پوشه‌ایی که مدنظر دارید ذخیره کنید. سپس باید محتوایی را به RedActor بازگشت دهید و اصل کار یکپارچگی با ASP.NET MVC نیز در همینجا است:
در حالت imageUpload، محتوایی به شکل زیر باید بازگشت داده شود:
 return Content("<img src='" + path + "' />");
در حالت fileUpload، پس از ذخیره سازی فایل در سرور، مسیر آن باید به نحو زیر بازگشت داده شود:
 return Content("<a href=" + path + ">" + someName + "</a>");
و در حالت linkFileUpload فقط باید مسیر نهایی فایل ذخیره شده بر روی سرور را بازگشت دهید:
 return Content(path);

همچنین باید دقت داشت که کار ارسال فایل به سرور توسط خود افزونه RedActor انجام می‌شود و نیازی به کدنویسی ندارد. فقط باید سمت سرور آن‌را به نحوی که عنوان شد مدیریت کنید. ابتدا فایل را در سرور ذخیره کنید. سپس باید یک محتوای رشته‌ای را به نحو یاد شده، ساخت و توسط return Content بازگشت داد.

پ.ن.
قسمتی از مطالب متن فوق در نگارش جدید این ویرایشگر به نحو زیر تغییر کرده است.
  • #
    ‫۱۲ سال و ۲ ماه قبل، چهارشنبه ۴ مرداد ۱۳۹۱، ساعت ۰۷:۳۹
    آقای نصیری واقعا شرمنده کردی استاد!
    واقعا انتظار نداشتم که به این سرعت پاسخ بدید.
    یک دنیا ممنونم
  • #
    ‫۱۲ سال و ۲ ماه قبل، چهارشنبه ۴ مرداد ۱۳۹۱، ساعت ۰۸:۰۹
    توی این لینک و این   هم در مورد تابع‌های سمت سرورش هست که با جمع شدن با این مطلب نیاز شما برطرف می‌شه.
    البته این موضوع برای سی کی ادیتور نوشته شده که تفاوتی با این ادیتور نمی‌کنه.
  • #
    ‫۱۲ سال و ۲ ماه قبل، چهارشنبه ۴ مرداد ۱۳۹۱، ساعت ۱۳:۳۵

    سلام

    آقای نصیری میشه طریقه استفاده از این ادیتور رو برای asp.net webform هم شرح بدهید؟

    باتشکر

    • #
      ‫۱۲ سال و ۲ ماه قبل، چهارشنبه ۴ مرداد ۱۳۹۱، ساعت ۱۴:۵۱
      در وب فرم‌ها:
      - یک TextBox را به صفحه اضافه کنید. TextMode آن باید MultiLine باشد تا تبدیل به TextArea شود. همچنین ClientID آن‌را هم مقدار دهی کنید تا بشود در jQuery ازش استفاده کرد.
      - تمام توضیحات یکی است با این تفاوت که:
      الف) return Content در اینجا می‌شود Response.Write
      ب) بجای کنترلر شما از یک http handler می‌تونید استفاده کنید (فایل‌های ashx معروف)
      public class Upload : IHttpHandler {
          public void ProcessRequest (HttpContext context) {
              HttpPostedFile uploads = context.Request.Files["upload"];
              //... save the file
              // return context.Response.Write(...)
              // and then  context.Response.End();         
      در اینجا context.Request.Files امکان دسترسی به فایل‌های آپلود شده را می‌دهد.
      آن‌ها را ذخیره کنید. در آخر کار هم با context.Response.Write مواردی را که در مقاله فوق توضیح داده شد، بازگشت دهید.


      • #
        ‫۹ سال و ۷ ماه قبل، دوشنبه ۲۷ بهمن ۱۳۹۳، ساعت ۰۳:۰۰
        در وب فرم با چیزی که گفتید پیش رفتم و ذخیره فایل به درستی انجام میشه؛ ولی هیچ چیزی برگردانده نمیشه. آیا نیاز به تنظیمات خاصی داره؟ به این خاطر میگم چون مقدار imageUpload  در فایل redactor.js برابر false هستش.
  • #
    ‫۱۲ سال و ۲ ماه قبل، چهارشنبه ۴ مرداد ۱۳۹۱، ساعت ۲۳:۴۳
    سلام من در Action مقدار زیرو برمی‌گردونم ولی در  RedActor  نشون نمیده
    ولی آپلود درست انجام میشه.
    string fileName = Path.GetFileName(file.FileName);
    string filePath = "~/App_Data/Uploads/Pic/" + file.FileName;
    if (file.ContentLength > 0 && fileName != null)
    {
    string path = Path.Combine(Server.MapPath("~/App_Data/Uploads/Pic"), fileName);
    file.SaveAs(path);
    }
    
    return Content("<img src='" + filePath + "' />");
    return Content("<img src='" + path + "' />");
    • #
      ‫۱۲ سال و ۲ ماه قبل، پنجشنبه ۵ مرداد ۱۳۹۱، ساعت ۰۰:۲۵
      درسته. علت این است که پوشه App_Data محافظت شده است و از طریق فراخوانی لینک آن به صورت مستقیم قابل دسترسی نیست.
      اگر فایل‌ها رو در این پوشه ارسال می‌کنید نیاز هست مثلا یک کنترلر دیگر به نام file درست کنید و کار این کنترلر فایل، دریافت نام تصویر و ارسال آن به صورت return File به مرورگر کاربر باشد.
      یا اینکه کلا از یک پوشه معمولی استفاده کنید.
      +
      ضمن اینکه کاراکتر ~ برای تگ معمولی img مفهومی ندارد و نباید از آن در پایان کار استفاده شود.
  • #
    ‫۱۲ سال و ۲ ماه قبل، چهارشنبه ۱۱ مرداد ۱۳۹۱، ساعت ۰۷:۰۷

    جناب نصیری من  بعد از اجرای خط

      return Content("<img src='" + filename + "' />");
    
    //filename =C:\Users\mta\Documents\Visual Studio 2010\Projects\IAUG\GIAU\Images\Actors.png

    یک ارور جاوا اسکریپتی دارم از این خط:
    e.match(/\{.*\}/)[0]
    که مقدارش نال هست.
    • #
      ‫۱۲ سال و ۲ ماه قبل، چهارشنبه ۱۱ مرداد ۱۳۹۱، ساعت ۱۲:۴۷
      filename یک مسیر نسبی است (نسبت به ریشه سایت) مثلا:
      GIAU/Images/Actors.png 
      یا مثلا (یک مسیر مطلق):
      http://mysite.com/GIAU/Images/Actors.png 
      • #
        ‫۱۲ سال و ۲ ماه قبل، پنجشنبه ۱۲ مرداد ۱۳۹۱، ساعت ۰۳:۵۹
        جناب نصیری من کدم رو اصلاح کردم .البته بازم همین مشکل رو دارم
          virtualpath = "Images/Main.jpg";
          return Content("<img src='" + virtualpath + "' />");
        ولی بازهم تو کتابخونه جاوا اسکریپت RedActor از همون خطی که گفتم ارور میگیره
        var c=e.match(/\{.*\}/)[0];
        
        //e=<IMG src="Images/Main.jpg">
        
        //e.match=null !


        • #
          ‫۱۲ سال و ۲ ماه قبل، پنجشنبه ۱۲ مرداد ۱۳۹۱، ساعت ۰۴:۲۰
          من این سطر e.match رو در سورس redactor (فایل redactor.js) پیدا نمی‌کنم. مطمئن هستید تداخلی در برنامه ندارید؟
          ضمنا این ویرایشگر با نگارش‌های نهایی مرورگرها سازگاری خوبی دارد.

          • #
            ‫۱۲ سال و ۲ ماه قبل، پنجشنبه ۱۲ مرداد ۱۳۹۱، ساعت ۰۴:۴۵
            بله درست گفتید اسم فایلش اینه
            eval code[dynamic]
            • #
              ‫۱۲ سال و ۲ ماه قبل، پنجشنبه ۱۲ مرداد ۱۳۹۱، ساعت ۰۴:۴۸
              من از نسخه معمولی redactor استفاده می‌کنم.
              اگر نیازی به فشرده سازی آن بود از این روش استفاده کنید: (^)
  • #
    ‫۱۲ سال و ۲ ماه قبل، پنجشنبه ۱۲ مرداد ۱۳۹۱، ساعت ۱۴:۱۲
    یک نکته تکمیلی رو اینجا اضافه کنم.
    نحوه عملکرد RedActor در نگارش جدید آن با نگارش قبلی که من استفاده کردم، کاملا تفاوت کرده و قسمت‌هایی از مطلب فوق دیگر معتبر نیست.
    RedActor اینبار به خروجی json نیاز دارد. برای مثال به فایل مثال image_upload.php آن دقت کنید. در نگارش جدید به این نوع خروجی نیاز دارد:
        // displaying file    
    $array = array(
    'filelink' => '/images/'.$filename
    );
    
    echo stripslashes(json_encode($array));   
    معادل آن در ASP.NET MVC به نحو زیر است:
    var array = new { filelink = "Images/k1.jpg" };
    return Json(array, System.Net.Mime.MediaTypeNames.Text.Plain, JsonRequestBehavior.AllowGet);
    
    یک anonymously typed object دلخواه را مطابق array مثال PHP آن درست کنید و به Json result به نحو فوق ارسال کنید.
    برای مابقی هم به همین ترتیب است. مثلا file_upload.php مثال آن اینبار به شکل زیر تعریف شده:
    $array = array(
    'filelink' => '/files/'.$_FILES['file']['name'],
    'filename' => $_FILES['file']['name']
    );
    
    echo stripslashes(json_encode($array));
    معادل ASP.NET MVC آن به نحو زیر است:
    var array = new { filelink = "files/myfile.zip", filename="myfile.zip" };
    return Json(array, System.Net.Mime.MediaTypeNames.Text.Plain, JsonRequestBehavior.AllowGet);
    

    • #
      ‫۱۲ سال و ۲ ماه قبل، پنجشنبه ۱۹ مرداد ۱۳۹۱، ساعت ۱۶:۲۹
      سلام
      لطفا این اصلاحات رو توی اصل متن اصلاح کنید
      چون همه کامنت‌ها را تا انتها نمی‌خونند! و حدود دو روز مثل من علاف بشوند!
  • #
    ‫۱۲ سال و ۱ ماه قبل، چهارشنبه ۱۵ شهریور ۱۳۹۱، ساعت ۲۰:۰۳
    سلام
    آقای نصیری من از ادیتور redactor در استفاده کردم، محتوای ادیتور رو در دیتابیس ذخیره می‌کنم اما برای نمایش دادنش مشکل دارم کل تگهای Html رو تو خروجی نشون میده.
    در asp.net از literal برای نمایش محتویات ادیتور استفاده می‌کردیم ولی در MVC لیترال وجود نداره و نمیدونم چطوری محتوای ادیتور رو نمایش بدم ممنون میشم اگه جواب بدین.
    با تشکر
      • #
        ‫۱۲ سال و ۱ ماه قبل، پنجشنبه ۱۶ شهریور ۱۳۹۱، ساعت ۱۹:۳۱
        آقای نصیری من برای ذخیره یه متن با redactor به مشکل خوردم. Error ای به صورت زیر میدهد: 
        System.Web.HttpRequestValidationException: A potentially dangerous Request.Form value was detected from the client (Body="<p>aaaaaaa...").  
        • #
          ‫۱۲ سال و ۱ ماه قبل، پنجشنبه ۱۶ شهریور ۱۳۹۱، ساعت ۲۱:۴۴
          مراجعه کنید به قسمت 17 سری MVC سایت؛ قسمت «بررسی اعتبار درخواست (Request Validation) در ASP.NET MVC».
  • #
    ‫۱۲ سال و ۱ ماه قبل، سه‌شنبه ۲۱ شهریور ۱۳۹۱، ساعت ۲۰:۰۸
    در صورت امکان در مورد وضعیت لایسنس این ادیتور کمی توضیح بدید .
    بنده تصمیم دارم به دو صورت از این ادیتور استفاده کنم ، یکی در یک پروژه‌ی شخصی ، بار دیگر هم در یک پروژه‌ی رایگان و متن باز .
    وضعیت لایسنس در هریک از شرایط بالا به چه صورت است ؟
    • #
      ‫۱۲ سال و ۱ ماه قبل، سه‌شنبه ۲۱ شهریور ۱۳۹۱، ساعت ۲۰:۴۰
      مطابق توضیحات این صفحه ، اگر نیاز به پشتیبانی خاصی از تیم مربوطه داشته باشید، نیاز است هزینه کرده و مثلا در ایمیل خودتون Paypal transaction number را نیز ارسال کنید تا به شما پاسخ دهند.
      • #
        ‫۱۱ سال و ۹ ماه قبل، چهارشنبه ۲۰ دی ۱۳۹۱، ساعت ۱۶:۱۷
        به نظر من دیگه نسخه رایگان این ادیتور وجود نداره! اگه امکانش هست میشه نسخه ای که شما دارید و رایگانه برای دانلود بذارید؟
  • #
    ‫۱۲ سال و ۱ ماه قبل، دوشنبه ۲۷ شهریور ۱۳۹۱، ساعت ۱۸:۲۸
    لطفا در مورد دکمه‌ی ارسال کد کمی توضیح بدید .
    آیا از پلاگین خاصی باید استفاده کنیم یا باید بصورت دستی این امکان رو اضافه کنیم؟
    • #
      ‫۱۲ سال و ۱ ماه قبل، دوشنبه ۲۷ شهریور ۱۳۹۱، ساعت ۱۸:۳۶
      نیاز هست افزونه نویسی کنید. استاندارد نیست.
  • #
    ‫۱۱ سال و ۸ ماه قبل، پنجشنبه ۱۲ بهمن ۱۳۹۱، ساعت ۰۲:۵۹
    با سلام
     زمانی که از این ادیتور استفاده می‌کنیم آیا  کاربر می‌تواند فونت را تغییر دهد؟ ممنونم
    • #
      ‫۱۱ سال و ۸ ماه قبل، پنجشنبه ۱۲ بهمن ۱۳۹۱، ساعت ۰۳:۱۲
      خیر. احتمالا به این علت که آنچنان مرسوم نیست از چندین قلم در وب استفاده شود، منهای CSS اصلی سایت و تعریف قلم‌های اصلی برای هدرها و امثال آن. به علاوه قلم متن نمایش داده شده در صفحات باید تابع CSS سایت باشد نه ادیتور آن.
      ولی در کل می‌تونید براش افزونه بنویسید تا اینکار را انجام دهد.
      • #
        ‫۱۱ سال و ۸ ماه قبل، پنجشنبه ۱۲ بهمن ۱۳۹۱، ساعت ۰۳:۲۲
        من هر کاری کردم که فونت پیشفرض اون رو تغییر دهم نتونستم این کار رو انجام بدم حتی تمام property‌های مربوط به فونت رو از فایل Css حذف کردم ولی باز فونت خودش رو می‌گیره فکر کردم که شاید این کار امکان پذیر نباشد ولی شما این کار رو کردید . امکانش هست بفرمایید چگونه فونت پیشفرض این ادیتور رو تغییر دادید. ممنونم.
        • #
          ‫۱۱ سال و ۸ ماه قبل، پنجشنبه ۱۲ بهمن ۱۳۹۱، ساعت ۰۳:۳۶
          من چیزی رو از فایل css آن حذف نکردم. فقط یک tahoma به اول تعاریف فونت‌های آن اضافه کردم.
          به علاوه باید دقت داشت که تمام این ادیتورها در یک iframe بارگذاری می‌شوند. یعنی در حین نمایش، body آن‌ها تابع css خودشون است و نه css سایت. به همین جهت نیاز به کمی تغییر دارند:
          body{
          font-family:Tahoma,sans-serif;
          font-size:9pt;
          margin:0;padding:0;
          overflow-x:hidden;
          background:#fff;
          direction:rtl
          }
  • #
    ‫۱۱ سال و ۷ ماه قبل، یکشنبه ۲۰ اسفند ۱۳۹۱، ساعت ۲۲:۳۰
    ببخشید آقای نصیری این نسخه ای که شما گذاشتید (این فایل zip ) آیا خروجی json میخاد یا خروجی باید مثل مثال بالا باشه؟ 
    • #
      ‫۱۱ سال و ۷ ماه قبل، یکشنبه ۲۰ اسفند ۱۳۹۱، ساعت ۲۲:۳۹
      روش تشخیص رو اینجا توضیح دادم. نیاز به json داره.
      • #
        ‫۱۱ سال و ۷ ماه قبل، یکشنبه ۲۰ اسفند ۱۳۹۱، ساعت ۲۳:۲۳
        با عرض پوزش من در یک برنامه asp.net web form دارم از این ادیتور استفاده میکنم و نتونستم معادل دستورات زیر در asp.net رو بفهمم .
        var array = new { filelink = "files/myfile.zip", filename="myfile.zip" };
        return Json(array, System.Net.Mime.MediaTypeNames.Text.Plain, JsonRequestBehavior.AllowGet);
        چیزی که خودم حدس زدم یک خروجی شبیه زیر بود :) اما مثل اینکه درست نبود
        context.Response.Write("{'filelink'='" + filePath + "'}");
        لطفا برای هر دو مورد فایل و تصویر راهنمایی بفرمایید چه خروجی json مدنظر هست.


          • #
            ‫۱۱ سال و ۷ ماه قبل، سه‌شنبه ۲۲ اسفند ۱۳۹۱، ساعت ۰۲:۱۶
            با تشکر فراوان از لطفتون. همچنین یک راهنمای جالب برای این سایت اینجاست. دوستانی که میخوان کمی تغییرات در این ادیتور بدن مثلا زبان فارسی اضافه کنن یا یک سری امکانات این چنینی حتما آدرس زیر رو ببین. چیز‌های جالبی داخلش هست.
            http://imperavi.com/redactor/docs/ 
            همچنین داخل این راهنما خروجی هم دقیقا آئرده شده که من بعد از سوال پیدا کردم. خروجی برای image باید به شکل زیر باشه
            { "filelink": "/images/img.jpg" }
            و برای فایل هم به شکل زیر باشه
            { "filelink": "/files/file.doc", "filename": "Filename" }
            چیزی که خیلی وقت من رو گرفت اون اسلش قبل نام فایل بود که نمیزاشتم و خروجی مد نظر رو بم نمیداد. دوستان این قضیه رو حتما مد نظر داشته باشن تا مثل من وقتشون زیاد گرفته نشه :)
            • #
              ‫۱۱ سال و ۷ ماه قبل، سه‌شنبه ۲۲ اسفند ۱۳۹۱، ساعت ۰۲:۲۹
              یک نکته: سعی نکنید این فرمت‌ها رو دستی درست کنید. علت این است که کلاس JavaScriptSerializer ذکر شده، زمانیکه var array ساخته شده رو دریافت می‌کنه،  یک سری از کاراکترها رو هم escape می‌کنه.
  • #
    ‫۱۱ سال و ۷ ماه قبل، سه‌شنبه ۲۲ اسفند ۱۳۹۱، ساعت ۱۶:۳۶
    آقای نصیری
    ظاهرا آخرین ورژن (redactor803) که شما گذاشتید با آخرین ورژن کنونی جیکوری (jquery-1.9.1.min.js ) سازگاری ندارد و با زدن روی دکمه image پنجره ای برای ارسال باز نمی‌شود ولی با jquery-1.8.1.min.js  تست کردم مشکلی نبود
    آیا راهی برای حل این مشکل وجود دارد؟
    • #
      ‫۱۱ سال و ۷ ماه قبل، سه‌شنبه ۲۲ اسفند ۱۳۹۱، ساعت ۱۶:۴۳
      - من دقیقا از آخرین نسخه رایگان این ادیتور استفاده می‌کنم. نیازی هم به نگارش‌های بعدی آن ندارم، چون نگارش مورد استفاده بدون مشکل کار می‌کند.
      - همچنین از jquery-1.8.3.min.js برای کار با این نسخه استفاده می‌کنم.
      - اگر نیاز به نگارش دیگری دارید بهتر است در انجمن تهیه کنندگان آن این مسایل رو مطرح کنید. البته ابتدا باید هزینه لایسنس نگارش‌های جدید آن‌را پرداخت کنید.
      - بسیاری از افزونه‌های jQuery، با نگارش‌های جدید بعد از 1.9 آن سازگار نیستند و فقط این یک مورد نیست. بهتر است عجله نکنید و حداقل 6 ماهی برای ارتقاء صبر کنید.
      - پروژه‌ای وجود دارد به نام
      jQuery Migrate برای پوشش مواردی که از جی‌کوئری 1.9 به بعد حذف شدن. این مورد رو باید به پروژه اضافه کنید تا با افزونه‌های قدیمی بتونید کار کنید.
      • #
        ‫۱۱ سال و ۷ ماه قبل، سه‌شنبه ۲۲ اسفند ۱۳۹۱، ساعت ۱۷:۰۳
        سلام جناب آقای مهندس
        در لینکی که در اول پست گذاشته اید ، وقتی دکمه Get Redactor رو میزنیم ، هیچ نسخه free وجود ندارد!
        3 تا گزینه buy a licence وجود دارد و یک گزینه trial version
        ممنون میشم اگر لینک مستقیم نسخه رایگان رو بگذارید
        با سپاس
  • #
    ‫۱۱ سال و ۵ ماه قبل، چهارشنبه ۱۸ اردیبهشت ۱۳۹۲، ساعت ۰۲:۲۴
    با سلام.
    من خاصیتی از ویومدل را بصورت زیر تعریف کردم:
    [Required(ErrorMessageResourceType = typeof(ValidationErrorsResource),
                ErrorMessageResourceName = ResourceKeys.ValidationErrorsResource.RequiredField)]
            [MaxLength]
            [DisplayName("متن")]
            [AllowHtml]
            public string FullDescription { get; set; }
    در ویو هم بصورت زیر:
    <div>متن: </div>
                    <div>@Html.TextAreaFor(p => p.FullDescription)</div>
                    <div>@Html.ValidationMessageFor(p => p.FullDescription)</div>
    
    $('#FullDescription').redactor({
                autoformat: false,
                convertDivs: false
            });
    ولی وقتی کاربر حتی چیزی وارد نمیکند در دیتابیس مقدار  "<p><br></p> " ذخیره می‌شود و همین باعث میشود Required کار نکند و پیغامی به کاربر نمایش نمی‌دهد.
    ایراد کارم از کجاست؟ باتشکر.
    • #
      ‫۱۱ سال و ۵ ماه قبل، چهارشنبه ۱۸ اردیبهشت ۱۳۹۲، ساعت ۰۳:۱۴
      اینطور نیست. مقداری که عنوان کردید به معنای new line وارد شده است که در مرورگرهای مختلف مقدار بومی آن متفاوت است.
  • #
    ‫۱۱ سال و ۵ ماه قبل، چهارشنبه ۱۸ اردیبهشت ۱۳۹۲، ساعت ۱۰:۳۳
    با سلام
    من پوشه ای بنام upload درست کردم و کد مربوط به کنترل من هم بصورت زیر است:
    [HttpPost]
            [AllowUploadImagesOnly(".jpg,.gif,.png")]
            public virtual ActionResult ImageUpload(HttpPostedFileBase file)
            {
                 var newFileName = Server.MapPath(Path.Combine(Links.SiteContents.Upload.Url(), file.FileName));
                file.SaveAs(newFileName);
                var array = new { filelink = newFileName };
                return Json(array, MediaTypeNames.Text.Plain, JsonRequestBehavior.AllowGet);
            }
    فایل به درستی درون پوشه آپلود قرار میگیرد ولی درون ادیتور نمایش داده نمی‌شود. علت چیست؟
    خطایی هم دریافت نمیکنم.
    باتشکر.
    • #
      ‫۱۱ سال و ۵ ماه قبل، چهارشنبه ۱۸ اردیبهشت ۱۳۹۲، ساعت ۱۳:۲۴
      علت این است که نباید مستقیما newFileName را بازگشت دهید. newFileName در اینجا چیزی است مثل c:\path\folder\site\images\img01.png. یعنی مسیر مطلق است که باید تبدیل به مسیر نسبی images\img01.png شود برای استفاده در src تگ img.
  • #
    ‫۱۱ سال و ۵ ماه قبل، چهارشنبه ۱۸ اردیبهشت ۱۳۹۲، ساعت ۱۶:۴۰
    اگر نخواهیم از نسخه‌های قدیمی‌تر (که رایگان بودند) استفاده کنیم و همیشه به روز باشیم باید دست به دامان نسخه‌های کرک یا نسخه‌هایی شویم که از این طرف و اون طرف به صورت غیر قانونی برای دانلود گذاشته می‌شوند.

    اگر این موضوع درست باشد پس نمی‌توان از RedActor به صورت به روز و بی‌دردسر استفاده کرد. در نتیجه شاید بهتر باشد از رقبای رایگان مثل CKEditor استفاده شود.
    • #
      ‫۱۱ سال و ۵ ماه قبل، چهارشنبه ۱۸ اردیبهشت ۱۳۹۲، ساعت ۱۶:۵۲
      سایت جاری از این ادیتور (نگارش قدیمی آن) استفاده می‌کند و به شخصه مشکلی با کیفیت آن ندارم و پاسخگوی نیاز کاری ما است.
      • #
        ‫۱۱ سال و ۵ ماه قبل، چهارشنبه ۱۸ اردیبهشت ۱۳۹۲، ساعت ۱۷:۰۵
        آن طور که گفته می‌شود RedActor خیلی بهتر از CKEditor است. در همین سایت هم بدون مشکل در حال کار است. اما امکان به روز رسانی همیشگی باعث می‌شود خیال آدم از آینده راحت‌تر باشد. 
        • #
          ‫۱۱ سال و ۵ ماه قبل، چهارشنبه ۱۸ اردیبهشت ۱۳۹۲، ساعت ۱۷:۰۸
          - هر طور صلاح می‌دونید.
          - هدف از این بحث صرفا به اشتراک گذاشتن یک سری نکته بود که شاید هرجایی به این سادگی یافت نشود.
          • #
            ‫۱۱ سال و ۵ ماه قبل، چهارشنبه ۱۸ اردیبهشت ۱۳۹۲، ساعت ۱۷:۰۹
            بله. مطمئناً بحث مفیدی بوده است. علاوه بر من، خیلی‌های دیگر استفاده کرده‌اند.
  • #
    ‫۱۰ سال و ۱۰ ماه قبل، پنجشنبه ۱۴ آذر ۱۳۹۲، ساعت ۱۶:۰۴
    سلام آقای نصیری
    امکان داره توضیح بدید چگونه دکمه Code و به این ادیتور اضافه کنیم ؟!
    • #
      ‫۱۰ سال و ۱۰ ماه قبل، پنجشنبه ۱۴ آذر ۱۳۹۲، ساعت ۱۶:۳۰
      باید افزونه بنویسید. فایل paste_code.html آن در مسیر plugins:
      <label>
          Code:</label>
      <textarea id="redactor_insert_code_area" name="redactor_insert_code_area" style="height: 211px; width: 538px;" />
      <label>
          Language:</label>
      <select id="redactor_insert_code_lang">
          <option>CSharp</option>
          <option>VB</option>
          <option>JScript</option>
          <option>Sql</option>
          <option>XML</option>
          <option>CSS</option>
          <option>Java</option>
          <option>Delphi</option>
      </select>
      <br />
      <input type="button" name="insert" id="redactor_insert_btn" value="%RLANG.insert%" />
      و قسمت فعال سازی آن در فایل redactor.js ذیل setColorNone 
              showCodesPage: function () {
                  this.modalInit('Insert Code', this.opts.path + '/plugins/paste_code.html', 600, $.proxy(function () {
                      var sel = this.getSelection();
                      var currentCode = '';
      
                      this.opts.codeElement = false;
                      if ($.browser.msie) {
                          var parent = this.getParentNode();
                          if (parent.nodeName === 'PRE') {
                              this.opts.codeElement = parent;
                              currentCode = $(parent).text();
                          } else {
                              if (this.oldIE()) {
                                  currentCode = sel.text;
                              } else {
                                  currentCode = sel.toString();
                              }
                          }
                      } else {
                          if (sel && sel.anchorNode && sel.anchorNode.parentNode.tagName === 'PRE') {
                              this.opts.codeElement = sel.anchorNode.parentNode;
                              currentCode = $(sel.anchorNode.parentNode).text();
                          } else {
                              currentCode = sel.toString();
                          }
                      }
      
                      if (this.opts.codeElement) {
                          $("#redactor_insert_btn").val("Update");
                      }
      
                      if (currentCode) $('#redactor_insert_code_area').val(currentCode);
      
      
                      $('#redactor_insert_code_area').focus();
                      $('#redactor_insert_btn').click($.proxy(this.insertCodesPage, this));
      
                  }, this));
              },
              insertCodesPage: function () {
                  var lang = $("#redactor_insert_code_lang").val();
                  var code = $("#redactor_insert_code_area").val();
                  code = code.replace(/\s+$/, ""); //rtrim;
                  code = $('<span/>').text(code).html(); // encode    
      
                  this.$editor.focus();
      
                  var preBlock;
                  if (this.opts.codeElement) {
                      preBlock = $(this.getParentNode());
                  } else {
                      preBlock = $("<pre/>");
                  }
                  preBlock.replaceWith("");
      
                  var htmlCode = "<pre language='" + lang + "' name='code'>" + code + "</pre></div>";
                  var codeBlock = "<div align='left' dir='ltr'>" + htmlCode + "</div><br/>";
                  this.execCommand('inserthtml', codeBlock);
      
                  this.modalClose();
              },
      و بعد ثبت آن در فایل‌های public.js و default.js  ذیل دکمه justify 
          code:
      {
          title: 'Code',
          func: 'showCodesPage'
      },
      به css آن هم باید یک سطر ذیل را اضافه کنید:
      body .redactor_toolbar li a.redactor_btn_code span          { background: url(../img/code_red.png) no-repeat center; }

      • #
        ‫۱۰ سال و ۱۰ ماه قبل، پنجشنبه ۱۴ آذر ۱۳۹۲، ساعت ۲۲:۴۳
        در این خط :
            this.modalInit('Insert Code', this.opts.path + '/plugins/paste_code.html', 600, $.proxy(function () {
        مقدار
         this.opts.path
        برابر undefined هست و در نتیجه بعد از کلیک روی دکمه code فقط تب خالی نمایش داده می‌شه !
        و متاسفانه از این مرحله بیشتر نتونستم پیش برم ...
        • #
          ‫۱۰ سال و ۱۰ ماه قبل، پنجشنبه ۱۴ آذر ۱۳۹۲، ساعت ۲۳:۳۰
          ممکنه. چون نگارش‌های مختلفی ازش وجود داره و من از آخرین نگارش آن استفاده نمی‌کنم. برای مثال در نگارش‌های جدیدتر دنبال modal_table بگردید تا نحوه تعریف صفحه نمایش اطلاعات را به صورت توکار در همان فایل js نهایی، مشاهده کنید. کدهای ارسال شده با مقداری تغییر در نگارش‌های بعدی قابل استفاده هستند.
          • #
            ‫۱۰ سال و ۱۰ ماه قبل، جمعه ۱۵ آذر ۱۳۹۲، ساعت ۰۵:۰۱
            همین الان کارم تموم شد و تونستم دکمه code و با نگارش جدید این ادیتور هماهنگ کنم و در راه حل مشکلم تقریبا یاد گرفتم چجوری باید برای این ادیتور افزونه بنویسم ... و این بدون کمک شما امکان پذیر نبود ...
            خیلی ممنونم ...
            • #
              ‫۱۰ سال و ۱۰ ماه قبل، جمعه ۱۵ آذر ۱۳۹۲، ساعت ۱۳:۵۳
              اگر دوست داشتید فایل نهایی خودتون رو پیوست کنید. ممنون.
            • #
              ‫۱۰ سال و ۷ ماه قبل، یکشنبه ۴ اسفند ۱۳۹۲، ساعت ۱۶:۲۶
              سلام میشه لطف کنید مراحل اضافه کردن دکمه‌ی کد رو بفرمایید. با اون روشی که آقای نصیری توضیح داده بودن من نتونستم انجامش بدم.
      • #
        ‫۱۰ سال و ۷ ماه قبل، پنجشنبه ۱ اسفند ۱۳۹۲، ساعت ۲۰:۲۰
        با سلام؛ فایل های public.js و   default.js   کجا قرار دارن؟ چون توی اون ورژنی که خودتون واسه دانلود گذاشتید و گفتید که از اون استفاده میکینید، من فقط فایل redactor.js رو پیدا کردم!
        • #
          ‫۱۰ سال و ۷ ماه قبل، پنجشنبه ۱ اسفند ۱۳۹۲، ساعت ۲۰:۲۳
          در نگارش جدیدتر آن این فایل‌ها با همان فایل اصلی ادغام و یکی شده‌اند.
          • #
            ‫۱۰ سال و ۷ ماه قبل، پنجشنبه ۱ اسفند ۱۳۹۲، ساعت ۲۰:۴۷
            ممنون از پاسختون
            من از ورژن v8.0.3 استفاده میکنم 
            میشه لطفاً بیشتر توضیح بدید که مثلاً چه جوری از فایل paste_code.html باید استفاده کرد یا اینکه  code:
            {
                title: 'Code',
                func: 'showCodesPage'
            },
            رو باید کجا اضافه کرد؟ تو سایت خودش واسه نوشتن پلاگین از یه روش دیگه استفاده کرده
  • #
    ‫۱۰ سال و ۹ ماه قبل، پنجشنبه ۲۸ آذر ۱۳۹۲، ساعت ۰۱:۵۷
    سلام؛ این آموزش را به صورت زیر انجام دادم. فایل آپلود میشه اما تو ادیتور نمایش داده نمیشه. اگه دوستان لطف کنند راهنمایی کنند ممنون میشم. در ضمن از نسخه ای که تو بخش نظرات  ارسال شده، استفاده کردم. با تشکر.
     
    کدها کنترلر
     public ActionResult FileUpload(HttpPostedFileBase file)
                {
                     
                    if (file.ContentLength > 0)
                    {
                      string   filePath = Path.Combine(HttpContext.Server.MapPath("../uploade/"), Path.GetFileName(file.FileName));
                        file.SaveAs(filePath);
                    }
                  return Content("<img src='/uploade/" + file.FileName + "' />");
                }
    • #
      ‫۱۰ سال و ۹ ماه قبل، پنجشنبه ۲۸ آذر ۱۳۹۲، ساعت ۰۲:۰۲
      - نسخه جدیدتر return Json دارد، بجای return Content. کمی بالاتر بحث شده.
      + مسیر نسبی هم باید برای تصاویر بازگشت داده شود.
    • #
      ‫۱۰ سال و ۶ ماه قبل، یکشنبه ۲۵ اسفند ۱۳۹۲، ساعت ۲۲:۲۳
      این کد من که نوشتمش و جواب گرفتم.
      [HttpPost]
      public ActionResult ImageUpload(HttpPostedFileBase file)
      {
         string path = "";
         var FileName = "";
         if (file.ContentLength > 0)
         {
           FileName = Path.GetFileName(file.FileName);
           string Extension = file.ContentType;
           string[] ExtensionList = { "image/jpg", "image/jpeg", "image/gif", "image/pmg" };
           if (ExtensionList.Contains(Extension.ToLower()))
           {
               path = Path.Combine(Server.MapPath("~/Images/uploads"), FileName);
               file.SaveAs(path);
           }
         }
      
         var array = new { filelink = @"Images\uploads\" + FileName };
         return Json(array, System.Net.Mime.MediaTypeNames.Text.Plain, JsonRequestBehavior.AllowGet);
      }
      امید وارم به کارت بیاد.  
  • #
    ‫۱۰ سال و ۷ ماه قبل، سه‌شنبه ۶ اسفند ۱۳۹۲، ساعت ۱۸:۰۷
    دوستان فرق linkFileUpload و fileUpload چیه و با کدوم دکمه فعال میشه؟
    • #
      ‫۱۰ سال و ۷ ماه قبل، سه‌شنبه ۶ اسفند ۱۳۹۲، ساعت ۲۰:۳۳
      دکمه insert link چند برگه‌ی مختلف دارد که یکی از آن‌ها مربوط به linkFileUpload است. fileUpload مستقلا دکمه‌ی سنجاق مانندی در نوار ابزار دارد.
  • #
    ‫۱۰ سال و ۷ ماه قبل، چهارشنبه ۱۴ اسفند ۱۳۹۲، ساعت ۱۹:۰۳
    چطوری میشه redactor رو readonly کرد؟ من readonly و disabled رو به TextArea اعمال کردم که جواب نداد.
    • #
      ‫۱۰ سال و ۷ ماه قبل، چهارشنبه ۱۴ اسفند ۱۳۹۲، ساعت ۱۹:۴۳
      برای نمایش فقط خواندنی یک متن HTML از Html.Raw استفاده کنید؛ مانند نمایش متن یک مقاله در یک سایت.
  • #
    ‫۱۰ سال و ۶ ماه قبل، سه‌شنبه ۲۷ اسفند ۱۳۹۲، ساعت ۰۱:۵۲
    با سلام ، من می‌خواستم قسمت ارسال فایل را همانند شما فعال کنم مطابق کدی که فرمودید تنظیمات رو انجام دادم ولی هنگام انتخاب عکس از قسمت زیر
    if (this.uploadOptions.success)
    {
    if (typeof d !== 'undefined')
    {
    // Remove bizarre <pre> tag wrappers around our json data:
    var rawString = d.body.innerHTML;
    var jsonString = rawString.match(/\{.*\}/)[0];
    this.uploadOptions.success(jsonString);
    }
    خط
    var jsonString = rawString.match(/\{.*\}/)[0];
    خطای زیر رو مگیره
    0x800a138f - JavaScript runtime error: Unable to get property '0' of undefined or null reference
    ممنون میشم راهنمایی کنید
  • #
    ‫۱۰ سال و ۶ ماه قبل، چهارشنبه ۲۸ اسفند ۱۳۹۲، ساعت ۰۲:۴۰
    با سلام؛ من یک ویو دارم که در آن از دوتا redactor استفاده کردم. در واقع سناریوی من به این شکل است. یکی از این redactor برای ورود خلاصه‌ی متن است و در زیر آن یک لینک ایجکسی وجود دارد که میره و یک partial را می‌یاره. توی partial اونredactor دومی قرار دارد و جالب وقتی که من یک فایلی را در red actor که در پارشال هست آپلود می‌کنم فایل آپلود می‌شود ولی هنگامی که در صفحه‌ی سایتم می‌خوام دانلود کنم Error زیر را می‌دهد.
    The resource you are looking for has been removed, had its name changed, or is temporarily unavailable.
    حالا باید چه کار کنم؟ ممنون
    • #
      ‫۱۰ سال و ۶ ماه قبل، چهارشنبه ۲۸ اسفند ۱۳۹۲، ساعت ۰۳:۰۶
      لینک تولید شده نهایی در اکشن متد را با لینک واقعی فایل بر روی سرور تطابق دهید.
  • #
    ‫۹ سال و ۹ ماه قبل، سه‌شنبه ۱۶ دی ۱۳۹۳، ساعت ۱۶:۰۴
    سلام 
    فرض کنید یه تعداد عکس را با این ویرایشگر آپلود کردیم ، بعد یه تعداد از عکس رو از درون ویرایشگر حذف کردیم، چون از درون ویرایشگر مسیر عکس‌ها حذف میشه خود عکس رو هاست باقی می‌مونه.
    سوال: چطوری میشه با حذف عکس از درون ویرایشگر خود عکس هم از روی هاست پاک بشه؟
    • #
      ‫۹ سال و ۹ ماه قبل، سه‌شنبه ۱۶ دی ۱۳۹۳، ساعت ۱۶:۰۸
      چنین قابلیتی را ندارد. برای این مورد از Froala WYSIWYG Editor  استفاده کنید (^).
  • #
    ‫۵ سال و ۷ ماه قبل، چهارشنبه ۲۴ بهمن ۱۳۹۷، ساعت ۰۵:۵۰
    css خاصی برای نمایش کدهای هر زبان وجود دارد؟ به همراه شماره خط