استفاده از TinyMCE در پروژه MVC

4/3/2016 MVC
2413

استفاده از TextEditor در پروژه های در قسمت مدیریت و یا ارسال کامنت کاربرد زیادی دارد از این رو تعداد زیادی ادیتور جهت استفاده در پروژه های MVC  طراحی گردیده است از مشهور ترین آنها میتوان CkEditor، ،Telerik , TinyMCe  نام برد ، 

به شخصه به دلیل اینکه تلریک استفاده ایرانیان را تحریم کرده است تا امروز که این مطلب را می نویسم امکان استفاده آسان آن وجود نداشته ،البته در سایت‌هایی ایرانی به سادگی میتوان آن را دانلود کرد ، استفاده از CKEditro  نیز بسیار آسان است اما پلاگینی مانند ارسال تصویر به سرور از روی کامپیوتر نیاز به استفاده از پلاگین های خارجی دارد و پلاگین های زیاد این ادیتور قدرتمند در صورتی که بخواهید خود شما انها را تغییر دهید کار اسانی نیست، 

حال من راغب شدم از ادیتور TinyMCE  استفاده کنم .

دانلود اخرین ورژن آن از سایت https://www.tinymce.com

اکسترکت کردن آن و اپلود در پوشه script  

اضافه کردن فایل js  به صفحه ای که نیاز داریم تا از TinyMCE  استفاده کنیم.

اضافه کردن فایلی به نام main.js  جهت اضافه کردن دستورات js  که خودمان نیاز به نوشتن داریم .

اضافه کردن این خط کد به فایل main.js

tinyMCE.init({
    selector: "textarea",
    language: 'fa',
    theme: "modern",
    directionality: "rtl",

    plugins: [
   "advlist autolink lists link image charmap print preview anchor codesample",
   "searchreplace visualblocks code fullscreen",
   "insertdatetime media table contextmenu paste jbimages imagetools"
    ],
    toolbar1: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
    toolbar2: "print preview media | forecolor backcolor emoticons | ltr rtl",
    toolbar2: "codesample",
    

    relative_urls: false,
    codesample_dialog_height: 200,

    //for image upload also add imagetools to end of plugin:[
    image_advtab: true,
    templates: [
        { title: 'Test template 1', content: 'Test 1' },
        { title: 'Test template 2', content: 'Test 2' }
    ],
    file_browser_callback: function (field_name, url, type, win) {
        if (type == 'image') $('#my_form input').click();
    }
    //End for emage upload
});

اگر هم بخواهیم از فارسی ساز آن استفاده کنیم باید فایل fa.js را در پوشه tinymce/lang  کپی کنیم

با استفاده از کد بالا هر txtarea که در ویوو وجود دارد را تبدیل به ادیتور TinyMCE و اگر بخواهیم برای تمام TeaxtArea  ها اجرا نشود باید ابتدا خط اول را حذف کرد و دوخط اخر را نیز اضافه کرد.

tinyMCE.init({
    language: 'fa',
    theme: "modern",
    directionality: "rtl",
    mode: "specific_textareas",
    editor_selector: "mceEditor"
});

و باید کلاس mceEditor را ابه textarea که میخواهید تبدیل به ادیتور شود اضافه کنید , والبته  selector: "textarea", را حذف کنید

  <div class="form-group">
            @Html.LabelFor(model => model.Summery, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.TextAreaFor(model => model.Summery, new { @class = "form-control mceEditor" })
                @Html.ValidationMessageFor(model => model.Summery, "", new { @class = "text-danger" })
            </div>
        </div>

برای راست به چپ شدن منو های بالای میتوان در مسیر  tinymce/skins/content.min.css فونت فارسی را اضاف کنید . البته شاید لازم باشد تعریف فونت را دوباره در بالای این فایل css  تعریف نمایید.

 برا یاینکه ارتفاع ادیتور به اندازه متن باشد میتوانید از plugins: "autoresize" استفاده کنید و همچنین در صورتی که بخواهید کمترین و بیشترین مقدار ارتفاع برای ادیتور tinyMce را نیز تعیین کنید به صورت زیر عمل کنید

tinyMCE.init({
   
    language: 'fa',
    theme: "modern",
    directionality: "rtl",
    mode: "specific_textareas",
    editor_selector: "mceEditor",
    plugins: "autoresize",
    autoresize_min_height:250,
    autoresize_max_height:550
});