标签: contenteditable

https://codepen.io/anon/pen/YaGdLV

<svg><text contentEditable="true">HELLO</text></svg>

这是 React 的旧版本，因为我很快就拿到了 codepen，但我在自己的项目中使用了最新的 React，这是同样的问题。

我收到有关 contenteditable 的警告，但即使如此，我仍然无法编辑 svg 中的文本元素。

我尝试使用内容可编辑的UIWebView创建一个富文本编辑器,因为UITextView没有得到任何丰富.我想知道如何以编程方式替换选择或插入HTML代码(例如,创建指向所选文本的链接,或实现搜索/替换功能).我试过了:

[self.webTexteView stringByEvaluatingJavaScriptFromString:[NSString stringWithFormat:@"document.ExecCommand('insertHTML', false, '%@')", myString]];

但它不起作用......你知道是否有解决方案吗？

谢谢,

丹尼斯

我在td中有许多空的（无内容）contenteditable div`s。我需要div的td的width：100％和height：100％。

HTML：

<td>
    <div contenteditable="true"></div>
</td>

CSS：

td {min-width: 100px; min-height: 120px; width: 100%; height: 100%}
td div{height: 100%; width: 100%; display:inline-block;}

如果div中包含内容，则此方法有效，但是如果它为空，则我看不到它，也无法更改其内容（div具有width:0; height:0）。

我想中断Enter key并停止将html代码注入ContentEditable div。我当前的代码不起作用，因为它不会中断Enter key。但是，如果我键入内容，请按Enter键，然后再次键入，它将删除内部html元素。但是，这不是我想要的。我希望元素在我按Enter时不进入ContentEditable div，而不必将其剥离。

我基本上是用这个作为input that scales with its content。如果有更好的方法可以进行此操作，请告诉我！

import ReactDOM from 'react-dom'

export default class MyInput extends React.Component {    
  componentWillReceiveProps(nextProps) {
    this.setState({value: nextProps.html});
  }

  shouldComponentUpdate(nextProps){
    return nextProps.html !== ReactDOM.findDOMNode(this).innerHTML;
  }

  componentDidUpdate() {
    if ( this.htmlEl && this.props.html !== this.htmlEl.innerHTML ) {
     this.htmlEl.innerHTML = this.props.html;
    }
  }

  emitChange(){
    var html = ReactDOM.findDOMNode(this).innerHTML;

    // regex to remove tags created after pressing enter
    value = value.replace(/<div>/g, '');
    value = value.replace(/<\/div>/g, '');
    value = value.replace(/<br>/g, …

当突出显示div中的特定文本时，如何更改字体。当我从保管箱中选择一种字体时，下面的代码将更改整个文本的字体。

function changeFont(font) {
  document.getElementById("note_header").style.fontFamily = font.value;
}

Highlight text and change font <br>
<select id="select_font" onchange="changeFont(this);">
            <option value="Arial">Arial</option>
            <option value="Sans Serif" selected>Sans Serif</option>
            <option value="Comic Sans MS">Comic Sans MS</option>
            <option value="Times New Roman">Times New Roman</option>
            <option value="Courier New">Courier New</option>
            <option value="Verdana">Verdana</option>
            <option value="Trebuchet MS">Trebuchet MS</option>
            <option value="Arial Black">Arial Black</option>
            <option value="Impact">Impact</option>
            <option value="Bookman">Bookman</option>
            <option value="Garamond">Garamond</option>
            <option value="Palatino">Palatino</option>
            <option value="Georgia">Georgia</option>
        </select>
<div contenteditable="true" id="note_header" style="width:200px; height:200px; border: 1px solid #ccc">
  Some Content
</div>

我有这个组件：

...

onInputChange = evt => {
  const target = evt.target;
  let value = null;
  if (target.nodeName === "INPUT")
    value = target.value; //works well
  else if (target.nodeName === "SPAN")
    value = target.innerText; //works well
  const name = target.name; //works well if it's the input, doesn't if it's the span
  this.setState({[name]: value});
}

render() {
  ...
  <input name="myFirstValue" onChange={onInputChange} />
  <span name="mySecondValue" contentEditable="true" onInput={onInputChange}></span>
  ...
}

...

当它input触发事件时，它运行良好。但问题是当它是span:target.name返回undefined而不是'mySecondValue'.

这是 React 的错误吗？如果是这样，是否有解决方法？ …

我正在寻找一种解决方案，可以在来自 contenteditable html 的选定文本上创建上下文菜单以创建链接。

工作流程：基本上用户可以编辑网页外的文本（div 中的 contenteditable="true"），如果他们想添加指向所选文本的链接，他们必须使用上下文菜单，在那里他们可以右键单击所选文本并输入 URL从上下文菜单中的输入框中，然后boom，所选文本成为超链接。

欣赏你的方向。

我正在开发一个webapp,我遇到了JavaScript问题.

以下是导致问题的HTML的简化版本.我有一些嵌套contenteditable divs(我用占位符文本替换了真实内容):

<div contenteditable="true" id="div1">
    text
    <div contenteditable="inherit" id="div2">
        text
        <div contenteditable="inherit" id="div3">
            text
        </div>
        text
    </div>
    text
</div>

我想通过JavaScript获取所选元素(由用户编辑),但到目前为止我还没有找到一种方法(成功).

我尝试了什么,为什么它不起作用:

我尝试过使用document.activeElement,它应该返回焦点中的任何一个元素.通常这是有效的,但在使用嵌套contenteditable元素时它不会产生所需的结果.它返回最上面的contenteditable祖先,而不是返回用户正在编辑的元素.

例如,如果div2选择/正在编辑,则document.activeElement返回div1.如果div3选择/正在编辑,document.activeElement也会返回div1.

所以我想document.activeElement这不是正确的方法.

如何获得正在编辑的最具体元素,而不是其最重要的contenteditable祖先？