README

要求

安装

composer require samdeimos/livewire-editorjs

发布配置文件和资源文件

php artisan vendor:publish --tag=livewire-editorjs

需要在标签 </body> 之前包含 @livewireEditorjsScripts

<body>
    <...>
    @livewireEditorjsScripts
</body>
</html>

使用方法

要使用此包，只需使用 Traits WithEditorjs.php 和 WithEditorjs.php 来加载图片，在我们要使用的组件中插入 editorjs 组件的 blade 组件

<x-editorjs  wire:model="body"  :readOnly="false">
    <x-slot  name="plugins">
	    list:List,
	    header: Header,
	    inlineCode: InlineCode,
	    underline: Underline,
	    raw: RawTool,
	    delimiter: Delimiter,
	    code: CodeTool,
    </x-slot>
</x-editorjs>

创建组件示例 通过 wire:model 传递的变量是存储 editorjs 内容的字符串格式。

livewire 组件

<?php
namespace App\Http\Livewire\Post;

use App\Models\Post;
use Livewire\Component;
use Livewire\WithFileUploads;
use SamDeimos\LivewireEditorjs\Http\Livewire\WithEditorjs;

class  Create  extends  Component
}
    use WithFileUploads, WithEditorjs;

    public $body;

    public function updatedBody()
    {
        $post = Post::create([
            'title' => 'test',
            'body' => $this->body,
        ]);

        return redirect()->route('post.edit', $post->id);
    }

    public function render()
    {
        return view('livewire.post.create');
    }
}

livewire 组件视图

<div>
    <x-slot name="header">
        <h2 class="text-xl font-semibold leading-tight text-gray-800">
            {{ __('Post') }}
        </h2>
    </x-slot>

    <x-card>
        <x-editorjs wire:model="body" :readOnly="false">
            <x-slot name="plugins">
                list:List,
                header: Header,
                inlineCode: InlineCode,
                underline: Underline,
                raw: RawTool,
                delimiter: Delimiter,
                code: CodeTool,
            </x-slot>
        </x-editorjs>
    </x-card>
</div>

编辑组件示例 为了编辑，调用函数 $this->setBody()，该函数接收要编辑的内容作为参数

livewire 组件

<?php

namespace App\Http\Livewire\Post;

use App\Models\Post;
use Livewire\Component;
use Livewire\WithFileUploads;
use SamDeimos\LivewireEditorjs\Http\Livewire\WithEditorjs;

class Edit extends Component
{
    use WithFileUploads, WithEditorjs;

    public $post;
    public $body;

    public function mount($id)
    {
        $this->post = Post::findOrFail($id);
        $this->setBody($this->post->body);
    }

    public function updatedBody()
    {
        $this->post->fill([
            'title' => '2',
            'body' => $this->body
        ])->save();
    }

    public function render()
    {
        return view('livewire.post.edit');
    }
}

livewire 组件视图

<div>
    <x-slot name="header">
        <h2 class="text-xl font-semibold leading-tight text-gray-800">
            {{ __('Post') }}
        </h2>
    </x-slot>

    <x-card>
        <x-editorjs wire:model="body">
            <x-slot name="plugins">
                list:List,
                header: Header,
                warning: Warning,
                inlineCode: InlineCode,
                underline: Underline,
                maker: Maker,
                raw: RawTool,
                delimiter: Delimiter,
                code: CodeTool,
            </x-slot>
        </x-editorjs>
    </x-card>
</div>

注意

为了使用插件，必须预先安装并包含 app.js

window.ImageTool = require("@editorjs/image");
window.List = require("@editorjs/list");
window.Header = require("@editorjs/header");
window.Warning = require("@editorjs/warning");
window.InlineCode = require("@editorjs/inline-code");
window.Underline = require("@editorjs/underline");
window.Maker = require("@editorjs/marker");
window.RawTool = require("@editorjs/raw");
window.Delimiter = require("@editorjs/delimiter");
window.CodeTool = require("@editorjs/code");

就我个人而言，我认为在创建包时不应该提供已经完成的组件，而应该使用 Traits 和 blade 组件来生成一个更灵活的 livewire 包。

samdeimos / livewire-editorjs

维护者

详细信息

README

要求

安装

使用方法

注意