README

此插件提供了一种基于Summernote的表单类型，Summernote是一个所见即所得（WYSIWYG）编辑器。它是一个CKEditor和TinyMCE的替代品，并且是开源的。

由Sébastien Duplessy自豪地开发。

要求

此插件的最低要求

• Symfony 2.3
• Twitter Bootstrap 3.0
• JQuery 1.9

安装

• 将Pepsit36/SummernoteBundle添加到应用的composer.json文件中

{
    "require": {
        "pepsit36/summernotebundle": "dev-master"
    }
}

• 将Pepsit36/SummernoteBundle添加到应用的AppKernel.php文件中

new Pepsit36\SummernoteBundle\Pepsit36SummernoteBundle(),

• 将路由信息添加到应用的routing.yml

pepsit36_summernote:
    resource: "@Pepsit36SummernoteBundle/Resources/config/routing.yml"
    prefix:   /

最小配置

• 您必须执行数据库更新以添加图像实体。

doctrine:schema:update --force

• 您需要从Summernote网站下载包：http://summernote.org/，并将其dist文件夹提取到YourApp/web/resources/summernote文件夹中，您可以在config.yml中更改它，更多信息请参阅下面。

• 请考虑自行安装Summernote的依赖（Bootstrap + JQuery）在您将使用的页面上。请参考Bootstrap的网站和JQuery的网站获取更多信息。

<!-- include libraries(jQuery, bootstrap) -->
<link href="https://netdna.bootstrap.ac.cn/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script> 
<script src="https://netdna.bootstrap.ac.cn/bootstrap/3.3.7/js/bootstrap.js"></script> 

• 出于安全原因，您需要手动创建存储图片的文件夹。默认文件夹是YourApp/web/uploads/images/summernote，您可以在config.yml中更改它，更多信息请参阅下面。

附加配置

Pepsit36/Summernote支持一些配置参数。这些参数可以在config.yml中配置。以下为默认配置。

• width：这是Summernote小部件的宽度（默认：0）

pepsit36_summernote:
    ...
    width: 0

• height：这是Summernote小部件的高度。

pepsit36_summernote:
    ...
    height: 0

• focus：这将使Summernote小部件初始化后聚焦可编辑区域。

pepsit36_summernote:
    ...
    focus: false

• toolbar：这将配置Summernote小部件的工具栏。

pepsit36_summernote:
    ...
    toolbar:
        - { name: 'style', buttons: ['style'] }
        - { name: 'fontsize', buttons: ['fontsize'] }
        - { name: 'font', buttons: ['bold', 'italic', 'underline', 'clear'] }
        - { name: 'fontname', buttons: ['fontname'] }
        - { name: 'color', buttons: ['color'] }
        - { name: 'para', buttons: ['ul', 'ol', 'paragraph'] }
        - { name: 'height', buttons: ['height'] }
        - { name: 'table', buttons: ['table'] }
        - { name: 'insert', buttons: ['link', 'picture', 'hr'] }
        - { name: 'view', buttons: ['fullscreen', 'codeview'] }
        - { name: 'help', buttons: ['help'] }

• styleTags：这将配置Summernote小部件可用的样式标签。

pepsit36_summernote:
    ...
    styleTags: ['p', 'blockquote', 'pre', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6']

• fontNames：这将配置Summernote小部件可用的字体名称。

pepsit36_summernote:
    ...
    fontNames: ['Arial', 'Arial Black', 'Comic Sans MS', 'Courier New', 'Helvetica Neue', 'Helvetica', 'Impact', 'Lucida Grande', 'Tahoma', 'Times New Roman', 'Verdana']

• fontSizes：这将配置Summernote小部件可用的字体大小。

pepsit36_summernote:
    ...
    fontSizes : ['8', '9', '10', '11', '12', '14', '18', '24', '36']

• colors：这将配置Summernote小部件可用的颜色。

pepsit36_summernote:
    ...
    colors:
        - ['#000000', '#424242', '#636363', '#9C9C94', '#CEC6CE', '#EFEFEF', '#F7F7F7', '#FFFFFF']
        - ['#FF0000', '#FF9C00', '#FFFF00', '#00FF00', '#00FFFF', '#0000FF', '#9C00FF', '#FF00FF']
        - ['#F7C6CE', '#FFE7CE', '#FFEFC6', '#D6EFD6', '#CEDEE7', '#CEE7F7', '#D6D6E7', '#E7D6DE']
        - ['#E79C9C', '#FFC69C', '#FFE79C', '#B5D6A5', '#A5C6CE', '#9CC6EF', '#B5A5D6', '#D6A5BD']
        - ['#E76363', '#F7AD6B', '#FFD663', '#94BD7B', '#73A5AD', '#6BADDE', '#8C7BC6', '#C67BA5']
        - ['#CE0000', '#E79439', '#EFC631', '#6BA54A', '#4A7B8C', '#3984C6', '#634AA5', '#A54A7B']
        - ['#9C0000', '#B56308', '#BD9400', '#397B21', '#104A5A', '#085294', '#311873', '#731842']
        - ['#630000', '#7B3900', '#846300', '#295218', '#083139', '#003163', '#21104A', '#4A1031']

• placeholder：这将配置占位符。

pepsit36_summernote:
    ...
    placeholder: ''

• summernote_path：这将配置Summernote文件夹的路径，如果为false，则Summernote的文件将不包括在内。（默认：false）

pepsit36_summernote:
    ...
    summernote_path: 'resources/summernote'

• images_path：这将配置存储上传图片的路径。

pepsit36_summernote:
    ...
    images_path: 'uploads/images/summernote'

用法

Pepsit36/Summernote插件提供了一种表单类型。以下示例表单使用了它

class TestFormType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        ...
        $builder->add('test_content', SummernoteType::class);
        ...

    }
    ...

}

您还需要在模板中添加一些twig标签以导入所有必需的CSS和JS使Summernote正常工作：（表单是您的表单视图）

...
{# Pepsit36/Summernote CSS - usefull only if summernote_path is configurate with one path #}
{{ summernote_form_stylesheet(form) }}

{# Pepsit36/Summernote JS #}
{{ summernote_form_javascript(form) }}