broccoli-html-editor/broccoli-html-editor

GUI HTML Editor Library.

Saturday, July 28, 2018
by tomk79
Repository
3 Watchers
1 Stars
119 Installations

JavaScript
2 Dependents
0 Suggesters
2 Forks
1 Open issues
20 Versions
0 % Grown

The README.md

broccoli-html-editor

broccoli-html-editor は、GUIベースでHTMLを編集するブロックエディタライブラリです。断片化されたHTMLの部品(モジュール)をドラッグ＆ドロップ操作で組み合わせて、ウェブページを構成できます。, _(*1)

インストール - Install

$ composer require broccoli-html-editor/broccoli-html-editor

使い方 - Usage

サーバー側 - Server side (PHP)

/path/to/broccoli_api.php にAPIを設置する例です。, _(*2)

<?php
require_once('path/to/vendor/autoload.php');

$broccoli = new broccoliHtmlEditor\broccoliHtmlEditor();
$broccoli->init(
    array(
        'appMode' => 'web', // 'web' or 'desktop'. default to 'web'
        'paths_module_template' => array(
            'testMod1' => '/realpath/to/modules1/' ,
            'testMod2' => '/realpath/to/modules2/'
        ) ,
        'documentRoot' => '/realpath/to/www/htdocs/', // realpath
        'pathHtml' => '/path/to/your_preview.html',
        'pathResourceDir' => '/path/to/your_preview_files/resources/',
        'realpathDataDir' => '/realpath/to/www/htdocs/path/to/your_preview_files/guieditor.ignore/',
        'customFields' => array(
            // カスタムフィールドを実装します。
            // このクラスは、 `broccoliHtmlEditor\\fieldBase` を基底クラスとして継承します。
            // customFields のキー(ここでは custom1)が、フィールドの名称になります。
            'custom1' => 'broccoli_class\\field_custom1'
        ) ,
        'fieldConfig' => array(
            'image' => array( // image field に対する設定
                'filenameAutoSetter' => 'ifEmpty', // filenameAutoSetterの初期値を設定
            ),
        ),
        'bindTemplate' => function($htmls){
            $fin = '';
            $fin .= '<!DOCTYPE html>'."\n";
            $fin .= '<html>'."\n";
            $fin .= '    <head>'."\n";
            $fin .= '        <title>sample page</title>'."\n";
            $fin .= '    </head>'."\n";
            $fin .= '    <body>'."\n";
            $fin .= '        

'."\n";
            $fin .= $htmls['main']."\n";
            $fin .= '        

'."\n";
            $fin .= '        

'."\n";
            $fin .= $htmls['secondly']."\n";
            $fin .= '        

'."\n";
            $fin .= '    </body>'."\n";
            $fin .= '</html>';

            return $fin;
        },
        'log' => function($msg){
            // エラー発生時にコールされます。
            // msg を受け取り、適切なファイルへ出力するように実装してください。
            error_log('[ERROR HANDLED]'.$msg, 3, '/path/to/error.log');
        },
        'userStorage' => function($key, $val = null){
            // ユーザー固有の情報を読み書きします。
            $args = func_get_args();
            if( count($args) == 1 ){
                // 読み取りとしてコールされる場合、引数が1つだけ提供されます。
                return file_get_contents('/path/to/userdir/'.urlencode($key).'.json');
            }else{
                // 書き込みの要求の場合、引数が2つ提供されます。
                return file_put_contents('/path/to/userdir/'.urlencode($key).'.json', $val);
            }
        },
        'noimagePlaceholder' => '/path/to/noimage-placeholder.png',
        'extra' => array(
            // 任意のデータをセットします。
            // セットされたデータは、モジュールテンプレートやカスタムフィールドから参照することができます。
            'foo' => 'bar',
        ),
    )
);


$rtn = $broccoli->gpi(
    $_REQUEST['api'],
    json_decode($_REQUEST['options'], true)
);
echo json_encode($rtn);
exit;

APIの一覧はこちらを参照ください。, _(*3)

PHPの要件

PHP 7.3 以上
- mbstring PHP Extension
- JSON PHP Extension

モジュールやカスタムフィールドなど他のパッケージとの構成によって、いくつかの要件が追加される場合があります。依存パッケージのシステム要件も確認してください。, _(*4)

クライアント側 - Client side JavaScript

プレビュー用ウェブサーバー - Web Server for preview

クロスオリジンで動作する場合は、編集画面上のプレビューHTMLの最後に、次のスクリプトコードを埋め込む必要があります。同一オリジンで動作させる場合はこの手順は必要ありません。, _(*5)

'http://127.0.0.1:8080' の箇所には、broccoli-html-editor の編集画面が置かれるサーバーの origin を設定してください。, _(*6)

<script data-broccoli-receive-message="yes">
window.addEventListener('message',(function() {
return function f(event) {
if(!event.data.scriptUrl){return;}
if(event.origin!='http://127.0.0.1:8080'){return;}// <- check your own server's origin.
var s=document.createElement('script');
document.querySelector('body').appendChild(s);s.src=event.data.scriptUrl;
window.removeEventListener('message', f, false);
}
})(),false);
</script>

APIの一覧はこちらを参照ください。, _(*7)

モジュールの開発 - developing HTML module

coming soon., _(*8)

カスタムフィールドの開発 - developing custom field

サーバー側、クライアント側ともに、オプション customFields[fieldName] に定義します。, _(*9)

このメソッドは、サーバーサイドは broccoliHtmlEditor\fieldBase を、クライアントサイドは client/src/apis/fieldBase.js を、基底クラスとして継承します。, _(*10)

server side
- bind($fieldData, $mode, $mod) - データをバインドする
- resourceProcessor($path_orig, $path_public, $resInfo) - リソースを加工する
- gpi($options) - GPI
client side
- normalizeData(fieldData, mode) - データを正規化する
- mkPreviewHtml(fieldData, mod, callback) - プレビュー用の簡易なHTMLを生成する
- mkEditor(mod, data, elm, callback) - エディタUIを生成
- focus(elm, callback) - エディタUIにフォーカス
- duplicateData(data, callback) - データを複製する
- extractResourceId(data, callback) - データから使用するリソースのリソースIDを抽出する
- validateEditorContent(elm, data, mod, callback) - エディタUIで編集した内容を検証する
- saveEditorContent(elm, data, mod, callback, options) - エディタUIで編集した内容を保存
- callGpi(options, callback) - GPIを呼び出す

プラグインの種類と `broccoli.json`

broccoli-html-editor のプラグインには、 モジュール と フィールド があります。アプリケーションがこれらのパッケージを効率的に利用するため、各パッケージのルートディレクトリに broccoli.json を配置し、パッケージに関する情報を記述します。, _(*11)

モジュールの例

{
    "id": "foo-bar-elements",
    "name": "Foo Bar Elements",
    "type": "module",
    "path": "path/to/modules/"
}

フィールドの例

{
    "id": "foo-bar-field",
    "name": "Foo Bar Field",
    "type": "field",
    "backend": {
        "class": "myNamespace\\myClassName"
    },
    "frontend": {
        "file" : "path/to/dist/broccoli-field-foobar.js",
        "function" : "window.BroccoliFieldFooBar"
    }
}

データフォーマット

Data Format を参照してください。, _(*12)

for developer

build

$ npm run prod

build with watching edit change

$ npm run watch

server up

node.js

$ npm start

PHP

$ composer start

test

node.js

$ npm test

PHP

$ composer test

更新履歴 - Change log