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

دانلود اخرین ورژن آن از سایت 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
});