如何在iframe中动态创建范围?

时间:2013-09-22 12:19:41

标签: jquery tinymce

我正在使用TinyMCE编辑器。我在编辑器中编写的所有内容都放在p标签中。但是当我从工具栏中单击方程式工具时,在p标签内部创建了一个具有类AMedit的动态范围。我的问题是如何做一些事情或者更简单只是在我关注新创建的span时提醒一些事情。记住这个范围是满足的,整个编辑器来自iframe。

请查看以下链接。

http://www.imathas.com/editordemo/demo.html

我编写了以下代码,但id对我不起作用。我的代码中出现了什么错误。

var span = $("#elm1_ifr").contents().find("span.AMedit");
var canPressEnter = true;
    span.on("focus", function(){
        canPressEnter = false;
    }).on("keypress", function(e){
        var code = (e.keyCode ? e.keyCode : e.which);
        if (canPressEnter === false && code === 13)
        {
            alert('welcome');
        }
    }).on("blur", function(){
        canPressEnter = true;
    });
   })

请任何人都可以用一个简单的例子来解释。

感谢。

1 个答案:

答案 0 :(得分:1)

我通过beyondthelogix.com链接更好地理解您的问题。

TinyMCE编辑器将范围的类别从AM更改为AMedit。我想到的解决方案是让setInterval监听该类更改。我将代码包装在.ready()函数中。

试试这个:

Add a line here:

tinyMCE.init({  
theme : "advanced",
    mode: "exact",
    elements : "elm1",
oninit: function() { loadlistener(); }, //add this line to run the next code under
setup : function(ed) {

并在页面中的某处添加:

var amedit = false;

function loadlistener() {
    console.log('load');
    $("#elm1_ifr").contents().keydown(function (e) {
        console.log('key');
        var code = (e.keyCode ? e.keyCode : e.which);
        console.log(code);
        if (code == 13 && amedit) {
            e.preventDefault();
            return false;
        }
    });
    var p_parent = $("#elm1_ifr").contents().find("p");
    setInterval(function () {
        if (p_parent.find('span').length && p_parent.find('span').hasClass('AMedit')) {

            amedit = true;
        } else {
            amedit = false;
        }
    }, 200)
};