سلام
من در یک فرم فیلد متن دارم که از ckeditor استفاده میکنم ولی مشکلی که به کامپوننت ارسال نمیشه dd هم میگیرم null برمیگردونه
بعضی وقت ها هم وقتی فیلد های دیگه اپدیت میشن مثلا یک input دیگه برای عنوان بعد از اپدیت و نمایش اررور کل textarea که از ckeditor استفاده میکنه کاملا محو میشه
کد کلاس
class Create extends Component
{
public $post;
public $tasvir;
use WithFileUploads;
protected $rules = [
'post.title' => 'required|min:5|unique:posts,title',
'post.text' => 'required',
'tasvir' => 'required|image',
'post.slug' => 'required|min:5|unique:posts,slug',
'post.seo_title' => 'required|min:5',
'post.meta_description' => 'required|min:5',
'post.meta_keys' => 'required|min:5',
];
public function updated($value) // for realtime validation
{
$this->validateOnly($value);
}
public function uploadMyPhotos() // upload photos
{
$year = now()->year;
$month = now()->month;
$day = now()->day;
$dir = "uploads/$year/$month/$day";
$name = rand(1000 , 99999) . '-' . $this->tasvir->getClientOriginalName();
$this->tasvir->storeAs($dir , $name);
return "$dir/$name";
}
public function createNewPostAsPishenvis()
{
// $this->validate();
// if ($this->tasvir):
// $this->post->image = $this->uploadMyPhotos();
// endif;
dd($this->post);
}
public function render()
{
return view('livewire.admin.posts.create')->layout('admin.master');
}
}
کد کامپوننت
<form wire:submit.prevent="createNewPostAsPishenvis" class="form-group text-right m-1">
<div class="form-group">
<label class="form-label" for="post_title">عنوان مقاله</label>
<input type="text" wire:model.debounce="post.title" class="form-control" id="post_title">
@error('post.title')
<span class="text-danger">{{ $message }}</span>
@enderror
<span wire:target="post.title" wire:loading>
<span class="spinner-border spinner-border-sm text-danger"></span>
</span>
</div>
<div class="form-group">
<label class="form-label" for="slug">ادرس url مقاله</label>
<input type="text" wire:model.debounce="post.slug" class="form-control" id="slug">
@error('post.slug')
<span class="text-danger">{{ $message }}</span>
@enderror
<span wire:target="post.slug" wire:loading>
<span class="spinner-border spinner-border-sm text-danger"></span>
</span>
</div>
<div class="form-group">
<label class="form-label" for="seo_title">عنوان سئو </label>
<input type="text" wire:model.debounce="post.seo_title" class="form-control" id="seo_title">
@error('post.seo_title')
<span class="text-danger">{{ $message }}</span>
@enderror
<span wire:target="post.seo_title" wire:loading>
<span class="spinner-border spinner-border-sm text-danger"></span>
</span>
</div>
<div class="form-group">
<label class="form-label" for="meta_description">توضیحات سئو </label>
<input type="text" wire:model.debounce="post.meta_description" class="form-control" id="meta_description">
@error('post.meta_description')
<span class="text-danger">{{ $message }}</span>
@enderror
<span wire:target="post.meta_description" wire:loading>
<span class="spinner-border spinner-border-sm text-danger"></span>
</span>
</div>
<div class="form-group">
<label class="form-label" for="meta_keys">کلمات کلیدی سئو </label>
<input type="text" wire:model.debounce="post.meta_keys" class="form-control" id="meta_keys">
@error('post.meta_keys')
<span class="text-danger">{{ $message }}</span>
@enderror
<span wire:target="post.meta_keys" wire:loading>
<span class="spinner-border spinner-border-sm text-danger"></span>
</span>
</div>
<div class="form-group form-row m-1">
<div class="col-6">
<label class="form-label" for="image">تصویر شاخص </label>
<input wire:model.debounce="tasvir" id="image" type="file" class="form-control">
<span wire:target="tasvir" wire:loading>
<span class="spinner-border spinner-border-sm text-danger"></span>
</span>
</div>
<div class="col-6">
@if($tasvir)
<img class="img-fluid" width="100" height="100" src="{{ $tasvir->temporaryUrl() }}" alt="">
@endif
</div>
</div>
<div wire:ignore class="form-group row">
<div class="col-md-9">
<textarea wire:model="post.text" class="form-control required" name="message"
id="message"></textarea>
</div>
</div>
@error('post.text')
<span class="text-danger">{{ $message }}</span>
@enderror
<div class="form-group">
<button class="btn btn-info">ذخیره به صورت پیش نویس</button>
</div>
</form>
کد فوتر برای ckeditor
<script src="https://cdn.ckeditor.com/4.16.1/full/ckeditor.js"></script>
<script>
const editor = CKEDITOR.replace('message');
</script>
نه دوست عزیز به این شکل استفاده کنید.
<script>
const editor = CKEDITOR.replace('message');
CKEDITOR.instances.message.on('change', function() {
@this.set('message', this.getData());
});
</script>
سلام شما باید روی ckeditor متد change رو قرار بدید به این صورت که هر وقت تغییری ایجاد شد این متد مقدار data در کامپوننت شما رو ست کنه
به این روش رفتم باز هم ارسال نشد
<textarea wire:model="$set('post.text', $event.target.value)" class="form-control required" name="message"
id="message"></textarea>
</div>
نه دوست عزیز به این شکل استفاده کنید.
<script>
const editor = CKEDITOR.replace('message');
CKEDITOR.instances.message.on('change', function() {
@this.set('message', this.getData());
});
</script>
آیا مایل به ارسال نوتیفیکیشن و اخبار از طرف راکت هستید ؟