设置htmleditor Extjs 6的光标位置

我在我的应用程序中使用了htmleditor，我想在20个字符后更改文本的颜色

因此，前20个字符看起来是黑色的，之后，所有字符都是橙色的

为此，我使用以下代码：

{
    xtype: 'htmleditor',
    value: record.data.description,
    height: 100,
    width: 900,
    name: 'instructionDescription',
    enableColors: false,
    enableFontSize: false,
    allowBlank: false,
    enableSourceEdit: false,
    enableLinks: false,
    enableFont: false,
    enableAlignments: false,
    enableLists: false,
    colspan: 2,
    style: {
        'margin-left': '10px'
    },
    listeners: {
        change: function(Object, newValue, oldValue) {
            if (typeof(newValue) != 'string')
                return;

            var newVal = Ext.util.Format.stripTags(newValue);
            var oldVal = Ext.util.Format.stripTags(oldValue);
            var index = newValue.indexOf('<font color="#ffa500">');
            var velue = null;
            if (newVal == oldVal)
                return;

            if (index > -1) {
                value = newValue.substr(0,index) + '<font color="#ffa500">' + newValue.substr(index + 22);
                this.setValue(value);
            }
            else {
                if (newVal.length > 20) {
                    newValue = newValue.replace('&nbsp;', " ");
                    newVal = Ext.util.Format.stripTags(newValue);
                    if (newVal.length < 21) {
                        return;
                    }
                    index = newValue.indexOf(Ext.util.Format.stripTags(newValue).substr(15,5));
                    index += 5;
                    value = newValue.substr(0,index) + '<font color="#ffa500">' +newValue.substr(index);
                    value = value.replace('&nbsp;', " ");
                    this.setValue(value);
                }
            }
        },
        afterrender: function() {
            var value = record.data.description;
            if (Ext.util.Format.stripTags(value).length > 20) {
                var index = value.indexOf(Ext.util.Format.stripTags(value).substr(20));
                value = value.substr(0,index) + '<font color="#ffa500">' + value.substr(index);
                value = value.replace('&nbsp;', " ");
            }
            this.setValue(value);
        }
    }
}

{
xtype:'htmleditor'，
值：record.data.description，
身高：100，
宽度：900，
名称：'instructionDescription'，
启用颜色：false，
enableFontSize:false，
allowBlank:false，
enableSourceEdit:false，
启用链接：false，
enableFont:false，
启用对齐：错误，
使能列表：false，
科尔斯潘：2，
风格：{
“左边距”：“10px”
},
听众：{
更改：函数（对象、newValue、oldValue）{
if（typeof（newValue）！='string'）
返回；
var newVal=Ext.util.Format.stripTags（newValue）；
var oldVal=Ext.util.Format.stripTags（oldValue）；
var指数=newValue.indexOf（“”）；
var-velue=null；
if（newVal==oldVal）
返回；
如果（索引>-1）{
value=newValue.substr（0，索引）+''+newValue.substr（索引+22）；
这个.setValue（值）；
}
否则{
如果（新值长度>20）{
newValue=newValue.replace（“”，“”）；
newVal=Ext.util.Format.stripTags（newValue）；
如果（新值长度<21）{
返回；
}
index=newValue.indexOf（Ext.util.Format.stripTags（newValue.substr（15,5））；
指数+=5；
value=newValue.substr（0，索引）+''+newValue.substr（索引）；
值=值。替换（“”，“”）；
这个.setValue（值）；
}
}
},
afterrender:function（）{
var值=record.data.description；
if（Ext.util.Format.stripTags（value）.length>20）{
var index=value.indexOf（Ext.util.Format.stripTags（value.substr（20））；
value=value.substr（0，索引）+''+value.substr（索引）；
值=值。替换（“”，“”）；
}
这个.setValue（值）；
}
}
}

现在的问题是，当颜色样式应用于20个字符后的字符串时，光标返回到第一个位置

---

有没有办法阻止光标返回第一个位置或手动设置光标的位置。

嘿，Rohan-欢迎使用SO，请阅读此处，以便发布好的SO问题：一些与您的问题无关的指针，以便更好地编码：您应该始终在

if

/

else

语句中使用花括号。它更具可读性，可以防止将来出现问题。如果您的

else

语句中没有任何内容，而是另一个

If

/

else

语句，则应使用

else If

。您不应该在单个范围内多次设置变量值，具体地说，我指的是在两个连续行上设置

索引

和

值

变量。尽可能使用严格的比较（最好始终使用）。这将给您一些需要完成的工作，特别是因为HTMLeditor使用可编辑的主体和I框架，因此您在那里所做的一切都将作为标记添加到页面主体中。最好的方法是添加一个创建选择范围的方法，每次键入“获取当前光标位置”时，使用范围和

document.execCommand（）

-ant设置颜色，然后使用选择和焦点重新定位光标。嘿，Rohan-欢迎使用SO，请阅读此处，以便发布好的SO问题：一些与您的问题无关的指针，以便更好地编码：您应该始终在

if

/

else

语句中使用花括号。它更具可读性，可以防止将来出现问题。如果您的

else

语句中没有任何内容，而是另一个

If

/

else

语句，则应使用

else If

。您不应该在单个范围内多次设置变量值，具体地说，我指的是在两个连续行上设置

索引

和

值

变量。尽可能使用严格的比较（最好始终使用）。这将给您一些需要完成的工作，特别是因为HTMLeditor使用可编辑的主体和I框架，因此您在那里所做的一切都将作为标记添加到页面主体中。最好的方法是添加一个创建选择范围的方法，每次键入“获取当前光标位置”时，使用范围和

document.execCommand（）

-ant设置颜色，然后使用选择和焦点重新定位光标。