Question

我们决定将后端CMS更改为使用text-angular的WYSIWYG编辑器。内容从数据库中提取得很好，它被渲染得很好，但是当我们查看HTML源时，文本会立即出现然后消失。我已经用ta-unsafe-sanitizer =“true”关闭了消毒。奇怪的是，如果我手动单步执行消化的角度代码，最终文本将被渲染并保留在屏幕上。如果我没有断点运行它，它会清除文本。

我不确定它是否是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网站的演示文本框中，并遇到同样的问题。

Answer 1

这是一个奇怪的想法，但多亏了@HanletEscaño，我找到了自己的方式。从服务器返回内容时，我必须执行以下操作以对其进行预清理，以便您可以在HTML和呈现的视图之间来回切换：

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

重要的是最后一次替换，我们用什么都替换两个空格。这似乎是最后的伎俩。我们来自之前的WYSIWYG编辑器，我们可以让HTML看起来很漂亮，但是使用这个编辑器，一切都必须被压缩。

Answer 2

如上所述，这似乎是由于解析器正在努力正确处理空白和换行。

如果你看一下textAngular源，在taBind.js中，当绑定值包含空格，换行符等时， _taBlankTest 服务似乎返回true，这反过来导致模型被设置未定义。

我用以下内容替换了我的以避免这种情况：

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;
    };
};
}])

希望这可以帮助那些人！

Textangular HTML模式清除模型值

2 个答案: