سلام دوستان در پروژه خودم از پلاگین 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)
{
//دستورات آپلود تصویر
//در اینجا مسیر ذخیره عکس در سرور هم تعیین می شود
}
خب حالا وقتی عکسی رو انتخاب کنید و روی دکمه "به سرور بفرست" کلیک کنید عکس در مسیر جدید روی سرور ذخیره میشه.
تاریخ :
1403/08/18
- ساعت :
10:40:00 AM
- بازدید :
149
- پاسخ :
0
|
تاریخ :
1403/07/27
- ساعت :
03:21:00 PM
- بازدید :
238
- پاسخ :
1
|
تاریخ :
1403/05/20
- ساعت :
09:18:00 PM
- بازدید :
459
- پاسخ :
0
|
تاریخ :
1402/01/26
- ساعت :
03:38:00 PM
- بازدید :
1263
- پاسخ :
1
|
تاریخ :
1402/11/13
- ساعت :
12:48:00 AM
- بازدید :
889
- پاسخ :
4
|
تاریخ :
1402/08/06
- ساعت :
01:20:00 PM
- بازدید :
720
- پاسخ :
1
|
تاریخ :
1398/08/21
- ساعت :
03:53:00 PM
- بازدید :
3071
- پاسخ :
1
|
تاریخ :
1398/08/18
- ساعت :
12:16:00 PM
- بازدید :
2816
- پاسخ :
2
|
تاریخ :
1399/10/20
- ساعت :
01:57:00 PM
- بازدید :
5029
- پاسخ :
1
|
تاریخ :
1399/07/25
- ساعت :
02:58:00 AM
- بازدید :
8567
- پاسخ :
1
|
تاریخ :
1403/09/06
- ساعت :
09:51:00 PM
- بازدید :
87
- پاسخ :
1
|
تاریخ :
1400/07/17
- ساعت :
10:39:00 PM
- بازدید :
2335
- پاسخ :
0
|
تاریخ :
1403/09/05
- ساعت :
06:32:00 PM
- بازدید :
70
- پاسخ :
1
|
تاریخ :
1401/02/24
- ساعت :
02:17:00 PM
- بازدید :
2037
- پاسخ :
1
|
تاریخ :
1403/08/29
- ساعت :
07:15:00 PM
- بازدید :
117
- پاسخ :
0
|
تاریخ :
1403/08/18
- ساعت :
10:40:00 AM
- بازدید :
149
- پاسخ :
0
|
تاریخ :
1402/07/23
- ساعت :
04:01:00 PM
- بازدید :
1067
- پاسخ :
1
|
تاریخ :
1403/05/30
- ساعت :
09:22:00 AM
- بازدید :
473
- پاسخ :
1
|
تاریخ :
1402/08/01
- ساعت :
06:25:00 PM
- بازدید :
948
- پاسخ :
1
|
تاریخ :
1402/08/16
- ساعت :
10:38:00 AM
- بازدید :
1378
- پاسخ :
1
|