javascript - SCEditor 插入符号位于 iframe 内容可编辑的末尾

Question

我正在尝试在 SCEditor 上实现一些 ma​​xlength 函数，它没有考虑原始 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但我不知道如何以预期的方式使用它。

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

Answer 1

好吧，终于找到了方法，希望这可以帮助将来的人!

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

创建一个标志数组，用于检测 contenteditable 上的更改，我发现它比常见处理程序更有效且跨浏览器兼容。

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

放置CaretAtEnd的函数:

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

任何想法都非常欢迎!祝你有美好的一天:)