README

提供 Pickles 2 的内容编辑接口。

用法

服务器端（PHP）

<?php
/**
 * api.php
 */
require_once('vendor/autoload.php');

$px2ce = new pickles2\libs\contentsEditor\main();
$px2ce->init(array(
	'target_mode' => 'page_content', // <- 編集対象のモード ('page_content' (default) or 'theme_layout')
	'page_path' => '/path/to/page.html', // <- 編集対象ページのパス (target_mode=theme_layout のとき、 `/{theme_id}/{layout_id}.html` の形式)
	'appMode' => 'web', // 'web' or 'desktop'. default to 'web'
	'entryScript' => '/realpath/to/.px_execute.php', // Pickles 2 のエンドポイント
	'customFields' => array(
		// カスタムフィールドのサーバーサイドスクリプト。クラス名(ネームスペース含む)を指定します。
		// この関数は、`broccoliHtmlEditor\fieldBase` を基底クラスとして継承します。
		// customFields オブジェクトのキー(ここでは custom1)が、フィールドの名称になります。
		'custom1' => 'test_php_field_custom1',
	) ,
	'log' => function($msg){
		// ログ情報出力時にコールされます。
		// $msg を受け取り、適切なファイルへ出力するように実装してください。
		file_put_contents('/path/to/px2ce.log', $msg);
	},
	'commands' => array(
		'php' => array(
			// PHPコマンドのパスを表すオブジェクト
			// または、 文字列で '/path/to/php' とすることも可 (この場合、 php.ini のパスは指定されない)
			'bin' => '/path/to/php',
			'ini' => '/path/to/php.ini'
		)
	)
));

if($_GET['client_resources'] ?? null){
	$value = $px2ce->get_client_resources(__DIR__.'/caches/');
	header('Content-type: text/json');
	echo json_encode($value);
	exit;
}
$value = $px2ce->gpi( json_decode( $_REQUEST['data'] ) );
header('Content-type: text/json');
echo json_encode($value);
exit;

客户端

<div id="canvas"></div>

<!--
エディタが利用する CSS や JavaScript などのリソースファイルがあります。
`$px2ce->get_client_resources()` からリソースの一覧を取得し、読み込んでください。
-->

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

$px2ce = new pickles2\libs\contentsEditor\main();
$px2ce->init( /* any options */ );

$resources = $px2ce->get_client_resources();
foreach($resources->css as $css_file){
	echo('<link rel="stylesheet" href="'.htmlspecialchars($css_file).'" />');
}
foreach($resources->js as $js_file){
	echo('<script src="'.htmlspecialchars($js_file).'"></script>');
}
?>

<script>
var pickles2ContentsEditor = new Pickles2ContentsEditor();
pickles2ContentsEditor.init(
	{
		'page_path': '/path/to/page.html' , // <- 編集対象ページのパス
		'elmCanvas': document.getElementById('canvas'), // <- 編集画面を描画するための器となる要素
		'preview':{ // プレビュー用サーバーの情報を設定します。
			'origin': 'http://127.0.0.1:8081'
		},
		'lang': 'en', // language
        'appearance': 'dark', // light, dark, auto(default)
		'customFields': {
			// この設定項目は、 broccoli-html-editor に渡されます
			'custom1': function(broccoli){
				// カスタムフィールドを実装します。
				// この関数は、fieldBase.js を基底クラスとして継承します。
				// customFields オブジェクトのキー(ここでは custom1)が、フィールドの名称になります。
			}
		},
		'gpiBridge': function(input, callback){
			// GPI(General Purpose Interface) Bridge
			// broccoliは、バックグラウンドで様々なデータ通信を行います。
			// GPIは、これらのデータ通信を行うための汎用的なAPIです。
			$.ajax({
				"url": '/your/api/path',
				"type": 'post',
				'data': {'data':JSON.stringify(input)},
				"success": function(data){
					callback(data);
				}
			});
			return;
		},
		'clipboard': {
			// クリップボード操作の機能を拡張できます。
			'set': function( data, type ){
				// クリップボードにコピーする機能を実装してください。
			},
			'get': function( type ){
				// クリップボードからデータを取得する機能を実装してください。
			}
		},
		'complete': function(){
			alert('完了しました。');
		},
		'onOpenFilesDirectory': function(){
			alert('リソースディレクトリを開きます。');
		},
		'onClickContentsLink': function( uri, data ){
			alert('編集: ' + uri);
		},
		'onMessage': function( message ){
			// ユーザーへ知らせるメッセージを表示する
			console.info('message: '+message);
		}
	},
	function(){
		// スタンバイ完了したら呼び出されるコールバックメソッドです。
		console.info('standby!!');
	}
);
</script>

更新日志 - 变更记录

pickles2/lib-px2-contents-editor v2.2.5 (2024年9月10日)

• 在块编辑器中，降低了窗口大小调整时的负担。

pickles2/lib-px2-contents-editor v2.2.4 (2024年7月21日)

• 在选择追加器的情况下执行“插入”操作将引发错误的bug已修复。

pickles2/lib-px2-contents-editor v2.2.3 (2024年3月20日)

