将表单元素功能添加到contenteditable div

时间:2010-06-24 16:31:39

标签: javascript forms mootools contenteditable

我使用MooTools Javascript库。这个库在这里提供了几个非常有用的功能:http://mootools.net/docs/more/Element/Element.Forms

问题是这个函数只适用于textarea等“form”元素。

现在我正在制作一个在线编辑器,对于编辑器,我自己使用div元素和内容可编辑功能。

当我想在mootools(更多)库中使用getCaretPosition等函数时,会调用此行:

var range = this.getDocument().selection.createRange();

但是我得到了这个错误:

this.getDocument().selection is undefined

似乎只有表单元素具有此选择对象(在此文档上:S?)。

有没有办法将表单功能添加到div(或所有)元素?

2 个答案:

答案 0 :(得分:1)

我担心它不会那么容易起作用。看一下源代码

例如,setSelectionRange有两个断言,1:它有type == "text"(因此,输入)或2:它有一个可以读取的.value属性。如果你将它应用于缺少任何一个的元素,它将无法工作。

你可以在其他地方寻找想法 - 比如这个david walsh文档选择片段可能很有用:

http://davidwalsh.name/text-select-widget

他只是在做:

var getSelection = function() {
    return $try(
        function() { return window.getSelection(); },
        function() { return document.getSelection(); },
        function() {
            var selection = document.selection && document.selection.createRange();
            if(selection.text) { return selection.text; }
            return false;
        }
    ) || false;
};
祝你好运 - 这是一个非常基本的例子,我把它放在一起,它提供了选择和可能的插入符号位置(根据选择的最后一个字符)作为父元素的偏移量 - {{ 3}}

答案 1 :(得分:0)

我在名为CodeMirror(http://marijn.haverbeke.nl/codemirror/的Javascript项目中找到了此功能,也在jsfiddle中使用)。伟大的项目!