javascript - iframe contenteditable内的SCEditor插入符号结尾

我正在尝试在SCEditor上实现一些maxlength函数，该函数未考虑原始textarea maxlength属性。

届时，我将使用SelectionchangedEvent处理程序，以获取值并在必要时将其子字符串化，然后从SCEditor API中将其替换为val（）。

到目前为止，该方法仍然有效，但是val（）函数将设置值并将尖号放置在开头，因此，如果用户继续写入，它将在顶部进行写操作，然后在底部进行子字符串设置，并将尖号设置回顶部，即上一行的上一行。
我不要那个！

所以我遇到了像这样的解决方案：stackoverflow

这似乎并不不幸：jsfiddle

var instance = $('textarea').sceditor({
    plugins: 'bbcode',
    width: '100%',
    style: 'http://www.sceditor.com/minified/jquery.sceditor.default.min.css'
}).sceditor('instance');

$('#caretend').click(function() {
    placeCaretAtEnd(instance);
});

function placeCaretAtEnd(el) {
    el.focus();
    if (typeof window.getSelection != "undefined"
            && typeof document.createRange != "undefined") {
        var range = document.createRange();
        range.selectNodeContents(el.getBody().get(0));
        range.collapse(false);
        var sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
    } else if (typeof document.body.createTextRange != "undefined") {
        var textRange = document.body.createTextRange();
        textRange.moveToElementText(el.getBody().get(0));
        textRange.collapse(false);
        textRange.select();
    }
}

<link href="http://www.sceditor.com/minified/jquery.sceditor.default.min.css" rel="stylesheet"/>

<div><a href="#" id="caretend">Place caret at end</a></div>
<div><textarea></textarea></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.sceditor.com/minified/jquery.sceditor.bbcode.min.js"></script>

我在这里想念什么吗？还是仅仅是该插件与功能冲突？

最后，我还在这里找到了一些有趣的文章：stackoverflow，但是我看不到如何以预期的方式使用它。

任何建议都非常欢迎，非常感谢。

最佳答案

好吧，终于找到了方法，希望这对以后的人有所帮助！

这是我的解决方案，关于如何限制SCEditor上的输入长度

创建一个标记数组，该标记数组将用于检测contenteditable上的更改，我发现它比普通处理程序更有效并且与浏览器兼容。

var sceFlag = { "id1" : 0, "id2" : 0 (...) };

函数placeCaretAtEnd：

function placeCaretAtEnd(instance){
    var rangeHelper = instance.getRangeHelper();
    var range = rangeHelper.cloneSelected();
    if ('selectNodeContents' in range) {
      var bodyChildren = instance.getBody()[0].children;
       range.selectNodeContents(bodyChildren[bodyChildren.length - 1]);
      range.collapse(false);
      rangeHelper.selectRange(range);
    }

如果超过最大长度，则函数将子字符串值细分：

function SCElength(instance,len){
  var d = len - instance.val().length;
  if(d<0){
  instance.val(instance.val().substr(0,len));
  placeCaretAtEnd(instance);
}

侦听焦点和模糊事件并检查contenteditable是否已更改的功能：

function SCEFocusBlur(instance,len,id){
instance.getBody()
    .focus(function() {
        sceFlag[id] = 1;
        checkSCEInput(instance,len,id);
        $(this).data("initialText", $(this).html());
    });
instance.getBody()
    .blur(function() {
        sceFlag[id] = 0;
        if ($(this).data("initialText") !== $(this).html()) {
            checkSCEInput(instance,len,id);
        }
    });

标志为1时递归检查值的功能

function checkSCEInput(instance,len,id){
if(sceFlag[id] = 1){
    SCElength(instance,len);
    setTimeout(function() {
        checkSCEInput(instance,len);
    }, 1000);
}

然后，您需要做的就是创建像这样的sceditor：

$("textarea").sceditor({
        plugins: "bbcode",
        style: "css/sceditor.min.css",
        width: "auto",
        height: "110",
        toolbar:"bold,italic,underline,strike,subscript,superscript|left,center,right,justify|size,color,removeformat|bulletlist,orderedlist,horizontalrule,emoticon",
    });

并使用实例，maxlength int和与该标志关联的id调用SCEFocusBlur：

SCEFocusBlur($("textarea").sceditor('instance'),maxlength,id);

关于它的任何想法都非常欢迎！
祝你有美好的一天 ：）