富文本编辑器

最新推荐文章于 2024-03-25 21:50:27 发布

wz990223

最新推荐文章于 2024-03-25 21:50:27 发布

阅读量66

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/wz990223/article/details/121210705

版权

这是一个关于如何使用WangEditor编辑器的示例，展示了如何在点击按钮时获取编辑器中的HTML和纯文本内容。通过添加事件监听器，当点击'获取html'和'获取text'按钮时，分别弹出编辑器内的HTML源码和纯文本。

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

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
<!--    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>-->
</head>
<body>
<div id="div1" style="margin-top: 100px;" @click="asd"></div>
<button id="btn1">获取html</button>
<button id="btn2">获取text</button>
<script type="text/javascript" src="https://unpkg.com/wangeditor/dist/wangEditor.min.js"></script>
<script type="text/javascript">
    var E = window.wangEditor
    //var editor = new E('#div1')
    var editor = new E(document.getElementById('div1'))
    console.log('editor', document.getElementById('div1'),editor)
    editor.create()
    document.getElementById('btn1').addEventListener('click', function () {
        // 读取 html
        alert(editor.txt.html())
    }, false)
    document.getElementById('btn2').addEventListener('click', function () {
        // 读取 text
        alert(editor.txt.text())
    }, false)
</script>
</body>
</html>

https://www.kancloud.cn/wangfupeng/wangeditor3/430149