Question

我试图在 SCEditor 上实现一些 maxlength 功能，但这并没有考虑原始textarea maxlength属性。< / p>

到那时我使用SelectionchangedEvent处理程序来获取值并在必要时对其进行子串，并将其替换为来自SCEditor API的val（）。

到目前为止有效但 val（）函数将设置值并且将插入符号放在开头，因此如果用户继续写入，则会在顶部写入然后子串在底部，并将插入符号放在顶部，一行高于前一行。我不想要那个！

所以我遇到了像stackoverflow

这样的解决方案

这似乎无法正常工作：jsfiddle

＆＃13;

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

＆＃13;

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

＆＃13;

我错过了什么吗？或者只是这个插件与函数冲突？

最后，我还在这里发现了一些有趣的帖子：stackoverflow但我不知道如何以预期的方式使用它。

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

Answer 1

好吧，终于找到了如何，希望这可以帮助将来的某个人！

这是我的解决方案，关于如何限制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);
}

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

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

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

SCEditor插入最终内部iframe满足

1 个答案: