所见即所得字段中的颜色和下划线

时间:2019-07-17 16:34:54

标签: laravel backpack-for-laravel

我正在开发用于laraver的背包,并且正在使用所见即所得的领域。我想使用下划线并更改字体颜色。我在ckeditor网页中进行了搜索,似乎它支持这些功能。 如何启用它们?

最诚挚的问候

编辑-我不明白为什么我收到这个问题的负面评价。我做错了什么?

编辑2- 谢谢高兴, 这是我正在使用的代码,但是forecolor选项似乎无法正常工作。该按钮不出现。

<table datatable="ng" dt-options="vm.dtOptions" dt-column-defs="vm.dtColumnDefs" dt-instance="vm.dtInstance" class="table table-striped table-condensed bootstrap-datatable table-hover datatable">
                                <thead class="btn-moov">
                                    <tr>
                                        <th>ID</th>
                                        <th>Date</th>
                                        <th>title 1</th>
                    <th>title 1</th>
                                        <th>title 2</th>
                                        <th>title 3</th>
                                        <th>title 4</th>
                                        <th>title 5</th>
                                        <th>title 6</th>
                                        <th>title 7</th>
                                        <th>title 8</th>                 
                                        <th>title 9</th>

                                    </tr>
                                </thead>

                                <tbody>
                                    <tr data-ng-repeat="ligne in vm.data track by ligne.RN">
                                        <td ng-click="vm.Detail(ligne)">
                                        {{ligne.ID}}
                                            <!-- <a ng-click="vm.Detail(ligne)">{{ligne.ID}}</a> -->
                                        </td>
                                        <td ng-click="vm.Detail(ligne)">{{ligne.date}}</td>
                                        <td ng-click="vm.Detail(ligne)">{{ligne.some_data}}</td>
                                        <td ng-click="vm.Detail(ligne)">{{ligne.some_data}}</td>
                                        <td ng-click="vm.Detail(ligne)">{{ligne.some_data}}</td>
                                        <td ng-click="vm.Detail(ligne)">{{ligne.some_data}}</td>
                                        <td ng-click="vm.Detail(ligne)">{{ligne.some_data}}</td>
                                        <td ng-click="vm.Detail(ligne)">{{ligne.some_data}}</td>
                                        <td ng-click="vm.Detail(ligne)">{{ligne.some_data}}</td>
                                        <td ng-click="vm.Detail(ligne)">{{ligne.some_data}}</td>
                                        <td ng-click="vm.Detail(ligne)">{{ligne.some_data}}</td>


                                        <td>
                                            <div class="dropdown">
                                                <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" ng-disabled="">{{ligne.some_data}}
                                <span class="caret"></span></button>
                                                <ul class="dropdown-menu">
                                                    <li ng-show="vm.statuer(ligne.some_data)"><a ng-click="vm.statutclose(ligne)">OK</a></li>

                                                </ul>
                                            </div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>

2 个答案:

答案 0 :(得分:1)

您要查找的是字段配置which is documented here中的options索引

基本上,您需要在字段配置中包括options索引,并向其中添加通常手动传递给TinyMce的javascript init方法的任何选项。

您想要的特定选项是toolbar选项。 Here's a list of controls you can add to the toolbar

这是一个简单的例子:

$this->crud->addField([  
            'name'  => 'description',
            'label' => 'Description',
            'type'  => 'tinymce',
            // optional overwrite of the configuration array
            'options' => [
                'selector' => 'textarea.tinymce',
                'skin' => 'dick-light',
                'plugins' => 'image,link,media,anchor',
                'toolbar' => 'forecolor underline',
            ],
        ]);

要详细了解这些选项如何传递给tinymce,请参阅the tinymce field blade template第33-50行

答案 1 :(得分:0)

我终于明白了。我必须添加textcolor和colorpicker作为插件。 结果代码如下。

$this->crud->addField([  
            'name'  => 'desc1',
            'label' => 'Descipción 1',
            'type'  => 'tinymce',
            // optional overwrite of the configuration array
            'options' => [
                'selector' => 'textarea.tinymce',
                //'statusbar' => false,
                'skin' => 'dick-light',
                'plugins' => 'image,link,media,anchor,textcolor,colorpicker',
                'toolbar' => [
                    'undo redo | styleselect | bold italic | link image | forecolor',
                    'alignleft aligncenter alignright'
                ]
            ],
        ]);

非常感谢您。