如何使用javascript在设计模式下使用外文unicode字符编辑iframe？

发布于 2024-11-06 13:49:17 字数 1154 浏览 3 评论 0原文

我正在使用 iframe 技术开发一个所见即所得编辑器。我需要知道一个想法来设置 JavaScript 方法来覆盖键盘事件，将 charCode 替换为不同语言的另一个 CharCode。例如，如果我按“a”，它将返回阿拉伯语键盘中的阿拉伯字符集。

更新 - 2011 年 5 月 14 日 我已经设法仅在 chrome 浏览器上实现@Tim 建议的解决方案。我注意到使用 javascript 在 DOM 内创建 designMode="on" 时切换 designMode="on" 不兼容。以下是代码，您还可以在此处查看测试页面 - jsfiddle

JAVASCRIPT - JQUERY

$(document).ready(function(){
var textarea = $("#textarea"); 
var frame = $("<iframe class='thaana-editor-html' id='editable' />");
$(frame).width('500px'); 
$(frame).height('250px'); $(textarea).parent().prepend(frame);
var iframe = document.getElementById("editable"); 
var iframeObject = $(iframe).contents().get(0); 
iframeObject.designMode = "on";

});

HTML

<div id="content">
<textarea class="thaanaEditor" id="textarea" ></textarea>
</div>

我已经在 Chrome v11 上测试过

- 工作正常
IE8 - 工作正常
IE9 - 尚未测试
Firefox -3.6 和 Firefox -3.6 4 - 不工作 - iframe 不可像设计模式中那样编辑

原文

I am developing a WYSIWYG editor using the iframe technique. I need to know an idea to set a JavaScript method to overide keyboard event replacing charCode to another CharCode of a different language. For example if I am pressing "a" it will return the Arabic character set in Arabic language keyboard.

UPDATE - 14th May 2011
I have managed to implement a solution as suggested by @Tim only on chrome browser. I have noticed incompatibility of switching the designMode="on" when it is created inside the DOM using javascript. Following is the code and you can also see the test page here - jsfiddle

JAVASCRIPT - JQUERY

$(document).ready(function(){
var textarea = $("#textarea"); 
var frame = $("<iframe class='thaana-editor-html' id='editable' />");
$(frame).width('500px'); 
$(frame).height('250px'); $(textarea).parent().prepend(frame);
var iframe = document.getElementById("editable"); 
var iframeObject = $(iframe).contents().get(0); 
iframeObject.designMode = "on";

});

HTML

<div id="content">
<textarea class="thaanaEditor" id="textarea" ></textarea>
</div>

I have tested on

Chrome v11 - works fine
IE8 - works fine
IE9 - not tested yet
Firefox -3.6 & 4 - NOT working - iframe is not editable as in designmode

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

甜心小果奶 2024-11-13 13:49:17

我之前回答过类似的问题：需要将光标位置设置到 contentEditable div 的末尾，选择和范围对象出现问题（另请参阅更改按键）。同样的技术适用于可编辑的 iframe：您需要将按键事件处理程序添加到 iframe 的文档中。例如：

function handleKeypress(evt) {
    // See linked answer for implementation
}

var iframe = document.getElementById("your_iframe_id");
var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;

if (iframeDoc.addEventListener) {
    iframeDoc.addEventListener("keypress", handleKeypress, false);
} else if (iframeDoc.attachEvent) {
    iframeDoc.attachEvent("onkeypress", handleKeypress);
}

I've answered a similar question before: Need to set cursor position to the end of a contentEditable div, issue with selection and range objects (see also Changing the keypress). The same technique applies to an editable iframe: you'll need to add the keypress event handler to the iframe's document. For example:

function handleKeypress(evt) {
    // See linked answer for implementation
}

var iframe = document.getElementById("your_iframe_id");
var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;

if (iframeDoc.addEventListener) {
    iframeDoc.addEventListener("keypress", handleKeypress, false);
} else if (iframeDoc.attachEvent) {
    iframeDoc.attachEvent("onkeypress", handleKeypress);
}

回复收藏 0 原文