标签: textangular

我使用TextAngular来吸引核心!任何使用它的人都会知道.我的用户每天抱怨:(

我正在寻找替代品,并找到一些像Froala(199美元)和CKEditor,但他们需要JQuery.

没有JQuery的AngularJS有什么"好"的编辑器吗？我一直在寻找但找不到任何东西.我也愿意付钱.

当我需要在富文本中添加不可编辑的html时,我使用指令textAngular来格式化我的电子邮件通知文本并坚持使用任务.我在textAngular指令上添加了我的自定义指令.在我的自定义指令的帮助下,我将字符串中的特殊字符替换为带有param的html span标签contenteditable='false',但此参数不起作用且内容仍可编辑.

在这种情况下,我有两个问题:

1. 如何在内容textAngular指令中设置不可编辑的html？
2. 如何将我的变量连接到欲望位置的字符串(当前它总是连接到字符串的末尾)

我感谢任何帮助.

偷偷摸摸我的问题

我的自定义指令:

app.directive('removeMarkers', function () {

return {
    require: "ngModel",
    link: function (scope, element, attrs, ngModel) {

       element.bind('click', function (e) {
                var target = e.target;
                var parent = target.parentElement;
                if (parent.classList.contains('label-danger')){
                    parent.remove()
                }
            });

        function changeView(modelValue){
            modelValue= modelValue
                .replace(/\{{/g, "<span class='label label-danger' contenteditable='false' style='padding: 6px; color: #FFFFFF; font-size: 14px;'>")
                .replace(/\}}/g, "<span contenteditable='false' class='remove-tag fa fa-times'></span></span>&nbsp;");
            ngModel.$modelValue= modelValue;

            console.log(ngModel)
            return modelValue;
        }
        ngModel.$formatters.push(changeView);
        }
    }
});

HTML

  <select class="form-control pull-right" …

使用Angular和Angular UI-Bootstrap.

我在textAngular中创建了一个下拉菜单.当您单击文本框或其中一个菜单选项以外的其他内容时,它会禁用该菜单.这是期望的行为.

但是,当使用FireFox时,打开一个下拉菜单会使用户离开菜单(即使他们使用菜单中的下拉菜单).如果它有任何帮助,看起来下拉打开后面和文本框的侧面.

在这种情况下,一张图片值1000字.左边是Chrome(想要的行为),右边是Firefox(不是想要的行为).如果嵌入的图像太小,请单击我.

这是代码.这是工具注册的显示部分.对于那些不熟悉textangular的人 - 它只是创建按钮的代码:

    display: '<span class="btn-group" dropdown dropdown-append-to-body style="padding: 0px 0px 0px 0px">' +
    '<button class="btn btn-default dropdown-toggle" dropdown-toggle type="button" ng-disabled="showHtml()">' +
    '   <span>Items Fields</span>' +
    '</button>' +
    '<ul class="dropdown-menu">' +
    '   <li ng-repeat="o in options">' +
    '       <a ng-click="action(o)">{{o.name}}</a>' +
    '   </li>' +
    '</ul>' +
    '</span>',

编辑:

1. 复制问题的Plunker是:针对plnkr的Clicky(问题的焦点是"项目字段"按钮 - 在Chrome中有效,在firefox中不起作用.
2. 繁荣 - 赏金!

PS请不要被代码量吓倒.唯一相关的html位于app.js文件中,位于taRegisterTool'itemFields'下.

taRegisterTool('itemFields', {
            display:

我们刚刚将textangular升级到1.2.2,因为现在支持拖放.

已经看到textAngualrSetup中的defaultFileDropHandler,但是,努力寻找支持它或如何使用它的任何文档.

defaultFileDropHandler:
    /* istanbul ignore next: untestable image processing */
    function (file, insertAction)
    {
        debugger;
        var reader = new FileReader();
        if(file.type.substring(0, 5) === 'image'){
            reader.onload = function() {
                if(reader.result !== '') insertAction('insertImage', reader.result, true);
            };

            reader.readAsDataURL(file);
            return true;
        }
        return false;
    }

基本上,我们希望允许用户拖动多个pdf,word文档等,并在提交时上传.

我们可以通过在设置页面中的defaultFileDropHandler中添加功能来解决这个问题.

我们实施ta: -

<div text-angular data-ng-model="NoteText" ></div>

但是,有更清洁的方法来实现这一目标吗？

我认为我的问题在于"显示"中的下拉按钮.在Chrome中,下拉按预期工作 - 即显示ng-repeat列表中的选项名称列表.但是,在Firefox中,单击下拉列表会禁用文本角度菜单,就像用户在文本角度编辑器外部单击一样(此时文本角度禁用编辑器选项).什么都没有下降.

+行在Chrome中打破了所有工作.我们只是试图让那些不使用大屏幕的人可以读取代码.对于那些不熟悉text-angular的人:所有相关的代码都在显示 - 它只是一些定义下拉列表的html,我认为这就是问题所在.如何在FireFox中使用它？

    taRegisterTool('itemFields', {
        display: '<span class="btn-group" dropdown style="padding: 0px 0px 0px 0px">' +
        '<button class="btn btn-default dropdown-toggle" dropdown-toggle type="button" ng-disabled="showHtml()">' +
        '   <span>Item Fields</span>' +
        '</button>' +
        '<ul class="dropdown-menu">' +
        '   <li ng-repeat="o in options">' +
        '       <a ng-click="action(o)">{{o.name}}</a>' +
        '   </li>' +
        '</ul>' +
        '</span>',
        options: ReportItemFields,
        action: function (option) {
            if( angular.isDefined(option) && angular.isUndefined(option.promise))
            {
                this.$editor().wrapSelection('insertHTML', option.text);
            }
        }
    });

我正在使用Text Angular创建和排序列表,并且能够创建默认以1,2,3开头的订单列表.文本角度有2种模式 1.富文本模式1. HTML模式

HTML模式显示

 <ol>
       <li>test</li>
       <li>test</li>
 </ol>

富文本模式将显示为:

1. 测试
2. 测试

如果我需要与5号开始有序列表,我需要切换到HTML模式, 第一,做下面的变化

<ol start="5">
    <li>test</li>
    <li>test</li>
</ol>

现在,富文本模式以5开始编号

5. 测试
6. 测试

真正的问题是如何在富文本编辑器模式下通过单击<ol>标记生成的伪元素来更改编号.在谷歌搜索和研究之后,似乎伪元素无法改变.

堆栈溢出编辑器提供了在Rich Text模式下更改此选项的选项!

因此,在以富文本模式添加以下数据时,例如从4开始

 4. number 4
 3. number 3

在预览模式结束显示马车结果.

4. 4号
5. 3号

如果你注意到了5. number 3.这是从富文本编辑器生成的.

有一种JS方法可以替换DOM中的标签,并使用html标签等组合给出一个simlar标签,我目前还没有找到它.

是否有一种创造性的CSS方式可以在文本角度中以富文本模式(而不是html模式)动态更改数字.