toinou/summernote-bundle

为 Symfony 3 提供一个 Summernote 编辑器集成(所见即所得)。

此软件包的官方存储库似乎已不存在,因此该软件包已被冻结。

安装: 1,435

依赖项: 0

建议者: 0

安全: 0

星级: 0

观察者: 0

分支: 3

开放问题: 0

类型:symfony-bundle

dev-master 2018-05-27 10:47 UTC

This package is not auto-updated.

Last update: 2020-11-28 08:32:17 UTC


README

此软件包提供基于 Summernote 的表单类型,Summernote 是一个所见即所得编辑器(CKEditor 和 TinyMCE 的替代品,开源)。

我在我的 Symfony 3.3.11 项目上安装 Pepsit36 的 SummernoteBundle 时遇到了麻烦,所以我决定创建一个软件包并使用他的代码,以便在我的项目中使用。请注意,这个软件包不是我的,而是 Pepsit36 的作品的改编。

Pepsit36/SummernoteBundle

SensioLabsInsight

要求

此软件包的最低要求

  • Symfony 3.*
  • Twitter Bootstrap 3.0 或 4
  • JQuery 1.9(注意,如果您使用 JQuery3 slim,则此版本不支持 AJAX,您需要它)

安装

步骤 1:下载与安装 您有两种下载和安装软件包的方式

  • 第一种方式:通过编辑您的 composer.json 文件并执行更新
{
    "require": {
        "Toinou97434/summernotebundle": "dev-master"
    }
}

并执行 composer update

php composer.phar update
  • 第二种方式:通过直接使用 composer.phar
php composer.phar require Toinou97434/summernotebundle

Composer 会自动将软件包添加到您的 composer.json 文件中并下载它。

步骤 2:启用软件包 在您的 AppKernel.php 中添加以下行以激活软件包

<?php
// app/AppKernel.php

public function registerBundles()
{
    $bundles = array(
        // ...
        new Toinou\SummernoteBundle\ToinouSummernoteBundle(),
    );
}

步骤 3:导入 ToinouSummernoteBundle 路由文件

# app/config/routing.yml
toinou_summernote:
    resource: "@ToinouSummernoteBundle/Resources/config/routing.yml"
    prefix:   /

步骤 4:实体 此软件包使用 Doctrine ORM 系统进行图像上传系统。即使您不使用图像上传系统,您也必须编辑您的数据库...

您可以将 Entity/SummernoteImage.php 编辑为添加字段如 uploadedAtupdatedAt 或将其与 FOSUserBundle 结合,添加到您的用户类中。您可以提交您所做的所有更改到社区,欢迎您!编辑(或不编辑)类之后,您必须更新您的数据库模式

php bin/console doctrine:schema:udpate --dump-sql
php bin/console doctrine:schema:update --force

第一行不是必需的,但我强烈建议在强制更新数据库之前执行它... 这将防止出现任何问题

步骤 5:下载软件包 此软件包不包含 Summernote,您必须直接在 summernote 网站上 下载它。在解压缩存档后,将 dist 文件夹复制/粘贴到软件包或您的应用程序中想要的文件夹。通过使用模板中的 Assets 或 Assetic 添加它。或者您可以在您的 config.yml 中更改它(更多信息见下文)。

步骤 6:Bootstrap 和 JQuery Summernote 编辑器与 BootstrapJQuery 一起工作,您必须使用这些库来使编辑器工作。

步骤 7:上传文件夹 由于安全原因,您需要手动创建一个文件夹,用于存储图片。默认文件夹是 web/uploads/images/summernote,您可以在您的 config.yml 中更改它(更多信息见下文)。

软件包最终已安装到您的应用程序中!

使用方法

本组件提供了一种必须与textarea一起使用的表单类型。只需在您的表单中添加一个summernote类型即可。

// src/AppBundle/Form/YourFormType.php

namespace AppBundle\Form;

//...
use Toinou\SummernoteBundle\Form\Type\SummernoteType;

class YourFormType extends AbstractType
{
    /**
     * {@inheritdoc}
     */
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder->add( "yourField",SummernoteType::class ); //Symfony 3
    }
}

在您的twig模板中,您必须导入使summernote工作所需的CSS和JS。

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

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

配置

该组件附带可自定义的参数。您可以在app/config/config.yml文件中配置这些参数。初始化:通过在config.yml文件中添加toinou_summernote

  • 宽度和高:(默认:0)
toinou_summernote:
    width: 0
    height: 0
  • 焦点:这将在Summernote小部件初始化后聚焦到可编辑区域。
toinou_summernote:
    focus: false
  • 工具栏:这将配置Summernote小部件的工具栏。
toinou_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'] }
  • 样式标签:这将配置Summernote小部件可用的样式标签。
toinou_summernote:
    styleTags: ['p', 'blockquote', 'pre', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6']
  • 字体名称:这将配置Summernote小部件可用的字体名称。
toinou_summernote:
    fontNames: ['Arial', 'Arial Black', 'Comic Sans MS', 'Courier New', 'Helvetica Neue', 'Helvetica', 'Impact', 'Lucida Grande', 'Tahoma', 'Times New Roman', 'Verdana']
  • 字体大小:这将配置Summernote小部件可用的字体大小。
toinou_summernote:
    fontSizes : ['8', '9', '10', '11', '12', '14', '18', '24', '36']
  • 颜色:这将配置Summernote小部件可用的颜色。
toinou_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']
  • 占位符:这将配置占位符。
toinou_summernote:
    placeholder: ''
  • summernote_path:这将配置summernote文件夹的路径,如果为false,则不包含summernote的文件。(默认:false)
toinou_summernote:
    summernote_path: 'resources/summernote'
  • images_path:这将配置上传后图像存储的路径。
toinou_summernote:
    images_path: 'uploads/images/summernote'
  • 语言:这将配置summernote的语言。
toinou_summernote:
    language: 'fr_FR'

贡献

欢迎您贡献!