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

时间:2016-05-12 13:48:49

标签: javascript php silverstripe

在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被调用,因为我已经使用了死('hello world')来检查。但是,在任何TextareaField中使用Tab都没有变化。我哪里错了?

1 个答案:

答案 0 :(得分:2)

我们可以像这样缠绕来实现这个目标:

<强> 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'