Textangular HTML 模式清除模型值

Question

我们决定将后端 CMS 更改为使用 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 站点的演示文本框中，但我遇到了同样的问题。

Answer 1

这是一个奇怪的问题，但多亏了@HanletEscaño，我才能够找到自己的出路。从服务器返回内容时，我必须执行以下操作以对其进行预先清理，以便您可以在 HTML 和渲染视图之间来回切换：

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

重要的是最后一个替换，我们将两个空格替换为空。这似乎是最后的绝招。我们来自以前的 WYSIWYG 编辑器，我们可以使 HTML 看起来不错，但是使用这个编辑器，一切都必须被压缩。

Answer 2

如上所述，这似乎是由于解析器难以正确处理空格和换行符。

如果您查看 textAngular 源代码，在 taBind.js 中，当绑定值包含空格、换行符时，_taBlankTest 服务似乎 returns 为真等等，这反过来又导致模型被设置为未定义。

我将我的替换为以下内容以避免出现这种情况：

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 模式清除模型值

Textangular HTML mode clears model value

angularjs

textangular