この海外のオープンソースフレームワークを使用すると、独自のページエディターを簡単に構築できます。

[[416380]]

私のいつもの書き方に従って、誰もが効率的かつ選択的に読んで学習できるように、記事の概要を以下にリストします。

GrapesJS フレームワークの基本紹介
GrapesJS を使って Web エディタを構築する方法
craft.js は、GrapesJS 上に構築されたオープンソースの Web ページエディターです。
その他のビジュアルエディタの推奨事項

基本的な紹介

chrome-capture.gif

一見すると、単なるページ/HTMLエディタだと思うかもしれませんが、実際にはそれだけではありません。GrapesJSは汎用性の高いウェブページ構築フレームワークで、ドラッグ＆ドロップに対応したHTML風の構造を持つビルダーを簡単に作成できます。GrapesJSはウェブページだけにとどまりません。HTML風の構造を使用するシナリオには、以下のようなものがあります。

ニュースレター（例：MJML）
ネイティブモバイルアプリケーション（React Nativeなど）
ネイティブデスクトップアプリケーション (Vuido など)
PDF（例：React PDF）

さらに、GrapesJS に含まれる機能とツールにより、使いやすいエディタを作成できます。これにより、ユーザーはコーディングの知識がなくても、複雑な HTML 風のテンプレートを作成できます。

GrapesJS の Web サイトには、独自の Web エディターをすばやく作成するために参照できる 3 つの異なるシナリオ例も提供されています。

ウェブページビルダー
ニュースレタービルダー
MJML を使用したニュースレタービルダー

これらのフレームワークの実装原理については、以前の記事で多くの分析と設計を行ってきました。ご興味のある方は、ぜひご参照ください。次に、インストール方法と使用方法を見ていきましょう。

GrapesJS を使って Web エディタを構築する方法

1. インストール

umd メソッドを使用してインポートできます。

 <link rel= "スタイルシート" href= "//unpkg.com/grapesjs/dist/css/grapes.min.css" >
 <script src= "//unpkg.com/grapesjs" ></script>

npm 経由でインストールすることもできます:

 npm と grapesjs -S

次のようにしてプロジェクトにインポートできます。

 'grapesjs/dist/css/grapes.min.css'をインポートします。
からgrapesjsをインポート  「ブドウjs 」

2. 最初のデモ

インストール後、基本的なページ編集デモを実装してみましょう。

クロームキャプチャ (1).gif

関連するコードは次のとおりです。

 <html>
 <ヘッド>
 <link rel= "スタイルシート" href= "//unpkg.com/grapesjs/dist/css/grapes.min.css" >
 <script src= "//unpkg.com/grapesjs" ></script>
 <スタイル>
 #gjs {
境界線: 3px 実線 #444;
 }
 .gjs-cv-canvas {
上: 0;
幅: 100%;
高さ: 100%;
 }
 </スタイル>
 </head>
 <本文>
 <div id= "gjs" >
 <h1>Hello World コンポーネント!</h1>
 </div>
 <スクリプト>
 const エディター = grapesjs.init({
コンテナ: '#gjs '
 // オプションの`components: '<h1>Hello World Component!</h1>'も使用できます。
 fromElement: true 、
 // エディターのサイズ
高さ: '300px '
幅: '自動'
 // ストレージ管理を無効にする方法については、次の記事で説明します。
ストレージマネージャー: false 、
パネル: { デフォルト: [] },
 });
 </スクリプト>
 </本文>
 </html>

これでシンプルなエディタが作成されます。簡単でしょう？次はもっと強力な機能を見てみましょう。

3. コンポーネントの追加と定義

ウェブページエディタは、ユーザーがページをより簡単に作成できるように、豊富なコンポーネントセットを提供する必要があることは周知の事実です。同様に、Grapes.jsは様々なカスタムコンポーネントの追加をサポートし、よく使われる基本コンポーネントも含まれています。デモを見てみましょう。

クロームキャプチャ（2）.gif