• 支持内容模板的缩略图显示。

pickles2/lib-px2-contents-editor v2.2.2 (2023年11月13日)

• 修复了在Broccoli编辑主题布局时，自定义CSS/JS加载代码不输出的bug。
• 捆绑了暗黑模式的样式。
• 添加了 appearance 选项。

pickles2/lib-px2-contents-editor v2.2.1 (2023年9月24日)

• 对 $px->authorizer 的权限管理进行了适配。当没有权限时，将编辑代码进行清理。

pickles2/lib-px2-contents-editor v2.2.0 (2023年8月29日)

• 停止提供NodeJS版本。
• 默认编辑器：改进了预览中链接点击时的行为。
• 默认编辑器：修复了在预览中包含服务器内部错误时，预览重新加载失败后无法恢复的问题。
• 添加了内容模板功能。
• 修复了通过babycorn启动的bug。

pickles2-contents-editor v2.1.8 (2023年5月1日)

• 修复了在Broccoli编辑界面中，实例树视图的切换按钮设计的问题。

pickles2-contents-editor v2.1.7 (2023年4月22日)

• 修复了从未定义的路径进行内容编辑的bug。

pickles2-contents-editor v2.1.6 (2023年3月11日)

• 默认编辑器：改善了图像文件对话框的缩略图预览UI。
• 可以从未定义的路径初始化内容编辑。
• 改善了主题编辑模式的行为。

pickles2-contents-editor v2.1.5 (2023年2月11日)

• 修复了在Broccoli编辑主题布局时可能出现的“请求URI过长”的问题。
• 默认编辑器中，内容更改时自动保存。
• 默认编辑器中，可以通过 Cmd + Shift + S（在Windows中为 Ctrl + Shift + S）保存并退出。
• 默认编辑器中，可以插入图像文件。
• 其他一些小修正。

pickles2-contents-editor v2.1.4 (2022年12月29日)

• 更新了依赖包。
• 可以通过字段ID指定自定义字段，以便复制现有设置。
• 修复了在Broccoli编辑界面中，使用 [contenteditable] 的字段中，键盘操作（如退格键）不起作用的问题。
• 添加了 onOpenFilesDirectory 选项。

pickles2-contents-editor v2.1.3 (2022年11月3日)

• 默认编辑器在保存时恢复了预览的滚动位置。
• 修复了预览内容脚本的相关bug。
• 改善了编辑界面布局。
• 适配了Broccoli v1.0.x。
• 在Broccoli编辑界面中添加了“插入”按钮。
• 其他一些小修正。

pickles2-contents-editor v2.1.2 (2022年6月5日)

• 改善了小屏幕的布局。

pickles2-contents-editor v2.1.1 (2022年5月22日)

• 修复了当 $conf->path_controot 设置为深路径时，可能会选择不同的编辑对象的问题。
• 其他一些小修正。

pickles2-contents-editor v2.1.0 (2022年1月8日)

• 将支持的PHP版本更改为 >=7.3.0。
• 适配了PHP 8.1。

pickles2-contents-editor v2.0.15 (2022年1月4日)

• 适配了broccoli-field-table v0.3系列。

pickles2-contents-editor v2.0.14 (2021年11月26日)

• 适配了Broccoli v0.5系列。

pickles2-contents-editor v2.0.13 (2021年8月21日)

• 进行了性能改进。
• 进行了UI改进。
• 其他内部代码的细小修正。

pickles2-contents-editor v2.0.12 (2020年2月21日)

• 更新：Broccoli v0.4.x
• 默认编辑器中，可以直接拖放资源文件。
• 其他一些小修正。

pickles2-contents-editor v2.0.11 (2020年8月12日)

• 默认编辑器中，可以切换行的换行模式。
• Broccoli编辑器中，可以更改视图端口大小。
• Broccoli编辑器中，可以将选定的实例输出为JSON文件。
• Broccoli编辑器适配了新的设置项 fieldConfig。
• Broccoli编辑器适配了新的设置项 userStorage。
• Broccoli编辑器适配了新的设置项 droppedFileOperator。

pickles2-contents-editor v2.0.10 (2020年1月2日)

• 适配了PHP 7.4。

pickles2-contents-editor v2.0.9 (2019年12月13日)

• 当预览加载超过30秒时，将触发超时并强制切换到编辑界面。

pickles2-contents-editor v2.0.8 (2019年8月11日)

• 调整了内部库结构。
• 修复了触摸设备上滚动的问题。

pickles2-contents-editor v2.0.7 (2019年7月10日)

• 在编辑中的预览中添加了GET参数 PICKLES2_CONTENTS_EDITOR。
• 自动搜索并加载 vendor 目录中的自定义字段。
• 在Broccoli编辑器模式中编辑主题时，可以编写自定义CSS和JavaScript。

pickles2-contents-editor v2.0.6 (2019年6月15日)

• 修复了模块面板显示大小略有偏差的问题。
• 可以取消创建内容。

许可协议

MIT许可协议

作者

• Tomoya Koyanagi tomk79@gmail.com
• 网站: https://www.pxt.jp/
• 推特：@tomk79 https://twitter.com/tomk79/