locaine/lcn-wysihtml5-bundle

使用 WYSIHTML5 和 HTMLPurifier 库的 WYSIWYG 表单类型,适用于 Symfony2

安装次数: 2,372

依赖: 0

建议: 0

安全性: 0

星标: 2

关注者: 3

分支: 0

开放性问题: 1

语言:JavaScript

类型:symfony-bundle

1.2.0 2017-08-03 09:23 UTC

This package is not auto-updated.

Last update: 2024-09-24 18:08:05 UTC


README

基于 wysihtml 和从 WYSIHTML5 分支出的 WYSIWYG-Editor 表单小部件,适用于 Symfony2。MIT 许可证。

安装

步骤 1: 安装依赖

安装所需的 LcnIncludeAssetsBundle

步骤 2: 下载 Bundle

打开命令行,进入您的项目目录,并执行以下命令以下载此 Bundle 的最新稳定版本

$ composer require locaine/lcn-wysihtml5-bundle "~1.0"

此命令需要您已全局安装 Composer,如 Composer 文档中的 安装章节 所述。

步骤 3: 启用 Bundle

然后,通过在您的项目 app/AppKernel.php 文件中添加以下行来启用该 Bundle

<?php
// app/AppKernel.php

// ...
class AppKernel extends Kernel
{
    public function registerBundles()
    {
        $bundles = array(
            // ...

            new Lcn\WYSIHTML5Bundle\LcnWYSIHTML5Bundle(),
        );

        // ...
    }

    // ...
}

用法

在您的表单类中,当您想输出 WYSIWYG-Editor 时,设置字段类型为 "lcn_wysihtml5"。

$form = $this->createFormBuilder($entity)->add('your_html_field', 'lcn_wysihtml5');

这样就完成了。

配置

您可以通过在您的 app/config/parameters.yml 或 app/config/config.yml 文件中覆盖它们来自定义默认设置。

可用的编辑器命令

parameters:
    # configure the editor commands
    lcn_wysihtml5.commands:
        - { command: bold }
        - { command: italic }
        - { command: insertUnorderedList }
        - { command: insertOrderedList }
        - { command: formatBlock, value: h1 }
        - { command: formatBlock, value: h2 }

使用自定义样式表和 JavaScript 进行高级自定义

您可以通过 wysihtml 编辑器提供的任何配置来配置包含的资产。有关更多详细信息,请参阅 文档

parameters:
    # stylesheets get included directly in the web page with the form widget
    lcn_wysihtml5.stylesheets.controls:
        - /bundles/lcnwysihtml5/dist/themes/basic/controls.css

    # stylesheets get included in the editor's sandboxed iframe
    # and should be included when outputting the generated html code.
    # you might want to add some base stylsheets from your own theme
    lcn_wysihtml5.stylesheets.content:
        - /bundles/lcnwysihtml5/dist/themes/basic/content.css

    lcn_wysihtml5.parser_rules: /bundles/lcnwysihtml5/dist/themes/basic/parser_rules.js

自定义 HTMLPurifier 选项以进行服务器端清理

parameters:
    lcn_wysihtml5.purifier_config:
        'Attr.AllowedClasses':
            - wysiwyg-color-primary
            - wysiwyg-color-secondary
            - wysiwyg-float-left
            - wysiwyg-float-right
            - wysiwyg-clear-left
            - wysiwyg-clear-right

自定义现有颜色

编辑器使用类名应用预定义的颜色

您需要调整 css 文件中的颜色(设置您自己的主题)

parameters:
    lcn_wysihtml5.stylesheets.content:
        - /bundles/lcnwysihtml5/dist/themes/basic/content.css

此样式表会自动包含在编辑器中。然而,您必须手动将此样式表包含在您输出 HTML 代码的页面上

<link rel="stylesheet" href="/bundles/lcnwysihtml5/dist/themes/basic/content.css">

添加或删除颜色

配置编辑器工具栏中可用的颜色

parameters:
    # configure the editor commands
    lcn_wysihtml5.commands:
        ...
        - { command: foreColor, values: [primary, secondary] }

在您的自定义解析器规则集中配置前端验证中允许的颜色类名

parameters:
    lcn_wysihtml5.parser_rules: /bundles/lcnwysihtml5/dist/themes/basic/parser_rules.js

使用 HTMLPurifier 配置服务器端验证中允许的颜色类名

parameters:
    lcn_wysihtml5.purifier_config:
        'Attr.AllowedClasses':
            - wysiwyg-color-primary
            - wysiwyg-color-secondary
            ...