Question

我正在尝试为在线编辑器创建插件，现在我坚持一个想法，当我将输入类型的文本集中在我放置URL时，我试图保存并再次设置范围，但是它确实会丢失文本选择。因为我已经附加了令人满意的Div所以我需要一些DOM元素的解决方案

我的index.html

<script>
$(document).ready(function(){
$(".editor").editor({height: "400px"});
});

</script>
 <body>
<div class='editor'>
</div>
</body>

我是如何通过类'编辑'

将div添加到Div的

// CREATING CONTROL PANEL----------------------------------------------
    var controlDivBold = "<div class='editorControl' onmousedown='event.preventDefault();' data-control='bold' title='"+langWords['bold']+"' id='editorControlBold'></div>";
    var controlDivUnderline = "<div class='editorControl' onmousedown='event.preventDefault();' data-control='underline' title='"+langWords['underline']+"' id='editorControlLine'></div>";
    var controlDivCursive = "<div class='editorControl' onmousedown='event.preventDefault();' data-control='cursive' title='"+langWords['cursive']+"' id='editorControlCursive'></div>";
    var controlDivLeft = "<div class='editorControl' onmousedown='event.preventDefault();' data-control='left' title='"+langWords['left']+"' id='editorControlLeft'></div>"
    var controlDivCenter = "<div class='editorControl' onmousedown='event.preventDefault();' data-control='center' title='"+langWords['center']+"' id='editorControlCenter'></div>";
    var controlDivRight = "<div class='editorControl' onmousedown='event.preventDefault();' data-control='right' title='"+langWords['right']+"' id='editorControlRight'></div>";
    var controlDivJustify = "<div class='editorControl' onmousedown='event.preventDefault();' data-control='justify' title='"+langWords['justify']+"' id='editorControlJustify'></div>";    
    var controlDivHref = "<div class='editorControl' onmousedown='event.preventDefault();' data-control='href' title='"+langWords['href']+"' id='editorControlHref'></div>";
    var controlDivHrefBreak = "<div class='editorControl' data-control='hrefBreak' title='"+langWords['hrefBreak']+"' id='editorControlHrefBreak'></div>";  
    var controlDivImage = "<div class='editorControl' data-control='image' title='"+langWords['insertImage']+"' id='editorControlImage'></div>";
    var controlDivVideo = "<div class='editorControl' data-control='video' title='"+langWords['insertVideo']+"' id='editorControloVideo'></div>";   
    var controlText = "<div class='editorEditableDiv' id='editation' contenteditable='true'></div>";
    var controlErrorDiv = "<div class='editorErrorDiv'><span id='editorErrorText'></span></div>";   
    var controlDiv = "<div class='editorControlDiv'><div class='firstControl'>"+controlDivBold+" "+controlDivUnderline+" "+controlDivCursive+"</div><div class='secondControl'>"+controlDivLeft+" "+controlDivCenter+" "+controlDivRight+" "+controlDivJustify+"</div><div class='thirdControl'>"+controlDivHref+" "+controlDivHrefBreak+" "+controlDivImage+" "+controlDivVideo+"</div>"+controlText+" "+controlErrorDiv+"</div>"; 

    // END OF CREATING CONTROL PANEL--------------------------------------

    mainDiv.html(controlDiv);
    $("#editation").focus();

最后有一个创建链接

的功能

 var hrefPopUpForm = "<span>"+langWords['urlHref']+"</span><input type='text' id='hrefUrl' placeholder='http://www.google.cz'><button id='insertHref'>"+langWords['insert']+"</button>";
         var hrefPopUp = "<div class='pop' data-pop='href' id='hrefPopUp'><div class='popUpHeader'><span>"+langWords['hrefHeading']+"</span></div><div class='popUpContent'>"+hrefPopUpForm+"</div></div>";
         $(hrefPopUp).appendTo("body");
         $("#hrefPopUp").css('left', centerPopUp($("#hrefPopUp"))+"px");
         openedHref = 1;
         selectedControl = $(this).attr('data-control');
         urlSelection = document.getSelection();
         console.log(urlSelection);


$("body").on('click', '#insertHref', function(){
        var url = $("#hrefUrl").val();
        if(url == ''){
            error(langWords['emptyUrl']);
        }else{

                $("#editation").selectRange(2, 5);


                document.execCommand('createLink', false, url);
        }   
    });
    // --- END OF POPUP FOR CREATING HREFS -----------------------------------




$.fn.selectRange = function(start, end) {
  return this.each(function() {
    if(this.setSelectionRange) {
      this.focus();
      this.setSelectionRange(start, end);
    } else if(this.createTextRange) {
      var range = this.createTextRange();
      range.collapse(true);
      range.moveEnd('character', end);
      range.moveStart('character', start);
      range.select();
    }
  });
};

带有自定义输入类型文本的Javascript execCommand（'createLink'）

0 个答案: