README

首先，您需要通过composer使用composer require verstka/php-sdk安装包

通过配置初始化

$verstkaBuilder = new \Verstka\EditorApi\Builder\VerstkaConfigBuilder(
    'API_KEY_FRsGhsgFGSG45d34',
    'SECRET_KEY_32ff2f23f32f',
    'aws-host.toexternal_storage.com',          // Optional, image storage host
    'https://verstka.org',                      // Optional, Verstka API url
    true,                                       // Optional, Debug mode
  );

$verstkaEditor  = $verstkaBuilder->build();

通过ENV初始化

$verstkaBuilder = new \Verstka\EditorApi\Builder\VerstkaEnvBuilder();
                          
$verstkaEditor  = $verstkaBuilder->build();

在项目根目录下设置.env文件，包含以下设置

verstka_apikey = "..."
verstka_secret = "..."
verstka_host = "https://verstka.org"

如果您不使用vlucas/phpdotenv或yiithings/yii2-dotenv或类似工具，则在创建Verstka新对象之前设置环境

putenv('verstka_apikey=...');
putenv('verstka_secret=...');
putenv('verstka_host=https://verstka.org');

附加参数

images_host - in case if you use relative images
and storage host different from callback url host

编辑文章

$sql = 'SELECT * FROM t_materials WHERE name = :name';
$article = static::getDatabase()->fetchOne($sql, ['name' => $material_id]);

$body = $is_mobile ? $article['mobile_html'] : $article['desktop_html'];

$custom_fileds = [
    'auth_user' => 'test',                                      //if you have http authorization on callback url
    'auth_pw' => 'test',                                        //if you have http authorization on callback url
    'fonts.css' => 'https://mydomain.com/static/vms_fonts.css', //if you use custom fonts set
    'mobile' => true                                            //if you open mobile version of the post,
    'user_id' => 123                                            //if you want to know the user who opened the editor when saving 
];

例如，然后只需

/// ....
$verstkaEditor  = $verstkaBuilder->build();

$verstka_url = $verstkaEditor->open(
    $material_id, 
    $body, 
    $is_mobile, 
    'https://mydomain.com/verstka/save', 
    $custom_fileds
);

保存文章

使用MaterialSaverInterface实现保存

并查看接口 \Verstka\EditorApi\Image\ImagesLoaderInterface，它将材质图片加载到您的存储中。

///  ....
$verstkaEditor = $verstkaBuilder->build();
$materialSaver = new MaterialSaver(); // your saver \Verstka\EditorApi\Material\MaterialSaverInterface

// Prepare data
$data = new \Verstka\EditorApi\Material\MaterialData($arrayData); // Material data from POST

return $verstkaEditor->save($materialSaver, $data);

使用旧回调API保存文章

///  ....
$verstkaEditor = $verstkaBuilder->build();
$materialSaver = new MaterialSaver(); // your saver \Verstka\EditorApi\Material\MaterialSaverInterface

// Prepare data
$data = new \Verstka\EditorApi\Material\MaterialData($arrayData); // Material data from POST

return $verstkaEditor->save(function(array|\Verstka\EditorApi\Material\MaterialDataInterface $data): bool
{

    $is_fail = false;
    $article_body = $data['article_body'];
    $article_static_dir_rel = sprintf('/upload/verstka/%s%s', $data['is_mobile'] ? 'm_':'', $data['material_id']);
    $article_static_dir_abs = sprintf('%s%s%s%s', WEBROOT, DIRECTORY_SEPARATOR, '/public/', $article_static_dir_rel);
    @mkdir($article_static_dir_abs,  0777, true);
    foreach ($data['images'] as $image_name => $imageTmpFilePath) {
        $is_renamed = rename($imageTmpFilePath, sprintf('%s/%s', $article_static_dir_abs, $image_name));
        $is_fail = $is_fail || !$is_renamed;
        $html_image_name_old = sprintf('/vms_images/%s', $image_name);
        $html_image_name_new = sprintf('%s/%s', $article_static_dir_rel, $image_name);
        if ($is_renamed) {
            $article_body = str_replace($html_image_name_old, $html_image_name_new, $article_body);
        }
    }
    
    if ($is_fail) {
        return false; //tell editor that save goes wrong
    }
    
    if ($data['is_mobile']) {
        $sql = 'update t_materials set mobile_html =  :article_body where name = :name;';
    } else {
        $sql = 'update t_materials set desktop_html = :article_body where name = :name;';
    }

    $db = Plugin::getDatabase();
    $saved = (bool)$db->fetchAffected($sql, ['article_body' => $article_body, 'name' => $data['material_id']]);
    $is_fail = $is_fail || !$saved;

    return !$is_fail;
}, $data);

使用自己的字体

您需要收集一个包含特定注释和字体嵌入base64的CSS文件，然后它们将自动出现在布局中。默认url /vms_fonts.css

CSS文件顶部需要指定默认字体，该字体将在创建新文本对象时设置。

/* default_font_family: 'formular'; */
/* default_font_weight: 400; */
/* default_font_size: 16px; */
/* default_line_height: 24px; */

进一步，对于每个@ font-face，需要注册包含字体名称和样式的注释。

/* font_name: 'Formular'; */
/* font_style_name: 'Light'; */

最终CSS文件

/* default_font_family: 'formular'; */
/* default_font_weight: 400; */
/* default_font_size: 16px; */
/* default_line_height: 24px; */

@ font-face {
    /* font_name: 'Formular'; */
    /* font_style_name: 'Light'; */
    font-family: 'formular';
    src: url (data: application / font-woff2;
    charset = utf-8;
    base64, KJHGKJHG . . .) format ('woff2'), url (data: application / font-woff;
    charset = utf-8;
    base64, KJHGKJHGJ . . .) format ('woff');
    font-weight: 300;
    font-style: normal;
}

@ font-face {
    /* font_name: 'Formular'; */
    /* font_style_name: 'Regular; */
    font-family: 'formular';
    src: url (data: application / font-woff2;
    charset = utf-8;
    base64, AAFEWDDWEDD . . .) format ('woff2'), url (data: application / font-woff;
    charset = utf-8;
    base64, AAFEWDDWEDD . . .) format ('woff');
    font-weight: 400;
    font-style: normal;
}

显示文章

文章的HTML代码应附有脚本的连接

<link href="//go.verstka.org/critical.css" rel="stylesheet">

<script type = "text / javascript">
    window.onVMSAPIReady = function (api) {
        api.Article.enable ({
            display_mode: 'default'
        });
    };
</script>

<script src="//go.verstka.org/api.js" async type="text/javascript"></script>

选项 options

所有参数都是可选的。

• observe_selector - 可能改变文章位置的元素的选择器。例如，可以推下文章的广告横幅的选择器。

如果无法编写单独的移动版本，请进一步参数

• display_mode - 在文章显示模式之间切换，请设置default;