راکت

آپلود عکس در ادیتور tinymce

4 پاسخ

سلام دوستان کسی تا حالا تجربه اپلود عکس در ادیتور tinymce رو داره؟ اگ کسی اه حلشو میدونه ممنون میشم بهم کمک کنه

ثبت پرسش جدید

پاسخ‌ها

4
مجتبی
مجتبی
@mhk2004mhk

من انجام دادم. اینم کدی استفاده کردم. فکر کنم همه چی واضح هست

$( document ).ready(function() {
            tinymce.init({
                selector: '#editor',
                menubar:false,
                statusbar: false,
                toolbar: "bullist numlist | alignright aligncenter alignleft alignjustify | bold italic underline | undo redo | fullscreen | link | media image ",
                plugins: "directionality advlist lists image media fullscreen wordcount link paste",
                content_css : '/template/css/app.css',
                language : 'fa',  // site absolute URL
                language_url : '{{ env('APP_URL') }}/template/js/tinymce/langs/fa.js',  // site absolute URL
                image_caption: true,
                relative_urls : false,
                remove_script_host : false,
                convert_urls : true,
                image_prepend_url: "{{ env('APP_URL') }}/files/images/events/",

                images_upload_handler: function (blobInfo, success, failure) {
                    var xhr, formData;
                    xhr = new XMLHttpRequest();
                    xhr.withCredentials = false;
                    xhr.open('POST', '{{ route('guide.ajax.upload.image.tinymce', $type = 'event') }}');
                    var token = '{{ csrf_token() }}';
                    xhr.setRequestHeader("X-CSRF-Token", token);
                    xhr.onload = function() {
                        var json;
                        if (xhr.status != 200) {
                            failure('HTTP Error: ' + xhr.status);
                            return;
                        }
                        json = JSON.parse(xhr.responseText);

                        if (!json || typeof json.location != 'string') {
                            failure('Invalid JSON: ' + xhr.responseText);
                            return;
                        }
                        success(json.location);
                    };
                    formData = new FormData();
                    formData.append('file', blobInfo.blob(), blobInfo.filename());
                    xhr.send(formData);
                }
            });
        });
مهرداد
مهرداد
@mehrdadroshanraee69

اقا مجتبی ممنون بابت پاسخت یه سوال من اینو از نت پیدا کردم اوکی شد

<script>
    tinymce.init({
    selector: 'textarea',
    language : 'fa',
    paste_data_images: true,
    height:400,
    plugins: 'preview link image  code table emoticons textcolor numberlist codesample lists media lists advlist directionality',
    toolbar: 'undo redo | styleselect | bold italic Underline| alignleft aligncenter alignright alignjustify numlist bullist| outdent indent forecolor backcolor ltr rtl| link image media table| copy cut paste | preview | list |emoticons codesample|',
        image_title: true,
        automatic_uploads: true,
        images_upload_url: '{{route('upload.tiny')}}',
        file_picker_types: 'image',
        file_picker_callback: function(cb, value, meta) {
            var input = document.createElement('input');
            input.setAttribute('type', 'file');
            input.setAttribute('accept', 'image/*');
            input.onchange = function() {
                var file = this.files[0];

                var reader = new FileReader();
                reader.readAsDataURL(file);
                reader.onload = function () {
                    var id = 'blobid' + (new Date()).getTime();
                    var blobCache =  tinymce.activeEditor.editorUpload.blobCache;
                    var base64 = reader.result.split(',')[1];
                    var blobInfo = blobCache.create(id, file, base64);
                    blobCache.add(blobInfo);
                    cb(blobInfo.blobUri(), { title: file.name });
                };
            };
            input.click();
        }
  });

</script>

فقط یه مشکلی هست عکس رو میفرسته کدوم پوشه این ادیتور چون من عملیات اپلود عکس رو دادم به مسیر پوش مد نظر خودم ولی نگاه کردم نفرستاده اینجا

    Route::post('upload/images' , 'TinyController@upload')->name('upload.tiny');
class TinyController extends Controller
{
    public function upload(Request $request)
    {
        if($request->hasFile('image')) {
            if($request->hasFile('image')){
                $imagePath = $request->file('image');
                $imageName = $imagePath->getClientOriginalName();
                $dir = 'articles/tiny';
                $path = $imagePath->storeAs($dir , $imageName , 'public');

                return response()->json_encode($path);
            }

        }

    }

}

شاید پاسخ شما همین‌جا باشد

mha
mha
@mha

سلام آقا مهرداد
منم سوالم همینه که کجا عکس رو آپلود میکنه؟

رضا شونم
رضا شونم
@rosi

تخصص: طراح سایت و سئو کار

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

اموزش نصب داره :
https://unisharp.github.io/laravel-filemanager/installation
اینم اموزش اد کردن فایل منیجر به ادیتور های TinyMCE5 و CKEditor و Summernote و JavaScript

نکته حتما بعد نصب روت گروه اضافه شود :

 Route::group(['prefix' => 'laravel-filemanager', 'middleware' => ['web', 'auth']], function () {
     \UniSharp\LaravelFilemanager\Lfm::routes();
 });

و : Edit APPURL in .env.

یا درایور :

        'public' => [
            'driver' => 'local',
            'root' => base_path('public'),
            'url' => env('http://127.0.0.1:8000'),
            'visibility' => 'public',
        ],

در صورت مشکل میتوانید ایمیل بزنید یا تماس بگیرید ( شخصی پیام بدید میفرستم )

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام