wangeditor如何获取值

2024-10-14 13:43:46

1、我们先百度搜索该富文本框的脚本文件,下载回来后,在自己的页面里引入该脚本。(我们的代码有用到Jquery,所以也把Jquery脚本引入了)

wangeditor如何获取值

2、然后是写一个DIV,该富文本框是嵌入到这个div里显示的。接着用JS脚本初始化富文本框,代码如图

wangeditor如何获取值

3、运行页面后,我们就可以看到页面上有一个文本输入框了,而且支持输入各种格式。如图

wangeditor如何获取值

4、我们可以在这个输入框里输入带格式的内容,比如H1标题文字,带下横线的文字,带背景色的文字,有序列表,表情符号等等。

wangeditor如何获取值

5、输入了内容,我们怎么获取得到呢?我们修改下代码,添加获取内容的按钮,点击按钮触发获取内容函数,在该函数上调用插件的ed.txt.html()方法,可以获取到富文本框里的内容。代码如图

wangeditor如何获取值

6、页面刷新后,我们点击按钮,可以得到富文本框里输入的内容。因为是富文本,所以内容里会包含html代码。

wangeditor如何获取值

7、如果不想获取内容里的html代码,只获取文字内容,我们可以把代码由var text = ed.txt.html(); 改成var text = ed.txt.text();即调用插件的 text方法,而不是html方法。

wangeditor如何获取值

8、修改后,刷新页面,重新点击按钮,可以看到只返回了输入框的内容,不包含代码了。

wangeditor如何获取值

9、除了在输入框里输入内容外,我们还可以用脚本为输入框添加内容。修改代码,添加设置内容的按钮。为输入框设置内容,也是调用插件的ed.txt.html(text); 该方法的参数就是要输入的内容。代码如图。

wangeditor如何获取值

10、刷新页面后,我们点击按钮,可以看到脚本里设置的内容,已经成功输入到富文本框里了。

wangeditor如何获取值
猜你喜欢