محمد
3 سال پیش توسط محمد مطرح شد
4 پاسخ

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

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

ثبت پرسش جدید
سبحان مولایی
تخصص : برنامه‌نویس وب: Python ::...
@websaz 3 سال پیش مطرح شد
1

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

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

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

</script>

سبحان مولایی
تخصص : برنامه‌نویس وب: Python ::...
@websaz 3 سال پیش مطرح شد
1

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


محمد
تخصص : Laravel
@mprogrammer7 3 سال پیش مطرح شد
2

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

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

                </div>

@websaz


سبحان مولایی
تخصص : برنامه‌نویس وب: Python ::...
@websaz 3 سال پیش مطرح شد
1

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

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

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

</script>

حسین بهرامی
تخصص : برنامه نویس
@hosseindid 3 سال پیش مطرح شد

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

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