README

此包为您的应用添加了一个Livewire组件，该组件将为您创建一个Editor.js实例。

默认情况下，它已经支持使用Livewire和Editor.js的图片插件进行图片上传。

包装版本Editor.js：2.26.5

要求

此包要求您安装以下工具

请参考链接指南了解如何安装这些。

安装

您可以通过composer安装此包

composer require maxeckel/livewire-editorjs

在composer下载包之后，您需要发布其配置和资产

配置（可选）

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

资产

对于资产，您有两个选项

为生产，已经编译的资产包括上述提到的插件

php artisan vendor:publish --tag=livewire-editorjs:assets:compiled --force

这将把编译后的资产复制到public/vendor/livewire-editorjs。

发布原始资产以将其包含在自己的构建链中

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

这将把原始资产复制到resources/js/vendor/livewire-editorjs。
现在您必须将这些资产包含在自己的构建链中。

如果您想进一步自定义编辑器，例如添加更多插件或
以不同方式配置已安装的插件，则需要使用此方法。

重要

为了使其工作，您需要自己安装所有想要使用的插件！
这还包括已配置的插件！

最后一步是在视图中包含脚本。您可以根据自己的喜好进行操作。如果您选择了选项1，可以使用简单的blade指令包含脚本

@livewireEditorjsScripts

建议

如果您选择了发布资产的选项1，请确保在执行composer update后再次发布资产，以避免它们过时。为此，请更新您的composer.json脚本配置

{
    "scripts": {
        "post-autoload-dump": [
            "Illuminate\\Foundation\\ComposerScripts::postAutoloadDump",
            "@php artisan package:discover --ansi",
            "@php artisan vendor:publish --tag=livewire-editorjs:assets:compiled --force"
        ]
    }
}

如果您选择了选项2，我建议不要自动重新发布原始资产，因为这会覆盖您所做的任何更改。请在更新此包后检查更改日志。

包装的Editor.js插件

代码
标题
图片配置了Livewire上传，默认即可使用
内联代码
列表
引用
下划线

用法

@livewire('editorjs', [
    'editorId' => "myEditor",
    'value' => $value,
    'uploadDisk' => 'public',
    'downloadDisk' => 'public',
    'class' => '...',
    'style' => '...',
    'readOnly' => true,
    'placeholder' => 'Lorem ipsum dolor sit amet'
])

<livewire:editorjs
   editor-id="myEditor"
   :value="$value" 
   upload-disk="public" 
   download-disk="public" 
   class="..." 
   style="..."
   :read-only="true"
   placeholder="Lorem ipsum dolor sit amet"
/>

属性/参数

editorId

editorId参数用于生成唯一的Livewire组件事件，以便您能够监听特定编辑器的事件（如果同一页面上使用多个编辑器）

重要！
不要将传递的id用作HTML元素的id属性，因为editorId在内部用作初始化Editor.js的包装div中的id！
如果您在其他地方使用id，则实例会损坏！

value

value参数设置编辑器实例的初始数据。
这将是在Editor.js中存储的JSON数据

uploadDisk（可选）

uploadDisk参数定义了上传的图像应该存储的磁盘。
此参数为可选。存储图像的默认磁盘在包的配置文件中定义

config/livewire-editorjs.php => default_upload_img_disk

默认值: public

downloadDisk (可选)

downloadDisk参数定义了下载的图像应该存储的磁盘。当用户将图像URL粘贴到编辑器中时，将通过网络下载图像（请参阅Editor.js图像插件）
此参数为可选。存储图像的默认磁盘在包的配置文件中定义

config/livewire-editorjs.php => default_download_img_disk

默认值: `public`

class (可选)

正如其名所示，您可以像其他任何组件一样传递CSS类。
有关编辑器/块的样式，请参阅Editor.js文档

默认值: ""

style (可选)

正如其名所示，您可以像其他任何组件一样传递内联样式。

默认值: ""

readOnly (可选)

您可以通过将此参数的值设置为"true"来将编辑器设置为只读模式。如果您想以创建文章的方式显示文章，这可能很有用。

默认值: false

placeholder (可选)

使用placeholder属性，您可以将一个占位符传递给Editor.js实例，该占位符将在空编辑器中显示。

默认值: '' (通过相应的配置选项default_placeholder设置)

事件 / 保存状态

编辑器配置为使用其内置的onChange回调将更改保存到服务器。
在此回调中，编辑器将与其Livewire状态同步。
当发生这种情况时，Livewire将emitUp一个保存事件

editorjs-save:editorId

编辑器ID将被替换为您传递给组件的编辑器ID参数。
有了这个，您就可以在您使用的编辑器所在的Livewire页面/组件中监听此事件，以保存对您的模型所做的更改。

protected $listeners = ['editorjs-save:editorId' => 'saveEditorState'];

public function saveEditorState($editorJsonData)
{
    $this->model->data = $editorJsonData;
}

配置

为了更改配置，您首先需要将其发布

php artisan vendor:publish --provider="Maxeckel\LivewireEditorjs\LivewireEditorjsServiceProvider" --tag="livewire-editorjs:config"

