Question

我即将开始编写自己的富文本编辑器，但需要知道是否可以填充文本区域以及如何保存/使用其中的数据。

我目前正在使用ckEditor，但它太笨重，而且非常适合我想要的东西。

我会以此为基础：

我需要对数据进行某些检查以检查其长度。

感谢。

代码，如果需要：

HTML：

 <a id="bold" class="font-bold">B</a>
 <a id="italic" class="italic">I</a>
 <select id="fonts">
     <option value="Arial">Arial</option>
     <option value="Comic Sans MS">Comic Sans MS</option>
     <option value="Courier New">Courier New</option>
     <option value="Monotype Corsiva">Monotype</option>
     <option value="Tahoma">Tahoma</option>
     <option value="Times">Times</option>
 </select>
 <br/>
 <iframe id="textEditor" style="width:500px; height:170px;">
 </iframe>

JS：

$(document).ready(function(){
 document.getElementById('textEditor').contentWindow.  document.designMode="on";
 document.getElementById('textEditor').contentWindow.  document.close();
$("#bold").click(function(){

if($(this).hasClass("selected"))
{
    $(this).removeClass("selected");
}else
{
    $(this).addClass("selected");
}
    boldIt();
});
$("#italic").click(function(){

if($(this).hasClass("selected"))
{
    $(this).removeClass("selected");
}else
{
    $(this).addClass("selected");
}ItalicIt();
});
$("#fonts").change(function(){
changeFont($("#fonts").val());
});

});

function boldIt()
{  
   var edit = document.getElementById("textEditor").contentWindow;
   edit.focus(); 
   edit.document.execCommand("bold", false, ""); 
   edit.focus();
}

function ItalicIt()
 {  
    var edit = document.getElementById("textEditor").contentWindow;
    edit.focus(); 
    edit.document.execCommand("italic", false, ""); 
    edit.focus();
 }

function changeFont(font)
{
    var edit = document.getElementById("textEditor").contentWindow;
    edit.focus(); 
    edit.document.execCommand("FontName", false, font); 
    edit.focus();
}

Answer 1

DEMO

让你从某个地方开始，这是你的HTML：

<div id="textEditorTab">
    <span data-cmd="bold"><b>B</b></span>
    <span data-cmd="italic"><i>I</i></span>

    <select id="fonts">
        <option value="Arial">Arial</option>
        <option value="Comic Sans MS">Comic Sans MS</option>
        <option value="Courier New">Courier New</option>
        <option value="Monotype Corsiva">Monotype</option>
        <option value="Tahoma">Tahoma</option>
        <option value="Times">Times</option>
    </select>
</div>

<div id="textEditor"></div>

您需要的所有基本JS / jQ是：

$(function() {

  var $editor = $('#textEditor').prop('contenteditable', true);
  var $btn = $('span[data-cmd]');

  // EXECUTE COMMAND
  function execCmd(cmd, arg){      
    document.execCommand(cmd,false,arg);
  }

  $btn.mousedown(function(e) {
    e.preventDefault();
    $(this).toggleClass("selected");
    execCmd(this.dataset.cmd);
  });

  $("#fonts").change(function() {
    execCmd("FontName", this.value);       
  });

});

<强> AND HERE'S A jsBin DEMO

现在，我已经看到了你想要的，按下按钮使它成为状态 ACTIVE ，但是，如果你认为你所能实现的是一个混乱，原因之一是：

用户输入文字 - ＆gt;选择一个部分，然后点击 BOLD ，现在它用cursot跳转到没有BOLD文字的行的开头......但是等一下，你的按钮仍然处于活动状态......

要防止此类用户体验，您需要跟踪用户选择的子元素，并相应地打开选项卡中与所选tag条件匹配的所有按钮。

我不会让你失望所以这是一个例子：

$(function() {

  var $editor = $('#textEditor').prop('contenteditable', true);
  var $btn = $('span[data-cmd]');
  var tag2cmd = {"B":'bold', "I":'italic'};

  // HIGHLIGHT BUTTONS on content selection
  function findParentNode(el) {

    $btn.removeClass('selected');

    var tagsArr = [];
    var testObj = el.parentNode || '';
    if(!testObj){return;}

    var c = 1;
    tagsArr.push(el.nodeName);
    if(el.tagName!='DIV'){
        while(testObj.tagName != 'DIV') {
            c++;
            tagsArr.push(testObj.nodeName);
            testObj = testObj.parentNode;   
        }
        for(i=0;i<c;i++){
            $('[data-cmd="'+ tag2cmd[tagsArr[i]] +'"]').addClass('selected');
        }
      console.log( tagsArr );
    }

  } 
  // EXECUTE COMMAND
  function execCmd(cmd, arg){      
    document.execCommand(cmd,false,arg);
  }

  $btn.mousedown(function(e) {
    e.preventDefault();
    $(this).toggleClass("selected");
    execCmd(this.dataset.cmd);
  });

  $("#fonts").change(function() {
    execCmd("FontName", this.value);       
  });


  // Having a button click toggleClass is not enough cause you'd also want 
  // to change button state when the user tlicks on different
  // elements tag inside the editor.

  var $lastSelected;
  $editor.on('mouseup', function( e ){
    e.stopPropagation();
    $lastSelected = e.target;
    findParentNode($lastSelected); // auto highlight select buttons
  });  

});

<强> AND IT'S DEMO

所以你看，只有一个'想法'并且代码立即变得庞大，所以如果你真的想保持简单，那就避免这样的东西，玩得开心！

可以在designMode中填充和保存从iframe内输入的文本吗？

1 个答案: