Div可编辑和更多...更多 [英] Div Editable and More... More

问题描述

那么，我需要用同一个单词替换一个单词，在div contentEdible属性中，但格式化为...
像这样：

< div>我的球很大< / div>


对此（替换单词：球）：

< DIV>我的< font style =color：blue;>球< / font>在contentEditable中，这种情况发生在dinamically，而用户输入的文字是

替换发生。我认为onkeydown，onkeyup或onkey的简单事件可以解决这个问题。
但是，问题在于我的口号，毕竟，我尝试过，它留在替换之前，什么时候应该留下。我尝试编写一些js代码，尝试找到一些jquery脚本，但是在这种情况下他们都失败了......

任何人都有一些想法或技巧吗？ >

我认为：
- >记录未格式化单词的长度。
- >删除此单词
- >将新单词格式化。
- >与脱字符一起走，根据此格式化的字长定位。
- >是吗？
PS：我必须考虑这个div的任何地方的一个词。

我不知道如何编写这个代码， 。

如果我错了，请纠正我。

既然如此，谢谢！

编辑[1]：我希望这可以在 Mozilla Firefox 上使用，具体而言;

解决方案

我在这台机器上只有IE6 / 7，但也许你可以将这个概念应用于其他浏览器版本的Ranges（或者这可能是跨浏览器？）。

基本上我们存储光标位置，进行搜索/替换，然后将光标放回原来的位置：

html：

 < div id =contentcontentEditable =trueonkeyup =highlight（this）>这是一些需要输入的区域。 < / DIV> 
  

和脚本：

  function highlight（elem）{
 //存储光标位置
 var cursorPos = document.selection.createRange（）。duplicate（）; 
 var clickx = cursorPos.getBoundingClientRect（）。left; 
 var clicky = cursorPos.getBoundingClientRect（）。top; 
 //复制div 
的内容var content = elem.innerHTML; 
 var replaceStart ='< font style =color：blue>'; 
 var replaceEnd ='< / font>'; 
 //只有替换/移动光标，如果匹配
 //注意空格带 - 这可以防止重复
 if（content.match（/ test /））{
 elem.innerHTML = content.replace（/ test / g，''+ replaceStart +'test'+ replaceEnd +''）; 
 //重置游标和焦点
 cursorPos = document.body.createTextRange（）; 
 cursorPos.moveToPoint（clickx，clicky）; 
 cursorPos.select（）; 
} 
} 
  

Well,

I need to replace a word, in a div contentEdible property on, by the same word but formatted...
Like this:
<div> My balls are big </div>

To this (replace the word: balls):
<div> My <font style="color:blue;">balls</font> are big </div>

In a contentEditable this happens dinamically, while the user type the text the replacements happens. I think that a simple event onkeydown, onkeyup, or onkey press, can solve this part. But, the trouble is with the caret, that after all that i tryed, it stay before the word replaced, when should be stay after. I tryed write some js code, tryed find some jquery scripts, but all them failed in this situation...

Any one has some ideia, or trick ?

I think: --> Record the length of the word unformatted. --> Delete this word --> Put new word formatted. --> Walk with the caret, to position based this formatted word length. --> Is it? PS: I have to considerate a word in any place of this div.

I don't know how to write this code that do what i say above.

Correct me, if i'm wrong.

Since yet, thanks!

Edit[1]: I want that this works on Mozilla Firefox, specificlly;

解决方案

I only have IE6/7 on this machine, but maybe you can apply the concept to other browser versions of Ranges (or maybe this is cross-browser?).

Basically we store the cursor position, make our search/replacement, then put the cursor back where it was:

html:

<div id="content" contentEditable="true" onkeyup="highlight(this)">This is some area to type.</div>

and the script:

function highlight(elem) {
// store cursor position
var cursorPos=document.selection.createRange().duplicate();
var clickx = cursorPos.getBoundingClientRect().left; 
var clicky = cursorPos.getBoundingClientRect().top; 
// copy contents of div
var content = elem.innerHTML;
var replaceStart = '<font style="color:blue">';
var replaceEnd = '</font>';
// only replace/move cursor if any matches
// note the spacebands - this prevents duplicates
if(content.match(/ test /)) {
    elem.innerHTML = content.replace(/ test /g,' '+replaceStart+'test'+replaceEnd+' ');
    // reset cursor and focus
    cursorPos = document.body.createTextRange();
    cursorPos.moveToPoint(clickx, clicky);
    cursorPos.select(); 
    }   
}

这篇关于Div可编辑和更多...更多的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！