ویرایشگر متن - WYSIWYG

ویرایشگر متن - WYSIWYG

TinyMCE editor

گاهی اوقات داخل پروژه ها لازم میشه که بخشی از وبسایت رو خود مدیر سایت تغییر بده.

برای همین از ویرایشگر WYSIWYG که مخفف What You See Is What You Get هست، استفاده میکنیم.

برای لاراول من ترجیح میدم از کتابخونه TinyMCE editor استفاده کنم.

هم امکاناتش خوبه و هم نصبش آسونه.

برای شروع نصب قدم های زیر رو طی میکنیم.

اول از همه باید یک input از نوع textarea داشته باشید. برای مثال کلاس رو my-editor نامگذاری میکنیم.

بعد کد زیر رو داخل همون View کپی کنید :  

<script src="//cdn.tinymce.com/4/tinymce.min.js"></script>
<textarea name="content" class="form-control my-editor">{!! old('content', $content) !!}</textarea>
<script>
  var editor_config = {
    path_absolute : "/",
    selector: "textarea.my-editor",
    plugins: [
      "advlist autolink lists link image charmap print preview hr anchor pagebreak",
      "searchreplace wordcount visualblocks visualchars code fullscreen",
      "insertdatetime media nonbreaking save table contextmenu directionality",
      "emoticons template paste textcolor colorpicker textpattern"
    ],
    toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image media",
    relative_urls: false,
    file_browser_callback : function(field_name, url, type, win) {
      var x = window.innerWidth || document.documentElement.clientWidth || document.getElementsByTagName('body')[0].clientWidth;
      var y = window.innerHeight|| document.documentElement.clientHeight|| document.getElementsByTagName('body')[0].clientHeight;

      var cmsURL = editor_config.path_absolute + 'laravel-filemanager?field_name=' + field_name;
      if (type == 'image') {
        cmsURL = cmsURL + "&type=Images";
      } else {
        cmsURL = cmsURL + "&type=Files";
      }

      tinyMCE.activeEditor.windowManager.open({
        file : cmsURL,
        title : 'Filemanager',
        width : x * 0.8,
        height : y * 0.8,
        resizable : "yes",
        close_previous : "no"
      });
    }
  };

  tinymce.init(editor_config);
</script>

الان شما این ویرایشگر رو نصب کردین. فقط، برای فعال کردن بخش آپلودش عکس و فیلم، باید مراحل زیر رو طی کنید.

اول فایل منیجر لاراول رو نصب کنیم:

composer require unisharp/laravel-filemanager:~1.8

اگه از لاراول بالای 5.5 استفاده می کنید، بیخیال قدم بعدی شید!

کد زیر رو داخل config/app.php به لیست Provider ها اضافه کنید :

Unisharp\Laravelfilemanager\LaravelFilemanagerServiceProvider::class,
Intervention\Image\ImageServiceProvider::class,

الان باید Alias رو تنظیم کنید :

'Image' => Intervention\Image\Facades\Image::class,

بعد لازمه که چند تا فایل تنظیمات رو از داخل لاراول بکشید بیرون :

php artisan vendor:publish --tag=lfm_config
php artisan vendor:publish --tag=lfm_public

اگه لازم باشه که بعضی از تنظیمات فایل منیجر رو دستی تغییر بدین، می تونید از آدرس config/lfm.php بهشون دسترسی داشته باشید.

 

یه نکته رو هم بگم خدمتتون!

احتمال داره که در جاهای مختلفی از سایت نیاز به استفاده از این ویرایشگر باشه و کپی کردن این حجم از کد برای هر View کار درستی نیست!

بخاطر همین توصیه میکنم یک View با آدرس utils/editor.blade.php بسازید و کد زیر رو داخلش قرار بدین:

@push('scripts')
<script src="//cdn.tinymce.com/4/tinymce.min.js"></script>
<script>
  var editor_config = {
    path_absolute : "/",
    selector: "{{$name}}",
    directionality : 'rtl',
    plugins: [
      "advlist autolink lists link image charmap print preview hr anchor pagebreak",
      "searchreplace wordcount visualblocks visualchars code fullscreen codesample",
      "insertdatetime media nonbreaking save table contextmenu directionality",
      "emoticons template paste textcolor colorpicker textpattern"
    ],
    toolbar: "insertfile undo redo | styleselect | bold italic | codesample | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image media",
    relative_urls: false,
    file_browser_callback : function(field_name, url, type, win) {
      var x = window.innerWidth || document.documentElement.clientWidth || document.getElementsByTagName('body')[0].clientWidth;
      var y = window.innerHeight|| document.documentElement.clientHeight|| document.getElementsByTagName('body')[0].clientHeight;

      var cmsURL = editor_config.path_absolute + 'laravel-filemanager?field_name=' + field_name;
      if (type == 'image') {
        cmsURL = cmsURL + "&type=Images";
      } else {
        cmsURL = cmsURL + "&type=Files";
      }

      tinyMCE.activeEditor.windowManager.open({
        file : cmsURL,
        title : 'Filemanager',
        width : x * 0.8,
        height : y * 0.8,
        resizable : "yes",
        close_previous : "no"
      });
    }
  };

  tinymce.init(editor_config);
</script>
@endpush

از این به بعد اگر به این ویرایشگر احتیاج داشته باشید، کافیه دستور زیر رو داخل View مورد نظرتون اضافه کنید :

@include("utils.editor" , ["name" => "textarea.editor"])

موفق باشید!

 

منبع : medium.com

تگ ها : php web laravel tip snippet tutorial wysiwyg library


نویسنده : سینا | 1399-01-29

نظرات

برای ارسال نظر باید حساب کاربری داشته باشی!

نظری ثبت نشده است.