如何在TinyMCE编辑器中用JS或jQuery获取HTML元素节点值及属性值

嘿，我来帮你搞定这两个TinyMCE的问题！你已经能拿到nodeName了，再往前一步就搞定文本和属性值啦，咱们一个个说：

1. 获取HTML元素的节点文本值 #

你之前用jQuery的text()没成功，大概率是没把选中的节点正确转换成jQuery对象，或者直接用原生JS的方法会更稳妥。针对你给出的<span color="error">That's great</span>例子，试试下面的代码：

var ed = tinyMCE.activeEditor;
var selectedNode = ed.selection.getNode();

// 方法一：原生JS（推荐，跨浏览器兼容性好）
var textContent = selectedNode.textContent;
// 或者用innerText（注意：innerText会忽略隐藏文本，textContent则不会）
// var textContent = selectedNode.innerText;

// 方法二：jQuery方式（确保页面已经引入jQuery）
var textContent = $(selectedNode).text();

alert(textContent); // 这里会弹出"That's great"

如果还是没拿到值，可以先检查一下selectedNode是不是你要的元素节点——有时候选中的可能是文本节点（nodeType为3），这时候需要先判断：

if (selectedNode.nodeType === 1) {
  // 这里才是元素节点，放心操作文本内容
}

2. 获取节点的属性值 #

针对你例子里的color="error"自定义属性，不管是原生JS还是jQuery都有对应的方法：

自定义属性（比如color） #

var ed = tinyMCE.activeEditor;
var selectedNode = ed.selection.getNode();

// 方法一：原生JS
var colorValue = selectedNode.getAttribute('color');

// 方法二：jQuery
var colorValue = $(selectedNode).attr('color');

alert(colorValue); // 弹出"error"

如果是标准样式属性（比如style里的color） #

要是你的标签是标准写法<span style="color:red">That's great</span>，想获取样式值的话，得用style相关的方法：

// 原生JS
var styleColor = selectedNode.style.color; // 返回"red"或者RGB格式值

// jQuery
var styleColor = $(selectedNode).css('color');

同样，记得先确认选中的是元素节点（nodeType===1），避免操作文本节点导致的错误~

内容的提问来源于stack exchange，提问作者DIVA