阅读 https://startutorial.com/view/using-ckeditor-with-laravel-livewire 文章我在 Laravel 11 应用程序中的 1 页中添加了 ckeditor，就像示例一样，它工作正常。
但是为了让编辑器有一些默认文本，我将其重新制作为：
<div class="flex flex-col space-y-10">
<div wire:ignore>
<textarea wire:model="message"
class="min-h-fit h-48 "
name="message"
id="message">{{ $message }}</textarea>
</div>
<div>
<span class="text-lg">You typed:</span>
<div class="w-full min-h-fit h-48 border border-gray-200">{{ $message }}</div>
</div>
</div>
将 $message 放在 textarea 块中是我的决定 - 也许不是最好的。
所以我有一个带有 ckeditor 和默认文本的编辑器，但是当我开始在 ckeditor 区域内输入文本时 - ckeditor 本身丢失了 我看到纯文本区域，在“您输入”块中我看到新文本。
我有一个组件编辑器：
namespace App\Livewire\Admin;
use App\Enums\AppColorEnum;
use App\Enums\ConfigValueEnum;
use App\Enums\DispatchAlertTypeEnum;
use App\Library\ImageProps;
use App\Library\Traits\AppCommonTrait;
use App\Livewire\Forms\NewsCategoryForm;
use App\Models\NewsCategory;
use App\Rules\NewsCategoryRules;
use Carbon\Carbon;
use Illuminate\Database\Eloquent\ModelNotFoundException;
use Illuminate\Database\QueryException;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\DB;
use Livewire\Attributes\On;
use Livewire\Component;
use Livewire\WithFileUploads;
use NewsCategoryActiveEnum;
class NewsCategoryEditor extends Component
{
use AppCommonTrait;
use WithFileUploads;
public string $pageTitle = 'News category editor';
public ?int $id = null;
public bool $isEdit = false;
public NewsCategoryForm $form;
public array $imageProps = [];
public array $activeSelectionItems = [];
public array $appColorSelectionItems = [];
public function render()
{
return view('livewire.admin.news-category-editor')->layout('components.layouts.admin');
}
public function mount(?int $id = null, ?string $defaultAction = null)
{
...
if(!blank($id)) {
$this->edit($id);
}
}
public function edit($id)
{
$this->isEdit = true;
try {
$newsCategory = NewsCategory::getById($id)->firstOrFail();
} catch (ModelNotFoundException $e) {
self::dispatchAlert(DispatchAlertTypeEnum::ERROR,'Error reading news category: ' . $e->getMessage(), $this->pageTitle);
}
$this->form->setNewsCategory($newsCategory, $this->isEdit);
}
public function update(Request $request)
{
...
} // public function update()
public function cancel()
{
$this->redirect(route('admin.newsCategories.index'), navigate: true);
}
}
我使用表单 app/Livewire/Forms/NewsCategoryForm.php :
namespace App\Livewire\Forms;
use App\Models\NewsCategory;
use Livewire\Form;
class NewsCategoryForm extends Form
{
public NewsCategory $newsCategory;
public $id;
public $name;
public $description;
...
public bool $isEdit = false;
public function setNewsCategory(NewsCategory $newsCategory, bool $isEdit)
{
$this->newsCategory = $newsCategory;
$this->name = $newsCategory->name;
$this->description = $newsCategory->description;
...
$this->isEdit = $isEdit;
}
public function getNewsCategory(): NewsCategory
{
$this->newsCategory->name = $this->name;
$this->newsCategory->description = $this->description;
...
return $this->newsCategory;
}
public function setDescription(string $description)
{
$this->description = $description;
}
}
和刀片模板：
<div class="editor_form_wrapper">
<form class="form-editor" @if($form->isEdit) wire:submit="update"
@else wire:submit="store" @endif enctype="multipart/form-data">
@include('admin.validation_errors', ['show_error_items' => true])
@if($form->isEdit)
<div class="editor_field_block_wrapper">
<div class="editor_field_block_device_splitter">
<div class="w-4/12 pb-0 pl-2 md:pt-3">
<label for="id" class="editor_field_block_device_label">Id: </label>
</div>
<div class="p-2 w-full">
<input id="id" name="id" type="text" class="editor_form_readonly" value="{{ $form->id }}"
tabindex="-1" readonly/>
</div>
</div>
</div>
@endif
<div class="editor_field_block_wrapper">
<div class="editor_field_block_device_splitter">
<div class="w-4/12 pb-0 pl-2 md:pt-3 ">
<label for="name" class="editor_field_block_device_label">Name: <span
class="editor_form_aria_required" aria-required="true"> * </span></label>
</div>
<div class="p-2 w-full">
<input id="name" type="text"
class="editor_form_input"
maxlength="50"
wire:model="form.name"
autocomplete="off"
placeholder="Fill string describing news category"
tabindex="10"
autofocus/>
@error('form.name')
<span class="error_text">{{$message}}</span>
@enderror
</div>
</div>
</div>
<div class="editor_field_block_wrapper">
<div class="editor_field_block_device_splitter">
<div class="w-4/12 pb-0 pl-2 md:pt-3">
<label for="description" class="editor_field_block_device_label">Description: <span
class="editor_form_aria_required" aria-required="true"> * </span> </label>
</div>
<div class="px-2 w-full">
<textarea wire:model="form.description"
class="min-h-fit h-48 " rows="4" cols="80"
name="description"
id="description">{{ $form->description }}</textarea>
<div>
<span class="text-lg">You typed:</span>
<div class="w-full min-h-fit h-48 border border-gray-200">{{ $form->description }}</div>
</div>
</div>
@error('form.description')
<span class="error_text">{{$message}}</span>
@enderror
</div>
</div>
...
@if($form->isEdit)
<div class="editor_field_block_wrapper">
<div class="editor_field_block_device_splitter">
<div class="w-4/12 pb-0 pl-2 md:pt-3 ">
<label for="created_at" class="editor_field_block_device_label">Created at</label>
</div>
<div class="p-2 w-full">
<input
id="created_at" name="created_at" type="text"
class="editor_form_readonly"
value="{{ $form->created_at }}"
tabindex="-1"
readonly/>
</div>
</div>
</div>
@if(!blank($form->updated_at))
<div class="editor_field_block_wrapper">
<div class="editor_field_block_device_splitter">
<div class="w-4/12 pb-0 pl-2 md:pt-3 ">
<label for="updated_at" class="editor_field_block_device_label">Updated at</label>
</div>
<div class="p-2 w-full">
<input
id="updated_at" name="updated_at" type="text"
class="editor_form_readonly"
value="{{ $form->updated_at }}"
tabindex="-1"
readonly/>
</div>
</div>
</div>
@endif
@endif
<div class="flex items-center justify-end p-2 text-right sm:px-6">
<div class="mb-3 flex justify-between">
<button class="btn_editor_form_cancel" wire:click="cancel">
Cancel
</button>
<button class="btn_editor_form_submit" type="submit">
Edit
</button>
</div>
</div>
</form>
</div>
<script>
ClassicEditor
.create(document.querySelector('#description'))
.then(editor => {
editor.model.document.on('change:data', () => {
console.log('editor.getData()::')
console.log(editor.getData())
@this.set('form.description', editor.getData());
})
})
.catch(error => {
console.error(error);
});
</script>
有什么想法我的代码有什么问题以及如何修复它吗？
在视图中，您忘记用