نحوه آپلود عکس در 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 یک مسیر دیگه بدم برای آپلود تصویر؟
در فایل 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
- آموزش استفاده از SignalR در Asp.net Core با مثال عملی
- ادغام چند گزارش استیمول سافت بصورت پی دی اف در یک فایل
- نحوه تغییر استایل کامپوننت select2 چگونه است ؟
- چگونه امنیت پروژه را در Asp.net Core افزایش دهیم ؟
- ارسال پارامتر در دستور window.open جی کویری
- ارسال پارامتر از طریق جاوااسکریپت با کلیک روی تگ a
- خطای 500 زمان اجرا شدن پروژه روی هاست
- کویری نویسی در استیمول سافت جهت فیلتر اطلاعات
- نمایش صفحه در پنجره جدید با کلیک روی لینک (تگ a) در Asp
- افزودن مقادیر به صورت دستی به List دریافت شده از ریپازیتوری
- حذف فایلها و دستورات Css و JavaScript اضافی
- دلیل خطای Identifier 'X' has already been declared در جی کویری چیست ؟
- نمایش پیغام گرافیکی با جی کویری
- تفاوت Class Component و Functional Component در React.js چیست ؟
- مقایسه مقدار اینپوت باکس با type آن در جی کویری
- دریافت کمترین و بیشترین مقدار با پلاگین ui-jquery
- وارد کردن فقط حروف انگلیسی در تکست باکس در html
- وارد کردن شکل صحیح ایمیل و شماره تماس با جی کویری
- خطای Unrecognized leading byte sequence در CkEditor
- ارسال اطلاعات با استفاده از ایجکس به همراه پارامتر