locaine / lcn-wysihtml5-bundle
使用 WYSIHTML5 和 HTMLPurifier 库的 WYSIWYG 表单类型,适用于 Symfony2
1.2.0
2017-08-03 09:23 UTC
Requires
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 ...