Заполнитель редактора Kendo-UI

У меня есть несколько полей редактора, в которые я хотел бы добавить текст-заполнитель.

<textarea rows="10" cols="20" data-bind="kendoEditor: {
      value: Text, 
      attr: { placeholder: 'Test place holder' }}" > 
 </textarea>

Похоже, что текстовый тег-заполнитель не передается из текстовой области в редактор.

Вот пример окна редактора, с которым можно поиграть: http://jsfiddle.net/cN2ke/

Я думаю, мне придется слушать событие изменения редактора, и если в моем водяном знаке HTML нет текстовой вставки.

Проблема, с которой я сталкиваюсь, заключается в том, что на странице опубликовано, как убрать водяной знак с обратной стороны. Думаю, я мог бы сравнить строку со значением заполнителя, но мне это кажется глупым.

Думал, я бы проверил и посмотрел, есть ли у кого-нибудь хорошее решение для текста водяного знака в элементе управления редактора.

Спасибо!


kendo-ui knockout.js knockout-kendo
person Andrew Walters    schedule 26.07.2013    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Вот мое реализованное решение

Текстовая область

<textarea id="custInfoPriorPerformance" rows="10" cols="20" data-bind="kendoEditor: { value: AccountPlanVM.AccountPlan.PriorYearSummary }" > </textarea>

В модели представления создайте переменную параметров с идентификатором элемента управления, наблюдаемым и текстом заполнителя.

self.PlaceholderOptions =
        {
            CustomerInfoAccountBackground: ['#custInfoAccountBackground', self.AccountPlanVM.AccountPlan.AccountBackground, "<div style=\"" + self.PlaceholderStyle + "\">" + 'Placeholder Example Text' + "</div>"]
        };

При загрузке я привязываюсь к фокусу/размытию окна редактора. И прежде чем отправить форму обратно, я очищаю текст-заполнитель из наблюдаемых.

//Editor Placeholder methods
    self.BindEditorPlaceholders = function() {
        for (var propt in self.PlaceholderOptions) {
            //Options array
            var options = self.PlaceholderOptions[propt];

            // get a reference to the Editor
            var editor = $(options[0]).data("kendoEditor");

            //Currently saved value 
            var currentValue = options[1]();

            //If we don't have any text saved, inject placeholder
            if (!currentValue) {
                editor.value(options[2]);
            }

            //Attach Events to Editor Iframe
            $(options[0]).siblings(".k-content").focus(options, self.EditorFocus);
            $(options[0]).siblings(".k-content").blur(options, self.EditorBlur);
        }
    };

    self.EditorFocus = function(e) {
        //Options array
        var options = e.data;

        // get a reference to the Editor
        var editor = $(options[0]).data("kendoEditor");

        //Current editor value
        var htmlValue = editor.value();

        if (htmlValue == options[2]) {
            //Clear editor value
            editor.value('');
        }
    };

    self.EditorBlur = function (e) {
        //Options array
        var options = e.data;

        // get a reference to the Editor
        var editor = $(options[0]).data("kendoEditor");

        //Current editor value
        var htmlValue = editor.value();

        if (htmlValue == '') {
            //Set editor value back to placeholder
            editor.value(options[2]);
        }
    };

    self.CleanEditorPlaceholders = function() {
        for (var propt in self.PlaceholderOptions) {
            //Options array
            var options = self.PlaceholderOptions[propt];

            // get a reference to the Editor
            var editor = $(options[0]).data("kendoEditor");

            //Currently saved value 
            var currentValue = options[1]();

            //If the current text is the placeholder, wipe it out
            if (currentValue == options[2]) {
                options[1]('');
            }
        }
    };
person Andrew Walters    schedule 29.07.2013

arrow_upward
1
arrow_downward

@Эндрю Уолтерс: Спасибо за ваше решение. Я попытался реализовать обработчики событий фокуса и размытия в родственном элементе .k-content в разделе self.BindEditorPlaceholders, но событие фокуса не срабатывало у меня при использовании версии Kendo 2014.1.624 (бета). Итак, я хотел опубликовать альтернативу (на основе исходного кода редактора Kendo Editor) для всех, кто испытывает ту же проблему:

В разделе self.BindEditorPlaceholders вместо:

$(options[0]).siblings(".k-content").focus(options, $scope.EditorFocus);
$(options[0]).siblings(".k-content").blur(options, self.EditorBlur);

можно попробовать:

$(editor.body).on('focus.kendoEditor', options, $scope.EditorFocus);
$(editor.body).on('blur.kendoEditor', options, $scope.EditorBlur);

Я не говорю, что это лучший из двух методов, и может быть лучше, а может и не лучше не полагаться на родственное положение элемента DOM .k-content для будущих выпусков Kendo. Но это работает.

person Aaron Jessen    schedule 06.07.2014