راکت
حل شده

ارسال مقادیر ckeditor به کامپوننت لایو وایر

4 پاسخ

سلام
من در یک فرم فیلد متن دارم که از 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>
ثبت پرسش جدید

پاسخ‌ها

4
سبحان مولایی
سبحان مولایی
@websaz

تخصص: برنامه‌نویس وب: Python :: Django :: Node :: Php :: Laravel :: JS :: React :: React Native

بهترین پاسخ

نه دوست عزیز به این شکل استفاده کنید.

<script>
    const editor = CKEDITOR.replace('message');

      CKEDITOR.instances.message.on('change', function() {
          @this.set('message', this.getData());
      });

</script>
سبحان مولایی
سبحان مولایی
@websaz

تخصص: برنامه‌نویس وب: Python :: Django :: Node :: Php :: Laravel :: JS :: React :: React Native

سلام شما باید روی ckeditor متد change رو قرار بدید به این صورت که هر وقت تغییری ایجاد شد این متد مقدار data در کامپوننت شما رو ست کنه

محمد
محمد
@mprogrammer7

تخصص: Laravel

به این روش رفتم باز هم ارسال نشد

        <textarea wire:model="$set('post.text', $event.target.value)" class="form-control required" name="message"
                  id="message"></textarea>

                </div>

@websaz

شاید پاسخ شما همین‌جا باشد

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

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