可以在designMode中填充和保存从iframe内输入的文本吗? [英] Possible to populate and save text entered from inside a iframe in designMode?

查看:86
本文介绍了可以在designMode中填充和保存从iframe内输入的文本吗?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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



我目前正在使用ckEditor,但是它太笨重而且对于我想要的东西很大。



我会以此为基础:



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

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



谢谢。



代码(如果需要):



HTML:

 < a id =boldclass =font-bold> B< / a> 
< a id =italicclass =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 =textEditorstyle =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 (选中);
} ItalicIt();
});
$(#fonts)。change(function(){
changeFont($(# fonts)。val());
});

});

函数boldIt()
{
var edit = document.getElementById(textEditor)。contentWindow;
edit.focus();
edit.document.execCommand(bold,false,);
edit.focus();
}

函数ItalicIt()
{
var edit = document.getElementById(textEditor)。contentWindow;
edit.focus();
edit.document.execCommand(italic,false,);
edit.focus();
}

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


解决方案

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



现在,我已经看到你想要的,按下按钮就可以了州 ACTIVE
但是如果你认为你会实现的是一个混乱的原因之一:



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



为防止此类用户体验,您需要跟踪用户选择的子元素,并相应地打开选项卡中与所选<$ c $匹配的所有按钮c>标签条件。



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

  $(function(){

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

//内容选择上的亮点按钮
函数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( '选择');
}
console.log(tagsArr);
}

}
//执行命令
函数execCmd(cmd,arg){
document.execCommand(cmd,false,arg);
}

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

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


//点击toggleClass按钮是不够的,因为当用户点击不同的
时你也想要
//来改变按钮状态//编辑器中的元素标签。

var $ lastSelected;
$ editor.on('mouseup',function(e){
e.stopPropagation();
$ lastSelected = e.target;
findParentNode($ lastSelected); / /自动高亮选择按钮
});

});

以及它的演示



所以你看,只有一个'想法'而且代码立刻变得庞大,所以如果你真的想保持简单,避免这样的东西,玩得开心!


i am just about to start writing my own rich text editor but need to know if its possible to populate the text area and also how to save / use the data inside it.

I am currently using ckEditor, but its too clunky and large for what i want.

Ill be using this as a base:

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

I need to run certain checks on the data as well to check its length.

Thanks.

code if needed:

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

解决方案

DEMO

To let you start from somewhere, Here's your 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>

The all the basic JS/jQ you need is:

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

Now, I've seen that you want, on button click make it state ACTIVE, but if you think twice what you'll achieve is a mess for one reason:

User enters text -> selects a portion and clicks BOLD, now it jumps with the cursot to the beginning of line where there's no BOLD text... but wait, your button still has the active state...

to prevent such UX, you need to keep track of the child element the user has selected, and accordingly turn ON all the buttons from your options tab that match the selected tag criteria.

I won't let you down so here's an example:

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

So you see, only one 'idea' and the code gets immediately huge, so if you really want to keep it simple, avoid such stuff and have fun!

这篇关于可以在designMode中填充和保存从iframe内输入的文本吗?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