Возможно заполнить и сохранить текст, введенный изнутри iframe в designMode?

Question

Я только начинаю писать свой собственный текстовый редактор, но мне нужно знать, возможно ли заполнить текстовую область, а также как сохранить / использовать данные внутри нее.

Я в настоящее время использую ckEditor, но он слишком громоздкий и большой для того, что я хочу.

Я буду использовать это в качестве базы:

http://jsfiddle.net/Kxmaf/6/

Мне также нужно выполнить определенные проверки данных, чтобы проверить их длину.

Благодарю.

код при необходимости:

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

});

И ЗДЕСЬ JSBIN DEMO

Теперь, я видел, что вы хотите, при нажатии кнопки сделать состояние АКТИВНЫМ, но если подумать дважды, то вы получите беспорядок по одной причине:

Пользователь вводит текст -> выбирает часть и нажимает BOLD, теперь он переходит курсором в начало строки, где нет текста BOLD... но подождите, ваша кнопка все еще имеет активное состояние...

Чтобы предотвратить такой UX, вам нужно отслеживать дочерний элемент, выбранный пользователем, и, соответственно, включить все кнопки на вкладке параметров, которые соответствуют выбранному 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
  });  

});

И ЭТО ДЕМО

Итак, вы видите только одну "идею", и код сразу становится огромным, так что, если вы действительно хотите сохранить простоту, избегайте таких вещей и получайте удовольствие!