在输入框输入内容,点击加粗,斜体,下划线,显示在div中

这是一个HTML示例,展示了一个输入框和三个按钮,用于实时应用加粗、斜体和下划线样式到输入的内容,并在div中显示。用户在输入框输入文字后,点击相应按钮,文本将在输出区域以对应的格式显示。
摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            *{
                margin: 1px;
            }
            input{
                width: 200px;
                height: 40px;
                border: 1px solid gray;
            }
            #jc,#qx,#xhx{
                cursor: pointer;
                width: 30px;
                width: 30px;
            }
            
            #output{
                width: 200px;
                height: 200px;
                border: 1px solid gray;
            }
             button{
                 cursor: pointer;
             }    
        </style>            
        <script>
            fun

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要设置wangEditor斜体加粗样式,可以使用HTML的<strong>和标签。然而,在原生HTML<em>中,这些标签可能无法正常显示。为了解决这个问题,你可以通过设置wangEditor的自定义配置来实现。具体来说,你可以在wangEditor的配置添加一个onchange事件,用来监听编辑器内容的变化。在这个事件的回调函数,你可以通过正则表达式替换<strong>和标签为适合wangEditor的样式。例如,你可以使用以下代码来设置<em>斜体加粗样式: ```javascript this.editor.customConfig.onchange = (html) => { // 替换斜体标签为wangEditor的样式 html = html.replace(/<em>(.*?)<\/em>/g, '<i>$1</i>'); // 替换加粗标签为wangEditor的样式 html = html.replace(/<strong>(.*?)<\/strong>/g, '<b>$1</b>'); // 更新编辑器内容 this.editor.txt.html(html); }; ``` 通过这样的设置,当用户输入和<strong>标签时,它们将被替换为wangEditor<em>中斜体加粗样式,并正确显示在编辑器。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [vue 使用wangeditor 配置字号,无效果](https://blog.csdn.net/weixin_39929683/article/details/114474613)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [Ueditor加粗斜体功能无效](https://blog.csdn.net/yy1098029419/article/details/89522043)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值