Selenium 处理富文本

本文详细介绍了如何使用KindEditor解决在网站中处理富文本输入的问题,包括使用其API方法KE.html和KE.text来设置编辑器的HTML内容和直接显示HTML代码。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

大多数的网站尤其是论坛,博客这些都会用富文本来代替原来的文本框。对于这种富文本(RichText),我们不能用传统的sendkeys方法来处理,我们可以采用富文本自己的API方法,通过执行JS脚本的方法来处理。
我们来看一个例子:

这个项目目标就是一个富文本,下面是firebug识别出来的信息,通过classname你会发现是找不到元素的,而且使用IDE录制也是无法录制这个输入的。我们来看下网页的源代码,看看里面是怎么定义的。

这个是一个textarea,name为goal,我们用findelementbyname试一下啊,可以找个这个元素,但还是不能输入,在看一下源代码的其他地方

结合上面的我们会发现,这个textarea是经过js处理的了,而且使用的kindeditor,
KindEditor 是一套开源的在线HTML编辑器,主要用于让用户在网站上获得所见即所得编辑效果,开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本输入框。
OK,我们通过上面的地址找到kindeditor.zh-cn.js这个文件来看一下,

这里告诉我们,我们使用的kindeditor的版本是3.5.6,那么我们去kindeditor的官网看一下3.x系列的API:


KE.html(id, val)设置编辑器的HTML内容。

参数:id:String,编辑器的ID

val: String,HTML字符串

返回值:无

注: 3.5版本开始支持,旧版本可以使用KE.util.setFullHtml(id, val)。

KE.text(id, val)设置编辑器的内容,直接显示HTML代码。

参数:id:String,编辑器的ID

val: String,文本

返回值:无

注: 3.5版本开始支持。


我们找到上面两个方法,我们都来用一下结果:


//使用KE.html
String s = "KE.html('goal','<b>123</b>');";
((JavascriptExecutor)driver).executeScript(s);
//使用KE.text
String s = "KE.text('goal','<b>123</b>');";
((JavascriptExecutor)driver).executeScript(s);


OK,来看下结果吧。
使用ke.html的结果是“123”(123是加粗的),ke.text的结果是“<b>123</b>”(把html语句直接显示出来了)。这就是这两个方法的区别,大家也可以看一下其他的方法。

在使用 Selenium富文本编辑器(Rich Text Editor)进行赋值操作时,需要注意富文本编辑器通常是由 `iframe` 或 `contenteditable` 元素实现的,因此不能直接使用 `send_keys()` 方法对编辑器内容进行赋值。以下是几种常见的处理方式: ### 1. 通过 JavaScript 设置 `contenteditable` 元素内容 如果富文本编辑器是基于 `contenteditable` 的 `div` 或 `span` 实现的,可以通过执行 JavaScript 脚本来设置其内容: ```python driver.execute_script("document.querySelector('[contenteditable]').innerHTML = '这是要设置的内容';") ``` 如果编辑器有特定的 ID 或类名,则可以使用更精确的选择器: ```python driver.execute_script("document.getElementById('editor').innerHTML = '这是要设置的内容';") ``` ### 2. 切换到 `iframe` 并设置内容 如果富文本编辑器是通过 `iframe` 实现的,例如 TinyMCE 或 CKEditor,需要先切换到 `iframe`,再操作其文档内容: ```python # 定位 iframe 元素 iframe = driver.find_element(By.TAG_NAME, 'iframe') # 切换到 iframe driver.switch_to.frame(iframe) # 定位 body 元素并设置内容 body = driver.find_element(By.TAG_NAME, 'body') body.clear() body.send_keys('这是要设置的内容') # 切换回主文档 driver.switch_to.default_content() ``` ### 3. 使用 `execute_script` 设置 `iframe` 内容 如果编辑器内容无法通过 `send_keys` 直接输入,可以继续使用 JavaScript 设置 `iframe` 中 `body` 的 `innerHTML`: ```python driver.switch_to.frame(driver.find_element(By.TAG_NAME, 'iframe')) driver.execute_script("document.body.innerHTML = '<p>这是要设置的内容</p>';") driver.switch_to.default_content() ``` ### 4. 针对特定编辑器(如 TinyMCE) 某些富文本编辑器会将内容同步到隐藏的 `textarea` 中。例如 TinyMCE 提供了 `tinyMCE.activeEditor.setContent()` 方法,可以使用 JavaScript 设置内容: ```python driver.execute_script("tinyMCE.activeEditor.setContent('<p>这是要设置的内容</p>');") ``` 如果 `tinyMCE` 对象未全局暴露,可能需要等待编辑器加载完成后再执行脚本: ```python from selenium.webdriver.support.ui import WebDriverWait WebDriverWait(driver, 10).until( lambda d: d.execute_script('return typeof tinyMCE !== "undefined" && tinyMCE.activeEditor != null;') ) driver.execute_script("tinyMCE.activeEditor.setContent('<p>这是要设置的内容</p>');") ``` ### 注意事项 - **等待编辑器加载**:在执行赋值操作前,应使用 `WebDriverWait` 等待编辑器元素加载完成。 - **处理多实例**:如果页面上有多个编辑器实例,需根据实际 DOM 结构选择正确的编辑器对象。 - **避免 `send_keys()` 失败**:部分编辑器在 `iframe` 或 `contenteditable` 元素中不支持 `send_keys()`,此时应优先使用 JavaScript 设置内容。
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值