`
xinklabi
  • 浏览: 1584900 次
  • 性别: Icon_minigender_1
  • 来自: 吉林
文章分类
社区版块
存档分类
最新评论

为html 编辑器xheditor内部的元素添加事件(涉及控制editor元素以及为其在iframe中添加事件)

 
阅读更多

    这些日子项目中实现一个类似word编辑器的东西,左侧显示的内容相当于word以document map视图查看时显示的标题,我用ztree实现的,不同于word的地方是所有标题都是由ztree创建并编辑的,右侧以html编辑器xheditor实现,用于编辑文档主题内容,但是希望ztree中创建的标题在xheditor中不能够编辑,弄了好久,最后获得一个解决方案,解决问题还得靠执着的精神,在此把解决方法记录下来。

    需求基本上是这样的,xheditor中插入标题后,既不可以删除,又不可以编辑,而试图编辑的时候要弹出提示信息。

    主要是靠下面这段代码实现的:

    <html>

    <head>

        <script>

            function titileModfyingAlert(target){alert("标题不能被修改!");target.blur();//让对象失去焦点}      

        </script>

    </head>

    <body>

    <iframe>//editor的实现是在当前文档中创建一个iframe并在其中操作的

    editor.appendHTML("<div onfocus='window.parent.titileModfyingAlert(this); contentEditable='true'>标题1</div><p></p>");

    </iframe>

    </body>

    </html>

    将标题包裹在div标签里并设置标签的contentEditable的属性为true即可以实现标题占据一行,并且无法被删除,这是偶然发现的。

    但是,当双击标题时,div获得焦点,并且可以修改标题。我在为div添加onfocus事件时一直未能成功,后来才发现onfocus句柄调用的是父窗口的函数,因为div是在iframe中,所以我要使用onfocus='window.parent.titileModfyingAlert(this); 这样的形式才可以。在函数titileModfyingAlert中添加提示信息,并且使对象失去焦点即可实现禁止编辑。

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics