富文本的原理和插件使用

富文本的原理:

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>富文本</title>
    <style>
        #box{
            width: 300px;
            height: 300px;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <button onclick="boldHandler()">加粗</button>
    <button onclick="italicHandler()">倾斜</button>
    <button onclick="colorHandler()">颜色</button>
    <div contenteditable id="box"></div>
    
    <!-- 引入富文本 -->
    <script src="https://unpkg.com/wangeditor@3.1.1/release/wangEditor.min.js"></script>
    <script>
        function boldHandler(){
            document.execCommand("bold");
        }

        function italicHandler(){
            document.execCommand("italic");
        }

        function colorHandler(){
            document.execCommand("foreColor",null,"deeppink");
        }
    </script>
</body>
</html>
复制代码

  效果:

 

 

插件使用:

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>富文本</title>
</head>
<body>
    <div id="editor">
        <p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>
    </div>
    <!-- 引入富文本 -->
    <script src="https://unpkg.com/wangeditor@3.1.1/release/wangEditor.min.js"></script>
    <script type="text/javascript">
        var E = window.wangEditor
        var editor = new E('#editor')
        // 或者 var editor = new E( document.getElementById('editor') )
        editor.create()
    </script>
</body>
</html>
复制代码

  效果:

 

posted @   吴小明-  阅读(423)  评论(0编辑  收藏  举报
编辑推荐:
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
阅读排行:
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构
· 提示词工程——AI应用必不可少的技术
· 字符编码:从基础到乱码解决
· 地球OL攻略 —— 某应届生求职总结
点击右上角即可分享
微信分享提示