或

php artisan vendor:publish，然后输入其编号选择livewire-editorjs:config。

默认配置

<?php

return [
    'enabled_component_registration' => true,

    'component_name' => 'editorjs',

    // Sets the default placeholder to use when a new and empty Editor.js instance is created.
    'default_placeholder' => '',

    /*
     * Available options:
     *
     * VERBOSE	Show all messages (default)
     * INFO	Show info and debug messages
     * WARN	Show only warn messages
     * ERROR	Show only error messages
     *
     * Taken from the offical docs of Editor.js:
     * https://editorjs.io/configuration#log-level
     */
    'editorjs_log_level' => 'ERROR',

    // Defines on which disk images, uploaded through the editor, should be stored.
    'default_img_upload_disk' => 'public',

    // Defines on which disk images, downloaded by pasting an image url into the editor, should be stored.
    'default_img_download_disk' => 'public',
];

enabled_component_registration (默认: `true`)

此选项定义了是否应在启动时由ServiceProvider注册默认的livewire组件。
当您想禁用内部组件并使用make:editorjs命令使用自己的组件时，请将其设置为false。

component_name (默认: `editorjs`)

此选项定义了内部组件应该注册的名称。
默认情况下，此值设置为editorjs，使组件可通过"livewire:editorjs"或"@livewire('editorjs')"访问。
您可以根据需要更改此值！

default_placeholder (默认: `''`)

此选项为Editor.js的占位符属性设置全局默认值。
当实例创建而没有内容时，将显示占位符。

editorjs_log_level (默认: `'ERROR'`)

此选项设置Editor.js的日志级别（控制台输出）。
可用选项如下

请参阅Editor.js文档进行参考。

default_img_upload_disk (默认: `public`)

此选项定义了上传的图像应该存储到哪个磁盘。
尽管可以在每个实例级别上更改磁盘，但此选项允许您设置全局默认值。
当您没有通过其属性为其组件实例提供磁盘名称时，始终使用此选项。

default_img_download_disk (默认: `public`)

此选项定义了从网络上下载的图像应该存储到哪个磁盘。
尽管可以在每个实例级别上更改磁盘，但此选项允许您设置全局默认值。
当您没有通过其属性为其组件实例提供磁盘名称时，始终使用此选项。

命令

此包为您的项目添加了一个 make:editorjs 命令。通过此命令，您可以创建自己的 EditorJs livewire 组件。这使得您可以更改和/或自定义组件。

如果您以此方式添加自己的组件，应通过将 livewire-editorjs.php 配置文件中的 enabled_component_registration 设置为 false 来禁用包内部组件注册。

重要！
通过此方法创建自己的组件，包组件的任何更新都不会影响您！
这意味着任何改进都无法访问。

扩展

如果您想自定义组件或扩展其功能，最佳方式是扩展此包提供的组件。这样，您将接收到更新，同时仍然可以自定义内部结构。

<?php

namespace App\Http\Livewire;

use Maxeckel\LivewireEditorjs\Http\Livewire\EditorJS;

class MyCustomEditor extends EditorJS
{
    // Put your custom code here
}

测试

composer test

更新日志

有关最近更改的详细信息，请参阅更新日志。

贡献

有关详细信息，请参阅贡献指南。

安全性

如果您发现任何安全相关的问题，请通过电子邮件发送至 security@max-eckel.dev，而不是使用问题跟踪器。

maxeckel / livewire-editorjs

维护者

详细信息

README

要求

安装

配置（可选）

资产

重要

包装的Editor.js插件

用法

属性/参数

editorId

value

uploadDisk（可选）

downloadDisk (可选)

class (可选)

style (可选)

readOnly (可选)

placeholder (可选)

事件 / 保存状态

配置

默认配置

enabled_component_registration (默认: `true`)

component_name (默认: `editorjs`)

default_placeholder (默认: `''`)

editorjs_log_level (默认: `'ERROR'`)

default_img_upload_disk (默认: `public`)

default_img_download_disk (默认: `public`)

命令

扩展

测试

更新日志

贡献

安全性

鸣谢

许可证

Laravel 包模板

maxeckel / livewire-editorjs

维护者

详细信息

README

要求

安装

配置（可选）

资产

重要

包装的Editor.js插件

用法

属性/参数

editorId

value

uploadDisk（可选）

downloadDisk (可选)

class (可选)

style (可选)

readOnly (可选)

placeholder (可选)

事件 / 保存状态

配置

默认配置

enabled_component_registration (默认: true)

component_name (默认: editorjs)

default_placeholder (默认: '')

editorjs_log_level (默认: 'ERROR')

default_img_upload_disk (默认: public)

default_img_download_disk (默认: public)

命令

扩展

测试

更新日志

贡献

安全性

鸣谢

许可证

Laravel 包模板

enabled_component_registration (默认: `true`)

component_name (默认: `editorjs`)

default_placeholder (默认: `''`)

editorjs_log_level (默认: `'ERROR'`)

default_img_upload_disk (默认: `public`)

default_img_download_disk (默认: `public`)