Мы решили изменить нашу внутреннюю CMS, чтобы использовать редактор WYSIWYG text-angular. Контент легко извлекается из базы данных, он отлично отображается, но в тот момент, когда мы переходим к просмотру исходного кода HTML, текст появляется на мгновение, а затем исчезает. Я отключил очистку с помощью ta-unsafe-sanitizer = "true". Странно то, что если я вручную просматриваю код angular, который выполняет переваривание, в конечном итоге текст отображается и остается на экране. Если я запустил его без точек останова, он очистит текст.

Я не уверен, что это дезинфекция или какое-то состояние гонки внутри Angular. Кто-нибудь еще сталкивался с этим?

Просмотр

<div text-angular ta-toolbar="[['h1','h2','h3'],['bold','italics','underline'],['ul','ol'],['outdent','indent'],['html'],['insertImage']]" ng-model="updatePageTranslation.Content" ta-unsafe-sanitizer="true"></div>

Контроллер

$scope.updatePageTranslation.Content = 'large html portion here';

Объем формы устанавливается следующим образом:

<div class="widget" ng-controller="PageController">

Все загружается нормально, и другие поля формы правильно отображают значения. Первоначальный рендеринг контента правильный. Просто при переключении в представление HTML он становится пустым. При повторном нажатии Html происходит возврат к визуальному представлению, что правильно. Но если я сохраню, значение, отправленное на сервер, станет пустым.

Я даже могу скопировать и вставить значение в текстовое поле демонстрации сайта textangular.com и столкнуться с той же проблемой.

1
Josh 22 Окт 2015 в 00:43

2 ответа

Лучший ответ

Было странно понять это, но благодаря @ HanletEscaño я смог найти свой путь. При возврате содержимого с сервера мне пришлось сделать следующее, чтобы предварительно очистить его, чтобы вы могли переключаться между HTML и визуализированным представлением:

Content.Replace(Environment.NewLine, "").Replace("\n", "").Replace("\r", "").Replace("\t", "").Replace("  ", "");

Важным является последняя замена, когда мы заменяем два пробела ничем. Это казалось последней уловкой. Мы пришли из предыдущего редактора WYSIWYG, в котором мы могли сделать HTML красивым, но с этим редактором все должно быть сжато.

1
Josh 22 Окт 2015 в 16:45

Как упоминалось выше, похоже, это связано с тем, что синтаксический анализатор пытается правильно обрабатывать пробелы и символы новой строки.

Если вы посмотрите на источник textAngular, в taBind.js сервис _taBlankTest , похоже, возвращает true, когда связанное значение содержит пробелы, новые строки и т. Д., Что, в свою очередь, приводит к тому, что модель устанавливается в undefined.

Я заменил свой следующим, чтобы избежать этой ситуации:

angular.module('textAngular.taBind', ['textAngular.factories', 'textAngular.DOM'])
.service('_taBlankTest', [function(){
    var INLINETAGS_NONBLANK = /<(a|abbr|acronym|bdi|bdo|big|cite|code|del|dfn|img|ins|kbd|label|map|mark|q|ruby|rp|rt|s|samp|time|tt|var)[^>]*(>|$)/i;
    return function(_defaultTest){
        return function(_blankVal){
            if(!_blankVal) return true;
            var _matchVal = _blankVal.replace(/(  |\t|\n)/gm, '');

        // find first non-tag match - ie start of string or after tag that is not whitespace
        var _firstMatch = /(^[^<]|>)[^<]/i.exec(_matchVal);
        var _firstTagIndex;
        if(!_firstMatch){
            // find the end of the first tag removing all the
            // Don't do a global replace as that would be waaayy too long, just replace the first 4 occurences should be enough
            _matchVal = _matchVal.toString().replace(/="[^"]*"/i, '').replace(/="[^"]*"/i, '').replace(/="[^"]*"/i, '').replace(/="[^"]*"/i, '');
            _firstTagIndex = _matchVal.indexOf('>');
        }else{
            _firstTagIndex = _firstMatch.index;
        }
        _matchVal = _matchVal.trim().substring(_firstTagIndex, _firstTagIndex + 100);
        // check for no tags entry
        if(/^[^<>]+$/i.test(_matchVal)) return false;
        // this regex is to match any number of whitespace only between two tags
        if (_matchVal.length === 0 || _matchVal === _defaultTest || /^>(\s|&nbsp;|\n|\t)*<\/[^>]+>$/ig.test(_matchVal)) return true;
        // this regex tests if there is a tag followed by some optional whitespace and some text after that
        else if (/>\s*[^\s<]/i.test(_matchVal) || INLINETAGS_NONBLANK.test(_matchVal)) return false;
        else return true;
    };
};
}])

Надеюсь, это может кому-то помочь!

0
Dominic 16 Июн 2016 в 06:26