上記のデモから、ブロック、テキスト、画像という3つの基本コンポーネントが追加されていることがわかります。基本的な実装コードは次のとおりです。

 const エディター = grapesjs.init({
 // ...その他の構成
ブロックマネージャー: {
追加先: '#ブロック'
ブロック: [
 {
 id: 'セクション'
ラベル: '<b>セクション</b>' 、
属性: { クラス: 'gjs-block-section' },
コンテンツ: ` <セクション>
 <h1>H5-ドアリング</h1>
 <div>モジュール方式で H5 ページを構築する</div>
 </セクション>
 }, {
 id: 'テキスト'
ラベル: 'テキスト'
コンテンツ: '<div data-gjs-type="text">私の赤ちゃん</div>' 、
 }, {
 id: '画像'
ラベル: '画像'
選択: true 、
コンテンツ: { タイプ: '画像' },
アクティブ化: true
 }
 ]
 },
 });

コードを見ると、`blockManager` の `blocks` プロパティに指定されたコンポーネントを追加するだけで済むことがわかります。コンポーネントを動的に追加することも可能です。

 editor.BlockManager.add ( '私のブロックID ' , {
 // ...ラベルなどのその他の設定
コンテンツ： {
タグ名: 'div '
ドラッグ可能: false 、
属性: { '何らかの属性' : '何らかの値' },
コンポーネント: [
 {
タグ名: 'span '
コンテンツ: '<b>DooringX</b>' 、
 }, {
タグ名: 'div '
コンポーネント: '<span>無限の可能性</span> '
 }
 ]
 }
 })

コンポーネント構成の詳細なドキュメントについては、「Grapes.js コンポーネントの仕組み」のドキュメントを参照してください。

画像.png

4. 機能パネルを追加する

単にコンポーネントを追加するだけでは不十分です。優れたエディターには、さまざまなユーザーのニーズを満たすためのさまざまな機能ボタンも必要です。

キャンバスとカスタムコンポーネントが用意できたので、ボタン付きの機能パネルを作成する方法を見てみましょう (Panels API を使用)。

クロームキャプチャ（3）.gif

上部には 3 つの機能ボタンがあります。

コンポーネントの境界線を表示しますか?
ソースコードを表示
JSONを表示

まず、機能パネルを表示するために使用する要素を定義する必要があります (スタイルはカスタマイズできます)。

 <div クラス = "panel__top" >
 <div クラス = "panel__basic-actions" ></div>
 </div>

次に、マウント機能パネルを定義します。

 editor.Panels.addPanel({
 id: 'パネルトップ'
 el: '.panel__top' ,
 });
 editor.Panels.addPanel({
 id : '基本アクション'
 el: '.panel__basic-actions' ,
ボタン: [
 {
 id: '可視性'
アクティブ: true
クラス名: 'btn-toggle-borders' ,
ラベル: '<u>B</u> '
コマンド: 'sw-visibility' ,
 }, {
 id: 'エクスポート'
クラス名: 'btn-open-export' ,
ラベル: 'Exp '
コマンド: 'export-template' ,
コンテキスト: 'エクスポートテンプレート' 、
 }, {
 id: 'show-json '
クラス名: 'btn-show-json' ,
ラベル: 'JSON '
コンテキスト: 'show-json '
コマンド(エディター) {
 editor.Modal.setTitle( 'コンポーネントJSON' )
 .setContent(`<textarea style= "幅:100%; 高さ: 250px;" >
 ${JSON.stringify(editor.getComponents())}
 </textarea>`)
 。開ける（）;
 },
 }
 ],
 });

さらに多くの機能を定義することができます。それらの使用方法については、ドキュメントを参照してください。

5. レイヤー管理パネルを追加する

ウェブ要素を扱う際によく目にするツールの一つに、レイヤーマネージャーがあります。ツリー構造になっており、ページ要素を簡単に管理できます。レイヤーマネージャーを有効にするには、レンダリングする場所を指定するだけです。

 const エディター = grapesjs.init({
 // ...
レイヤーマネージャー: {
追加先: '.layers-container'  
 },
 // サイド パネル レイヤー マネージャーとしてデフォルトのパネルを定義できます。
パネル: {
デフォルト: [{
 id: 'レイヤー'
 el: '.panel__right' ,
 // 定義パネルをドラッグできますか?
サイズ変更可能: {
最大寸法: 350,
 minDim: 200,
 tc: 0,
 cl: 1, // 左側はドラッグ可能
cr: 0,
 bc: 0,
 keyWidth: 'flex-basis' 、
 },
 }]
 }
 });

効果は以下のとおりです。

クロームキャプチャ (4).gif

右側にレイヤーパネルが表示され、ページ上の要素を簡単に管理できます。

6. スタイル設定パネルを追加する

スタイルパネルも非常にシンプルです。まずは対応するコンテナーを定義しましょう。

 <div クラス = "panel__right" >
 <div クラス = "レイヤー コンテナ" ></div>
 <div クラス = "スタイルコンテナ" ></div>
 </div>

次に、対応する構成スクリプトを初期化します。

 const エディター = grapesjs.init({
 // ...
パネル: {
デフォルト: [
 // ...
 {
 id: 'パネルスイッチャー' 、
 el: '.panel__switcher' ,
ボタン: [{
 id: 'show-layers' ,
アクティブ: true
ラベル: 'レイヤー'
コマンド: 'show-layers' ,
 // 一度有効にすると、オフにすることができなくなります 
切り替え可能: false 、
 }, {
 id: 'show-style' 、
アクティブ: true
ラベル: 'スタイル'
コマンド: 'show-styles' ,
切り替え可能: false 、
 }],
 }
 ]
 },
セレクタマネージャー: {
追加先: '.styles-container'  
 },
スタイルマネージャー: {
 appendTo: '.styles-container' ,
セクター: [{
名前: 'ディメンション'
オープン：偽、
ビルドプロパティ: [ 'width' , 'min-height' , 'padding' ],
プロパティ: [
 {
タイプ: '整数'
名前: '幅'
プロパティ: 'width' 、
単位: [ 'px' , '%' ],
デフォルト: 'auto' 、
最小: 0,
 }
 ]
 },{
名前: 'Extra '
オープン：偽、
 buildProps: [ 'background-color' , 'box-shadow' , 'custom-prop' ],
プロパティ: [
 {
 id: 'カスタムプロパティ' 、
名前: 「カスタムラベル」
プロパティ: 'font-size' 、
タイプ: '選択'
デフォルト: '32px' 、
オプション: [
 { 値: '12px' 、名前: 'Tiny' },
 { 値: '18px' 、名前: '中' },
 { 値: '32px' 、名前: '大きい' },
 ],
 }
 ]
 }]
 },
 }); 
 
 // 命令を定義する
editor.Commands.add ( 'show-layers' ,{
 getRowEl(editor) { editor.getContainer().closest( '.editor-row' );を返します。 },
 getLayersEl(row) { row.querySelector( '.layers-container' )を返す}, 
 
実行(編集者、送信者) {
 const lmEl = this.getLayersEl(this.getRowEl(エディター));
 lmEl.style.display = '' ;
 },
 stop(編集者、送信者) {
 const lmEl = this.getLayersEl(this.getRowEl(エディター));
 lmEl.style.display = 'なし' ;
 },
 });
 editor.Commands.add ( 'show-styles' , {
 getRowEl(editor) { editor.getContainer().closest( '.editor-row' );を返します。 },
 getStyleEl(row) { row.querySelector( '.styles-container' )を返す}, 
 
実行(編集者、送信者) {
 const smEl = this.getStyleEl(this.getRowEl(エディター));
 smEl.style.display = '' ;
 },
 stop(編集者、送信者) {
 const smEl = this.getStyleEl(this.getRowEl(エディター));
 smEl.style.display = 'なし' ;
 },
 });

設定後の効果を見てみましょう。

クロームキャプチャ (5).gif

7. さらなる使用方法のデモンストレーション

上記の機能に加えて、次のことも実現できます。

応答モード（PC、モバイル、iPad）を定義します。
データの保存と読み込みのモードを設定します。
カスタムテーマ
国際化されたi18nサポート

ここでは詳細には触れませんが、設定後のデモを見てみましょう。

chrome-capture (6).gif

craft.js は、GrapesJS 上に構築されたオープンソースの Web ページエディターです。

GrapesJSには、探索すべき興味深い機能が数多くあります。次に、GrapesJSの二次ラッパーであるcraft.jsというオープンソースのエディターフレームワークを紹介します。

クロームキャプチャ (7).gif

プラグインを通して独自のエディタを構築できます。以下はReactでの適用例です。

 {エディター、フレーム、キャンバス、セレクター}をインポートします  "@craftjs/core" ;
 // この記事コンポーネントを定義する
{useNode}をインポートする  "@craftjs/core" ; 
 
 const TextComponent = ({text}) => {
 const { コネクタ: {ドラッグ} } = useNode(); 
 
戻る（
 <div ref={ドラッグ}>
 <h2>{テキスト}
 </div>
 ）
 } 
 
 // エディターを初期化する
const App = () => {
戻る（
 <div>
 ＜編集者＞
 // 編集可能な領域
        <フレームリゾルバ={TextComponent, Container}>
 <キャンバス>
 <TextComponent text= "フロントエンド開発についての楽しいトーク - Xu Xiaoxi" />
 </キャンバス>
 </フレーム>
 </編集者>
 </div>
 ）
 }

その他のビジュアルエディタの推奨事項

h5-Dooring | H5エディター、モジュール形式でH5ページを構築
v6.dooring | ビジュアル大画面セットアップソリューション
craft | Reactベースのドラッグアンドドロップページジェネレーター
dooringx-lib | ビジュアルドラッグアンドドロッププラットフォームを迅速かつ効率的に構築

やっと

今後、データ可視化とエンジニアリングの分野で、より実用的なオープンソースプロジェクトやフレームワークをリリースしていく予定です。ご質問やご要望がございましたら、お気軽にご連絡ください。

この記事はWeChat公式アカウント「Fun Talk Front-End」から転載したものです。以下のQRコードからフォローできます。転載の許可については、「Fun Talk Front-End」公式アカウントまでお問い合わせください。

DUICUO