مهرداد
4 سال پیش توسط مهرداد مطرح شد
4 پاسخ

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

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


ثبت پرسش جدید
مجتبی
@mhk2004mhk 4 سال پیش آپدیت شد
0

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

$( 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 4 سال پیش مطرح شد
0

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

<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 4 سال پیش مطرح شد
0

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


رضا شونم
تخصص : طراح سایت و سئو کار
@rosi 4 سال پیش آپدیت شد
0

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

اموزش نصب داره :
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',
        ],

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


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

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