让ueditor编辑器作为formtype直接引用

ueditor编辑器还是很适合中文用户的，尤其在网站或者管理后中编辑富文本，但是如果你每次都手动添加到symfony真的不智慧，所以我们使用symfony的formtype方式封装他，以后使用起来只需要添加’ueditor‘就可以显示出整个编辑器会节省我们工作中的时间，也很好的体现出symfony的友好和强大。

前期准备工作

1.首先创建一个 NlcUeditorBundle

php app/console generate:bundle --namespace=Nlc/UeditorBundle

1	php app/console generate:bundle --namespace=Nlc/UeditorBundle

2.创建一个entity，添加title和content字段，content字段为text类型

php app/console generate:doctrine:entity --entity=NlcUeditorBundle:Xnews

1	php app/console generate:doctrine:entity --entity=NlcUeditorBundle:Xnews

3.创建增删改查

php app/console  doctrine:generate:crud

1	php app/console doctrine:generate:crud

4.生成数据库

php app/console   doctrine:schema:update --force

1	php app/console doctrine:schema:update --force

我们可以看到生成的增删改查页面，我们下一步就要替换content现在的textarea为Ueditor

正式开始了

1.创建字段类型类：ueditortype.php

目录src/NlcUeditorBundle/Form/Type

<?php

// src/NlcUeditorBundle/Form/Type/UeditorType.php
namespace Nlc\UeditorBundle\Form\Type;

use Symfony\Component\Form\AbstractType;
use Symfony\Component\OptionsResolver\OptionsResolver;

class UeditorType extends AbstractType
{
    public function configureOptions(OptionsResolver $resolver)
    {
        $resolver->setDefaults(array(
           
        ));
    }

    public function getParent()
    {
        return 'text';
    }

    public function getName()
    {
        return 'ueditor';
    }
}

<?php

// src/NlcUeditorBundle/Form/Type/UeditorType.php

namespace Nlc\UeditorBundle\Form\Type;

use Symfony\Component\Form\AbstractType;

use Symfony\Component\OptionsResolver\OptionsResolver;

class UeditorType extends AbstractType

{

public function configureOptions(OptionsResolver $resolver)

{

$resolver->setDefaults(array(

));

}

public function getParent()

{

return 'text';

}

public function getName()

{

return 'ueditor';

}

2.创建你的字段类型为一个服务

路径src\Nlc\UeditorBundle\Resources\config\services.xml

<!--src\Nlc\UeditorBundle\Resources\config\services.xml-->
    <services>
        <service id="form.type.ueditor" class="Nlc\UeditorBundle\Form\Type\UeditorType">
            <tag name="form.type"  alias="ueditor" />
        </service>
    </services>

</service>

</services>

3.设置你的模板和逻辑

创建文件src\Nlc\UeditorBundle\Resources\views\Form\form_ueditor_type.html.twig

{% block ueditor_widget %}
    <script id="container" {{ block('widget_attributes') }} type="text/plain">{% if value is not empty %} {{ value|raw }} {% endif %}</script>
    <!-- 配置文件 -->
    <script type="text/javascript" src="{{ asset('bundles/nlcueditor/ueditor/ueditor.config.js') }}"></script>
    <!-- 编辑器源码文件 -->
    <script type="text/javascript" src="{{ asset('bundles/nlcueditor/ueditor/ueditor.all.js') }} "></script>
    <!-- 实例化编辑器 -->
    <script type="text/javascript">
        var ue = UE.getEditor('container');
    </script>
{% endblock ueditor_widget %}

{% block ueditor_widget %}

var ue = UE.getEditor('container');

</script>

{% endblock ueditor_widget %}

4.将Ueditor的资源拷贝到symfony中

将全部ueditor文件夹下的js和css全部拷贝到目录src\Nlc\UeditorBundle\Resources\public中

并运行命令

php app/console  assets:install

1	php app/console assets:install

5.使用我们新创建的Ueditor formtye

打开页面src\Nlc\UeditorBundle\Form\XnewsType.php使用字段类型ueditor

 public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
            ->add('title')
            ->add('content','ueditor')
        ;
    }

public function buildForm(FormBuilderInterface $builder, array $options)

{

$builder

->add('title')

->add('content','ueditor')

;

}

6.在config.yml加入我们刚配置的模板

twig:
    debug:            "%kernel.debug%"
    strict_variables: "%kernel.debug%"
    form_themes:
        
        - 'NlcUeditorBundle:Form:form_ueditor_type.html.twig'

twig:

debug: "%kernel.debug%"

strict_variables: "%kernel.debug%"

form_themes:

- 'NlcUeditorBundle:Form:form_ueditor_type.html.twig'

7.没了刷新页面去吧

你会看到你想要的效果！

站在巨人肩膀上的phpweb框架

让ueditor编辑器作为formtype直接引用

前期准备工作

正式开始了

One comment

发表评论取消回复

前期准备工作

正式开始了

One comment

发表评论 取消回复

发表评论取消回复