دسته بندی ها

16:54 1399/06/08

نحوه آپلود عکس در CkEditor در چند مسیر مختلف

سلام دوستان در پروژه خودم از پلاگین CkEditor برای نوشتن و تایپ متن استفاده کردم.

برای این کار ابتدا این پلاگین رو از سایتش دانلود کردم و در روت پروژه خودم فایلهاش رو کپی کردم. قابلیت آپلود عکس و نمایش تصویر رو هم برای ادیتور فعال کردم.

تنظیمات فایل config.js در ادیتور CkEditor

CKEDITOR.editorConfig = function (config) {
    config.language = 'fa';
    config.codeSnippet_theme = 'atelier-seaside.light';
    CKEDITOR.config.allowedContent = true;
    config.filebrowserImageUploadUrl = '/file-upload';
    config.extraPlugins = 'codesnippet';
    

	config.toolbarGroups = [
		{ name: 'clipboard',   groups: [ 'clipboard', 'undo' ] },
		{ name: 'editing',     groups: [ 'find', 'selection', 'spellchecker' ] },
		{ name: 'links' },
		{ name: 'insert' },
		{ name: 'forms' },
		{ name: 'tools' },
		{ name: 'document',	   groups: [ 'mode', 'document', 'doctools' ] },
		{ name: 'others' },
		'/',
		{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
		{ name: 'paragraph',   groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },
		{ name: 'styles' },
		{ name: 'colors' },
        { name: 'about' }
	];

	// Remove some buttons provided by the standard plugins, which are
	// not needed in the Standard(s) toolbar.
	config.removeButtons = 'Underline,Subscript,Superscript';

	// Set the most common block elements.
	config.format_tags = 'p;h1;h2;h3;pre';

	// Simplify the dialog windows.
	config.removeDialogTabs = 'image:advanced;link:advanced';
};

خب همونطوری که در کدها مشاهده می فرمایید برای آپلود تصویر و نمایش تصویر در بین متن کانفیگ زیر انجام شده :

config.filebrowserImageUploadUrl = '/file-upload';

در کنترلر Home هم دقیقا چنین مسیری رو به وجود آوردم تا وقتی میخوام عکسی رو بین متن قرار بدم اون عکس در مسیر دلخواه بره و آپلود بشه :

کنترلر Home

[HttpPost]
[Route("file-upload")]
public IActionResult UploadImageCourse(IFormFile upload)
{
      //دستورات آپلود تصویر
      //در اینجا مسیر ذخیره عکس در سرور هم تعیین می شود
}

در ویو هم برای استفاده از CkEditor کدهای زیر رو نوشتم:

        <div class="form-group col-xs-12">

            <script src="~/ckeditor/ckeditor.js"></script>
            <label asp-for="Content">
                متن 
            </label>
            <div>
                <textarea asp-for="CourseContent"> توضیحات خود را کامل بنویسید ...</textarea>
            </div>

            <script>
                CKEDITOR.replace('CourseContent');
            </script>

        </div>

خب تا اینجای کار ادیتور به خوبی کار میکنه و مشکلی هم نداره. اما در بخشی دیگه از پروژه می خوام مجددا از CkEditor استفاده کنم. در اینجا می خوام تصاویری که در سرور ذخیره میشن در یک مسیر دیگه برن و ذخیره بشن.

حالا سوال این هست نحوه آپلود عکس در CkEditor در چند مسیر مختلف به چه صورتی هست؟ یعنی چجوری میتونم برای هر CkEditor یک مسیر دیگه بدم برای آپلود تصویر؟

مشخصات سوال کننده :

کاربر : fateme امتیاز کاربر : 1635 رتبه کاربر : 2

دسته بندی : CkEditor جی کوئری

نظر ویرایش گزارش نشان

به این سوال امتیاز بدهید 0

تعداد بازدید این سوال : 6139

هوش مصنوعی

پاسخ هوش مصنوعی

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

1. ابتدا باید برای هر ویرایشگری (CKEditor) یک ID منحصر به فرد تعریف کنید.

2. سپس می توانید متدهای مختلفی را در کنترلر خود برای آپلود تصاویر در مسیرهای متفاوت تعریف کنید.

3. در نهایت، هنگام تهیه هر CKEditor، مسیر آپلود مربوط به خود را مشخص کنید.

در زیر یک مثال نشان داده شده است:

کنترلر Home

[HttpPost]
[Route("file-upload-path1")]
public IActionResult UploadImagePath1(IFormFile upload)
{
      //دستورات آپلود تصویر برای اولین مسیر
}

[HttpPost]
[Route("file-upload-path2")]
public IActionResult UploadImagePath2(IFormFile upload)
{
      //دستورات آپلود تصویر برای دومین مسیر
}

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

ویو با دو CKEditor

        <div class="form-group col-xs-12">

            <script src="~/ckeditor/ckeditor.js"></script>
            <label asp-for="Content1">
                متن اول 
            </label>
            <div>
                <textarea asp-for="Content1"> توضیحات اول را بنویسید ...</textarea>
            </div>

            <script>
                CKEDITOR.replace('Content1', {
                    filebrowserImageUploadUrl: '/file-upload-path1'
                });
            </script>

        </div>

        <div class="form-group col-xs-12">

            <label asp-for="Content2">
                متن دوم 
            </label>
            <div>
                <textarea asp-for="Content2"> توضیحات دوم را بنویسید ...</textarea>
            </div>

            <script>
                CKEDITOR.replace('Content2', {
                    filebrowserImageUploadUrl: '/file-upload-path2'
                });
            </script>

        </div>

به این ترتیب، هر CKEditor به مسیر مخصوص به خود برای آپلود تصاویر متصل است و می توانید تصاویر را در مسیرهای مختلف ذخیره کنید.

به این پاسخ امتیاز بدهید 0

امتیاز: - رتبه: -

نظر ویرایش گزارش

پاسخ دهنده : saedbfd 17:10 1399/06/08

در فایل config.js که مربوط به تنظیمات و کانفیگ ادیتور شما هست شما میتونید مسیر ذخیره سازی تصاویری که در بین متن ها استفاده می کنید رو تعیین کنید که شما دستور زیر رو نوشتید :

config.filebrowserImageUploadUrl = '/file-upload';

خب حالا موقعی که عکسی رو آپلود می کنید و در بین متن های خودتون می خواید استفاده کنید دنبال یک مسیر با آدرس file-upload میره ادیتور و وقتی پیداش کرد توی اون مسیر عکس رو ذخیره میکنه. اما حالا اگر شما بیش از یک ادیتور رو توی پروژه خودتون استفاده کردید و می خواید هر کدوم از این ادیتور ها تصاویر رو در یک مسیر جداگانه ذخیره کنن کافیه برای هر ادیتور تابع زیر رو تغییر بدیم :

config.filebrowserImageUploadUrl = '/newpath';

خب به مثال زیر دقت کنید :

        <div class="form-group col-xs-12">

            <script src="~/ckeditor/ckeditor.js"></script>
            <label asp-for="Content">
                متن 
            </label>
            <div>
                <textarea asp-for="CourseContent"> توضیحات خود را کامل بنویسید ...</textarea>
            </div>

            <script>
                CKEDITOR.replace('CourseContent', {
                    filebrowserImageUploadUrl: '/file-upload_1'
                });
            </script>

        </div>

در کدهای بالا یک ادیتور رو ایجاد کردیم و در قسمت script گفتیم برای آپلود عکس برو دنبال مسیر file-upload_1 بگرد. در این حالت دیگه این ادیتور دنبال مسیر اولیه که در فایل config.js هست نمیره. خب حالا میتونید توی همون کنترلر Home یک اکشن دیگه ایجاد کنید و مسیر جدید رو بهش معرفی کنید :

[HttpPost]
[Route("file-upload_1")]
public IActionResult UploadImageCourse(IFormFile upload)
{
      //دستورات آپلود تصویر
      //در اینجا مسیر ذخیره عکس در سرور هم تعیین می شود
}

آپلود عکس در ckeditor

خب حالا وقتی عکسی رو انتخاب کنید و روی دکمه "به سرور بفرست" کلیک کنید عکس در مسیر جدید روی سرور ذخیره میشه.

دوره آموزش رایگان آپلود عکس در CkEditor

ویرایش شده در دوشنبه 1 دی 1399 ساعت 18:43:18

به این پاسخ امتیاز بدهید 0

امتیاز: 1664 رتبه: 1

نظر ویرایش گزارش

1 نظر

hosseinmohsen : سلام من می خوام تو کادر url ادیتور وقتی عکس انتخاب میشه آدرسش به همراه روت سایت یعنیhttp://...چه طور می تونم اضافه کنم من از kcfinder تو پوشه ckeditorاستفاده کردم

امتیاز کاربر : 0 رتبه کاربر : 7059 تاریخ ثبت : 05:28 1400/09/28

حذف

آخرین سوالات ثبت ‌شده

سوالات مرتبط

آموزش های پرطرفدار

برای ارسال پاسخ لطفا وارد حساب کاربری خود شوید. ورود

نحوه آپلود عکس در CkEditor در چند مسیر مختلف

پاسخ هوش مصنوعی

دوره آموزش رایگان آپلود عکس در CkEditor

آموزش ساخت اتوماسیون اداری تحت وب

آموزش ساخت سیستم فروش و انبارداری وب

آموزش ساخت سیستم حقوق و دستمزد وب با سینکفیوژن

آموزش ساخت سیستم آزمونگیر آنلاین