在 silverstripe CMS 中，按下时在 TextareaField 中添加一个选项卡

Posted 2023-05-07

【中文标题】在 silverstripe CMS 中，按下时在 TextareaField 中添加一个选项卡

【英文标题】：Within silverstripe CMS add a tab within TextareaField when pressed

【发布时间】：2016-09-08 09:45:15

【问题描述】：

在 silverstripe 中，我需要在 TextareaField 中使用标签 - 目前它会离开该字段，但我希望它在那里写一个标签。

更新根据下面的评论，我添加了此代码...

_config.yml

TextareaField:
  extensions:
    - TextareaFieldExtension

TextareaFieldExtension.php

class TextareaFieldExtension extends DataExtension 

    public function onBeforeRender() 

        Requirements::customScript(<<<JS
            $(document).delegate('#textbox', 'keydown', function(e) 
              var keyCode = e.keyCode || e.which;

              if (keyCode == 9) 
                e.preventDefault();
                var start = $(this).get(0).selectionStart;
                var end = $(this).get(0).selectionEnd;

                // set textarea value to: text before caret + tab + text after caret
                $(this).val($(this).val().substring(0, start) + "\t" + $(this).val().substring(end));

                // put caret at right position again
                $(this).get(0).selectionStart =
                $(this).get(0).selectionEnd = start + 1;
              
            );
JS
        );
    

我知道 onBeforeRender 被调用，因为我使用了 die('hello world') 来检查。但是，在任何 TextareaField 中 Tab 的使用没有变化。我哪里错了？

【问题讨论】：

***.com/questions/6637341/…

@GavinBruce 所以我已将该代码放入 silverstripe 包装器中，但没有效果

【参考方案1】：

我们可以像这样使用 entwine 来实现这一点：

mysite/javascript/cms.js

(function($) 
    jQuery.entwine('ss', function($) 

        $('.field.textarea textarea').entwine(
            onkeydown: function(e) 
                var keyCode = e.keyCode || e.which;

                if (keyCode == 9) 
                    e.preventDefault();
                    var start = $(this).get(0).selectionStart;
                    var end = $(this).get(0).selectionEnd;

                    // set textarea value to: text before caret + tab + text after caret
                    $(this).val($(this).val().substring(0, start) + "\t" + $(this).val().substring(end));

                    // put caret at right position again
                    $(this).get(0).selectionStart = $(this).get(0).selectionEnd = start + 1;
                
            
        );
    );
)(jQuery);

我们通过将这个 javascript 文件放入我们的配置 yml 文件中来为所有 CMS 加载这个 JavaScript 文件：

mysite/_config/config.yml

LeftAndMain:
  extra_requirements_javascript:
    - 'mysite/javascript/cms.js'

【讨论】：

我把它放在 ModelAdmin init 中，因为它没有工作（即 js 代码不包含在页面源代码中），我做了开发构建刷新......可能是我的错误。 ..但我想我会发表评论