editor.php
v1.1.0
editor.php เป็นแพ็คเกจที่ออกแบบมาเพื่อช่วยแยกวิเคราะห์และจัดการเอาต์พุตของ Editor.js ได้อย่างง่ายดาย สามารถใช้กับ vanilla PHP หรือ Larave Laravel มีคุณสมบัติเพิ่มเติมบางประการ
| editor.php | ลาราเวล | PHP |
|---|---|---|
| 1.x | 10.x ~ 11.x | 8.1 ~ 8.3 |
ติดตั้งแพ็คเกจโดย:
composer require bumpcore/ editor.phpeditor.php นั้นง่ายมากในการเริ่มต้น
use BumpCore EditorPhp EditorPhp ;
// Passing Editor.js's output directly to the `make`.
// This will render blocks into html.
echo EditorPhp:: make ( $ json )-> render ();editor.php รองรับบล็อกต่อไปนี้
ทั้งหมดมีกฎการตรวจสอบเริ่มต้นและมุมมองที่จะแสดงผล อย่างไรก็ตาม ขอแนะนำอย่างยิ่งให้ปรับแต่งการตรวจสอบความถูกต้องและมุมมอง
คลาส EditorPhp เป็นคลาสหลักสำหรับการจัดการบล็อก คุณสามารถเข้าถึง แสดงผล แปลงเป็นอาร์เรย์ และแปลงเป็น JSON ผ่านคลาสนี้ได้
มีสองวิธีในการสร้างอินสแตนซ์ใหม่ของ EditorPhp:
use BumpCore EditorPhp EditorPhp ;
// Using the `new` syntax.
$ editor = new EditorPhp ( $ json );
// Using the `make` syntax.
$ editor = EditorPhp:: make ( $ json );ไวยากรณ์ทั้งสองมีค่าเท่ากัน และแทบไม่มีความแตกต่างกันเลย
คุณสามารถเข้าถึงบล็อกผ่านคุณสมบัติบล็อก
use BumpCore EditorPhp EditorPhp ;
use BumpCore EditorPhp Block Block ;
use BumpCore EditorPhp Blocks Paragraph ;
$ editor = EditorPhp:: make ( $ json );
// Stripping all tags from paragraph block's text.
$ editor -> blocks -> transform ( function ( Block $ block )
{
if ( $ block instanceof Paragraph)
{
$ block -> set ( ' text ' , strip_tags ( $ block -> get ( ' text ' )));
}
return $ block ;
}); บล็อกจะถูกจัดเก็บเป็น IlluminateSupportCollection ด้วยการใช้วิธีการรวบรวม คุณสามารถจัดการบล็อกได้ตามที่คุณต้องการ คุณสามารถเรียนรู้เกี่ยวกับคอลเลกชันได้ในเอกสารของ Laravel
การเรนเดอร์ HTML นั้นตรงไปตรงมามาก มีหลายวิธีในการแสดงผลอินสแตนซ์ของคุณ:
use BumpCore EditorPhp EditorPhp ;
$ editor = EditorPhp:: make ( $ json );
// Using the `render` function.
echo $ editor -> render ();
// Using the `toHtml` function.
echo $ editor -> toHtml ();
// Or by casting to a string.
echo $ editor ;ขอย้ำอีกครั้งว่าทั้งสามกรณีเหมือนกันไม่มีใครเหนือกว่าใคร คุณสามารถใช้อันไหนก็ได้ที่คุณชอบมากที่สุด
ตามค่าเริ่มต้น คุณจะมีสองตัวเลือกสำหรับเทมเพลตของบล็อกเริ่มต้น tailwindcss และ Bootstrap 5 เทมเพลตที่ใช้เริ่มต้นคือ tailwindcss คุณสามารถเปลี่ยนเทมเพลตได้โดย:
use BumpCore EditorPhp EditorPhp ;
// Using tailwind.
EditorPhp:: useTailwind ();
// Using Bootstrap.
EditorPhp:: useBootstrapFive ();คุณสามารถเรียนรู้เพิ่มเติมเกี่ยวกับการเรนเดอร์ได้ในการสร้างส่วนบล็อกแบบกำหนดเอง
คุณสามารถสร้างข้อมูลปลอมด้วย EditorPhp
use BumpCore EditorPhp EditorPhp ;
// This will return a generated fake JSON.
$ fake = EditorPhp:: fake ();
// If we pass first argument true, it will return new `EditorPhp` instance with fake data.
$ fakeEditor = EditorPhp:: fake ( true );
// You can also pass min lenght and max lenght of blocks.
// Below code will generate blocks between 1 and 3.
$ fakeEditor = EditorPhp:: fake ( true , 1 , 3 );
echo $ fakeEditor -> render ();คุณสามารถเรียนรู้เพิ่มเติมเกี่ยวกับการสร้างข้อมูลปลอมสำหรับบล็อกในการสร้างข้อมูลปลอม
คุณสามารถแปลงอินสแตนซ์ของคุณเป็นอาร์เรย์ได้โดยใช้เมธอด toArray()
use BumpCore EditorPhp EditorPhp ;
$ editor = EditorPhp:: make ( $ json );
// This will return ['time' => ..., 'blocks' => [...], 'version' => '...']
$ array = $ editor -> toArray (); คุณสามารถแปลงอินสแตนซ์ของคุณเป็น JSON ได้โดยใช้เมธอด toJson(/** options */) วิธีการนี้มีประโยชน์เมื่อคุณจัดการอินสแตนซ์ของคุณ
use BumpCore EditorPhp EditorPhp ;
$ editor = EditorPhp:: make ( $ json );
// This will return encoded JSON.
$ json = $ editor -> toJson ( JSON_PRETTY_PRINT );คุณสามารถเข้าถึงเวลาและเวอร์ชัน:
use BumpCore EditorPhp EditorPhp ;
$ editor = EditorPhp:: make ( $ json );
$ editor -> time ;
$ editor -> version ; คุณสมบัติ time เป็นตัวอย่าง Carbon คุณสามารถเรียนรู้เพิ่มเติมเกี่ยวกับเรื่องนี้ได้ในเอกสารของ Carbon
คุณสามารถลงทะเบียนมาโครและใช้ในภายหลังได้ มาโครจะขึ้นอยู่กับ Laravel
use BumpCore EditorPhp EditorPhp ;
// Registering new macro.
EditorPhp:: macro (
' getParagraphs ' ,
fn () => $ this -> blocks -> filter ( fn ( Block $ block ) => $ block instanceof Paragraph)
);
$ editor = EditorPhp:: make ( $ json );
// This will return a collection that only contains paragraphs.
$ paragraphs = $ editor -> getParagraphs (); บล็อกเป็นส่วนการสร้างหลักของโปรแกรมแก้ไข EditorPhp คุณสามารถจัดการมันได้ตามที่คุณต้องการ และส่วนที่ดีที่สุดก็คือคุณสามารถใช้มันเพื่อจัดเก็บลอจิกของบล็อกของคุณได้ ตัวอย่างเช่น บล็อกรูปภาพกำหนดให้ผู้อัปโหลดทำงาน คุณสามารถใช้ฟังก์ชันการทำงานที่เกี่ยวข้องได้ในคลาส BumpCoreEditorPhpBlocksImage
ก่อนที่เราจะเรียนรู้วิธีปรับแต่งบล็อก ต่อไปนี้คือวิธีที่คุณสามารถลงทะเบียนบล็อกของคุณ:
use BumpCore EditorPhp EditorPhp ;
// This will merge without erasing already registered blocks. Other blocks will still remain with the recently registered `image` and `paragraph` blocks.
EditorPhp:: register ([
' image ' => Blocks MyCustomImageBlock::class,
' paragraph ' => Blocks MyCustomParagraphBlock::class,
]);
// This will override already registered blocks. We now only have `image` and `paragraph` blocks.
EditorPhp:: register ([
' image ' => Blocks MyCustomImageBlock::class,
' paragraph ' => Blocks MyCustomParagraphBlock::class,
], true ); เมื่อลงทะเบียนบล็อก สิ่งสำคัญคือต้องใช้รหัสที่ถูกต้อง คีย์จะต้องเหมือนกับคีย์ type ของ Editor.js เพื่อชี้แจง:
{
"time" : 1672852569662 ,
"blocks" : [
{
"type" : " paragraph " ,
"data" : {
"text" : " ... "
}
}
],
"version" : " 2.26.4 "
} ในเอาต์พุตนี้ คีย์ประเภทของเราคือ paragraph ดังนั้นเราควรลงทะเบียนเป็น 'paragraph' => Paragraph::class สิ่งนี้อาจแตกต่างกันไปขึ้นอยู่กับวิธีที่คุณลงทะเบียนบล็อกใน Editor.js บล็อกเริ่มต้นใน EditorPhp ได้รับการลงทะเบียนโดยใช้ camelCase
ตามที่กล่าวไว้ก่อนหน้านี้ EditorPhp รองรับบล็อกเกือบทั้งหมด อย่างไรก็ตาม ส่วนใหญ่จะจัดการการตรวจสอบความถูกต้องของข้อมูลบล็อกและการเรนเดอร์ เพื่อให้บล็อก Image ทำงานได้อย่างถูกต้อง จำเป็นต้องมีการอัปโหลด เราสามารถใช้ตรรกะการอัปโหลดนี้ในคลาส Image :
use BumpCore EditorPhp Blocks Image ;
class MyImageBlock extends Image
{
public static function uploadTemp ( string $ fileName = ' image ' ): array
{
// ...
// Temporary upload logic.
return [
' success ' => . . . ,
' file ' => [
' url ' => . . . ,
],
];
}
public function upload (): void
{
$ file = $ this -> get ( ' file.url ' );
// Your logic.
// ...
// Altering the current block's data.
$ this -> set ( ' file.url ' , ...);
}
}
// ...
// Registering customized block.
EditorPhp:: register ([
' image ' => MyImageBlock::class
]); อย่างที่คุณเห็น เราได้ขยายบล็อก Image และเพิ่มสองฟังก์ชันเพื่อจัดการการอัปโหลดของเรา
ฟังก์ชัน uploadTemp ทำการอัพโหลดไฟล์ชั่วคราว วิธีนี้เป็นแบบคงที่และสามารถใช้ได้ทุกที่โดยใช้ Image::uploadTemp() มันจะส่งคืนข้อมูลที่เครื่องมือรูปภาพต้องการ
ฟังก์ชัน upload มีจุดประสงค์ที่แตกต่างออกไป มันแสดงถึงการอัปโหลดครั้งสุดท้ายสำหรับบล็อกแต่ไม่คงที่ วิธีนี้จะถือว่ารูปภาพนั้นถูกอัพโหลดชั่วคราวแล้ว และ $json ได้ถูกโหลดและแยกวิเคราะห์แล้ว ดังนั้นเราจึงสามารถใช้ฟังก์ชันนี้ได้ดังนี้:
use BumpCore EditorPhp EditorPhp ;
use Blocks MyImageBlock ;
$ editor = EditorPhp:: make ( $ json );
$ editor -> blocks -> each ( function ( Block $ block )
{
if ( $ block instanceof MyImageBlock)
{
$ block -> upload ();
}
});
return $ editor -> toJson ();ตอนนี้บล็อกทำการอัปโหลดครั้งสุดท้ายและบันทึกเป็น JSON
เป็นไปไม่ได้ที่จะรองรับบล็อกทั้งหมดที่มีอยู่ ดังนั้นเราจึงสามารถนำบล็อกของเราไปใช้ได้อย่างง่ายดาย บล็อกมาตรฐานมีลักษณะดังนี้:
use BumpCore EditorPhp Block Block ;
class MyCustomBlock extends Block
{
public function render (): string
{
return view ( ' blocks.my-custom-block ' , [ ' data ' => $ this -> data ]);
}
}อย่างที่คุณเห็น โดยค่าเริ่มต้น เราเพียงแค่ต้องใช้ตรรกะการเรนเดอร์ อย่างไรก็ตาม มีอะไรมากกว่าแค่การเรนเดอร์
มีหลายวิธีในการเข้าถึงข้อมูลของบล็อก ในตัวอย่างด้านล่าง คุณสามารถดูวิธีต่างๆ ในการเข้าถึงข้อมูลบล็อก:
public function render (): string
{
// ...
// Method 1: Accessing through the data object.
$ data = $ this -> data ;
$ data -> get ( ' custom.data ' );
$ data -> set ( ' custom.data ' , ' Hello World! ' );
// Method 2: Accessing by invoking the data object.
$ data ( ' custom.data ' ); // Hello World!
// Method 3: Using shortcuts.
$ this -> get ( ' custom.data ' );
$ this -> set ( ' custom.data ' , ' Nice! ' );
// ...
}คุณสามารถเลือกวิธีการข้างต้นเพื่อเข้าถึงและจัดการข้อมูลของบล็อกได้ นอกจากนี้ คุณยังสามารถตรวจสอบได้ว่ามีข้อมูลอยู่หรือไม่โดยใช้วิธีการต่อไปนี้:
$ data -> has ( ' custom.data ' );
// or
$ this -> has ( ' custom.data ' ); ไม่จำเป็นต้องตรวจสอบข้อมูล แต่จะทำให้ข้อมูลของคุณปลอดภัยยิ่งขึ้น การตรวจสอบความถูกต้องของข้อมูลบล็อกนั้นค่อนข้างง่าย เราแค่ต้องเพิ่มวิธี rules ให้กับบล็อกของเรา:
use BumpCore EditorPhp Block Block ;
class MyCustomBlock extends Block
{
// ...
public function rules (): array
{
return [
' text ' => ' required|string|max:255 ' ,
' items ' => ' sometimes|array ' ,
' items.*.name ' => ' required|string|max:255 ' ,
' items.*.html ' => ' required|string|min:255 ' ,
];
}
// ...
}เมื่อการตรวจสอบความถูกต้องของข้อมูลบล็อกล้มเหลว ข้อมูลจะว่างเปล่า การตรวจสอบข้อมูลดำเนินการโดยใช้ไลบรารีการตรวจสอบของ Laravel คุณสามารถเรียนรู้เพิ่มเติมได้ในเอกสารของ Laravel
คุณสามารถทำให้ HTML ของข้อมูลของคุณบริสุทธิ์ได้หากต้องการ สิ่งสำคัญคือต้องป้องกันการฉีดยา การทำให้ข้อมูลบริสุทธิ์มีลักษณะเหมือนกับการตรวจสอบความถูกต้อง:
use BumpCore EditorPhp Block Block ;
class MyCustomBlock extends Block
{
// ...
public function allow (): array | string
{
// Specifying one by one.
return [
' text ' => [
' a:href,target,title ' , // Will allow `a` tag and href, target, and title attributes.
' b ' , // Will only allow `b` tag with no attributes.
],
' items.*.name ' => ' b:* ' , // Will allow `b` tag with all attributes.
' items.*.html ' => ' * ' , // Will allow every tag and every attribute.
];
// Or just allowing all attributes and tags for all data.
return ' * ' ;
}
// ...
}ต่างจากการตรวจสอบความถูกต้องตรงที่การทำให้บริสุทธิ์จะตัดเฉพาะแท็กและแอตทริบิวต์ที่ไม่ต้องการเท่านั้น
ดังที่เราได้กล่าวไปแล้ว เราสามารถสร้างข้อมูลปลอมด้วย EditorPhp แต่จำเป็นต้องสร้างข้อมูลปลอมของแต่ละบล็อก ในการสร้างข้อมูลปลอม เราควรเพิ่มวิธีคงที่ให้กับบล็อกของเรา:
use BumpCore EditorPhp Block Block ;
class MyCustomBlock extends Block
{
// ...
public static function fake ( Faker Generator $ faker ): array
{
$ items = [];
foreach ( range ( 0 , $ faker -> numberBetween ( 0 , 10 )) as $ index )
{
$ items [] = [
' name ' => fake ()-> name (),
' html ' => $ faker -> randomHtml (),
];
}
return [
' text ' => fake ()-> text ( 255 ),
' items ' => $ items ,
];
}
// ...
} ด้วยการเพิ่มวิธี fake ลงในบล็อกของเรา ตอนนี้ EditorPhp จะรวม MyCustomBlock ด้วยเมื่อสร้างข้อมูลปลอม คุณสามารถเรียนรู้เพิ่มเติมได้จากเอกสารของ FakerPHP
มีคุณสมบัติบางอย่างของ Laravel ที่จะทำให้ชีวิตของคุณง่ายขึ้นนิดหน่อย
คุณสามารถใช้ EditorPhpCast เพื่อส่งแอตทริบิวต์ของโมเดลของคุณไปยังอินสแตนซ์ EditorPhp
use BumpCore EditorPhp Casts EditorPhpCast ;
use Illuminate Database Eloquent Model ;
class Post extends Model
{
protected $ casts = [
' content ' => EditorPhpCast::class,
];
}
// ...
$ post = Post:: find ( 1 );
// Content is `EditorPhp` instance in here.
echo $ post -> content -> render ();นอกจากนี้ หากคุณใช้ Cast คุณสามารถเข้าถึงโมเดลของคุณภายในอินสแตนซ์บล็อกได้:
use BumpCore EditorPhp Block Block ;
use App Models Post ;
class MyBlock extends Block
{
// ...
public static function render (): string
{
if ( $ this -> root -> model instanceof Post)
{
// Do the other thing.
}
}
// ...
}คุณสามารถเปลี่ยนโมเดลจากบล็อกได้
อินสแตนซ์ EditorPhp สามารถส่งคืนเป็นการตอบกลับได้ หากคำขอต้องการ JSON ก็จะเข้ารหัสด้วยตนเองเป็น JSON มิฉะนั้นจะถูกเรนเดอร์เป็น html
namespace App Http Controllers ;
use App Http Controllers Controller ;
use App Models Post ;
class ShowPostController extends Controller
{
public function __invoke ( Post $ post )
{
// Depending on the request it will return json or rendered html.
return $ post -> content ;
}
} คุณยังสามารถใช้อินสแตนซ์ EditorPhp เพื่อแสดงผลภายในมุมมองได้โดยตรง:
{{-- blog.show.blade.php --}}
< article >
< h1 > {{ $post -> title } } </ h1 >
< div > {{ $post -> content } } </ div >
</ article >จะต้องตรวจสอบสิ่งนี้ก่อนที่จะบันทึก
คุณสามารถสร้างบล็อกใหม่ได้ด้วยคำสั่ง block:make <name> :
php artisan make:block CustomImageBlock บล็อกใหม่จะถูกวางไว้ใต้ไดเรกทอรี app/Blocks
ยินดีบริจาค! หากคุณพบข้อบกพร่องหรือมีข้อเสนอแนะในการปรับปรุง โปรดเปิดปัญหาหรือสร้างคำขอดึงข้อมูล ด้านล่างนี้เป็นหลักเกณฑ์บางประการที่ต้องปฏิบัติตาม:
โปรดระบุคำอธิบายโดยละเอียดเกี่ยวกับการเปลี่ยนแปลงของคุณและปัญหาที่ได้รับการแก้ไข การมีส่วนร่วมของคุณจะได้รับการตรวจสอบ และอาจมีการแสดงความคิดเห็น ขอบคุณสำหรับความช่วยเหลือในการทำให้โครงการนี้ดีขึ้น!
