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

اضافه کردن تگ img به ckeditor - شخصی سازی سیستم آپلود عکس

@mohsenbostan @ali.bayat @MehdiAghighi @hesammousavi @mhyeganeh @milad @endworld و سایر دوستان ...

سلام دوستان من برای انجام آپلود عکس در ادیتور ckeditor. تصمیم گرفتم به صورت شخصی سازی عمل کنم. و در ادامه توضیح میدم که تا الان چکار کردم و با چه مشکلی رو به رو هستم.
البته یه نکته هم هست که باید بگم من اصلا نمیخوام از فایل منیجر استفاده کنم چون که قراره محتوا توسط کاربران اراِئه و تولید بشه .
و در واقع نیاز هست ، کاربر به آسانی بتواند عکس آپلود کند .
در مرحله اول سعی کردم که دکمه انتخاب عکس رو انتخاب کرده و onclick آنرا تغییر بدم . وقتی بگم onclick آن ، یک تابع هست که خودم نوشتم ، راحت میتوان با اون تابع ، هر کاری کنم.
لذا وقتی اینترفیس ck آماده شده ، صفت noclick ، المان انتخاب عکس رو تغییر دادم .
در ckeditor ، المانی که مربوط به انتخاب عکس میشه ، ایدی cke77 رو داره .


CKEDITOR.on("instanceReady", function(event)
        {
            $('#cke_77').attr('onclick','myFunc(this)');
        });

در فانکشن ، یک اینپوت فایل که مخفی هم هست ، ساختم و بلافاصله آنرا کلیک میکنم تا کاربر عکس مورد نظر را انتخاب کند :

  function myFunc(e){
            console.log(e);
            var file =
                "<input type='file' name='file' id='file0' hidden >";
            $('#cke_77').after(file);
            $("#file0").trigger('click');
        }

سپس فایل را که کاربر انتخاب کرده را در server خودم آپلود کردم و url آنرا برگردادنم که بتوانم در ادیتور نمایش بدم:


$('#file0').change(function (){
                var url  = sendFile($('#file0')[0].files[0]);
            });

الان url عکس آپلود شده رو دارم ، و الان مشکل من نمایش آن در خود ادیتور هست .
ظاهرا ادیتور از iframe استفاده میکند .
در واقع من body داخل این iframe رو انتخاب کردم و یک تگ img با src مشخص ، به آن append میکنم .
اما متاسفانه این تگ img به صورت متن قرار میگیرد نه یک المان . :

var img = `<img src='${url}' alt='alt' >`;
                $("body[class='cke_editable']").append(img);

ممنون میشم اگر دوستان کلا در مورد این داستان نظر یا پیشنهادی دارن ، انتقال بدن . به امید خدا اگر موفق بشم ، شخصی سازی کنم ، سورس رو در اختیار دوستان قرار میدم تا براحتی بتوانند ، عکس یا فایل آپلود کنم.
البته یه نکته هم هست که باید بگم من اصلا نمیخوام از فایل منیجر استفاده کنم چون که قراره محتوا توسط کاربران اراِئه و تولید بشه .
و در واقع نیاز هست ، کاربر به آسانی بتواند عکس آپلود کند .


ثبت پرسش جدید
woz
تخصص : fan of open source world
@wozniak 4 سال پیش مطرح شد
1

@Saeeed
متن داخل ckdetor رو بگیرید ، img رو به انتها اضافه کرده ، دوباره متن ckeditor رو آپدیت کنید. در هرکدام از این مراحل باید از توابع ارائه شده در document ckeditor استفاده کنید


سعید
تخصص : برنامه نویس وب
@Saeeed 4 سال پیش مطرح شد
0

@behzadd
من خیلی گشتم ، ندیدم 😥
اگر رفرنس بدید خیلی ممنون میشم


سعید
تخصص : برنامه نویس وب
@Saeeed 4 سال پیش مطرح شد
0

بعد از append کردن به صورت زیر در میاد :
توضیح تصویر رو وارد کنید


woz
تخصص : fan of open source world
@wozniak 4 سال پیش آپدیت شد
1

@Saeeed
سرچ کنید و فانکشن های setData , getData رو بسته به ورژن ckeditor در بیارید و مراحل رو به صورت زیر برید :

<script>
    var data = CKEDITOR.instances.editor1.getData();
</script>

وبعد با استفاده از تابعی شبیه زیر دیتا جدید رو بعد از اضافه کردن به آخر text داخل ادیتور ، اونو داخل ckeditor ست کنید. تکست داخل ادیتور رو مانند یک استرینگ ساده جمع بزنید با اون img که میخواید .

CKEDITOR.instances.editor1.editable().setHtml( '<p>FooBar</p>' );

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

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