Javascript 富文本编辑器，单击按钮后内容可编辑区域失去焦点

问题：单击按钮后内容可编辑区域失去焦点
解决思路：在按钮上绑定的事件从@click 改为 @mousedown 事件。因为失去焦点事件是mousedown默认触发的，所以，在点击的按钮上阻止mousedown的默认事件即可

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>[contenteditable] {width: 300px;height: 300px;border: 1px solid black;}</style>
</head>
<body><div class="actions"><button data-action="bold">bold</button><button data-action="italic">italic</button></div><div><div class="input" contenteditable="true"></div></div><script>document.querySelector(".actions").addEventListener("mousedown", function (e) {var action = e.target.dataset.action;console.log(action)if (action) {document.execCommand(action, false)//prevent button from actually getting focusede.preventDefault();}})document.querySelector(".input").addEventListener("blur", function (e) {console.log('shijiao')})</script></body>
</html>

Javascript 富文本编辑器，单击按钮后内容可编辑区域失去焦点相关推荐

android 富文本框架_五种JavaScript富文本编辑器，总有一款适合你
全文共2099字,预计学习时长4分钟也许,你时常会遇到要开发基于Web的文本编辑器的情况.有时候,只需实现一个简约且轻量级的应用程序,不必有其他任何不必要的功能.而有时候,你的首要任务是保护用户的商 ...
五种JavaScript富文本编辑器,总有一款适合你
也许,你时常会遇到要开发基于Web的文本编辑器的情况.有时候,只需实现一个简约且轻量级的应用程序,不必有其他任何不必要的功能.而有时候,你的首要任务是保护用户的商业机密. 在这样的情况下,如果想知道& ...
10个免费的javascript富文本编辑器（jQuery and non-jQuery）
本文介绍了10个免费易用富文本编辑器(rich text editors,RTE),其中5个是Jquery插件,另外5个是非Jquery富文本编辑器简介 Javascript富文本编辑器使我们添加. ...
java pdf 富文本_富文本编辑器保存的html内容使用itextpdf转PDF文件（css提取，内容重叠）问题解决...
html格式处理使用itextpdf的XMLWorkerHelper组件转换过程当中,html格式要求比较多,下面作下格式的简单处理以保证转换成功.css //div格式转换过程当中,有概率会使内容 ...
泛微OA二次开发E8之UE富文本编辑器增加按钮操作
泛微OA协同办公系统在这里就不多作描述,有需要的可自行了解. 现在说说我遇到的问题以及解决方案. 遇到的需求问题公司有自己的文件存储服务器,所以想把图片上传和文件上传都传输到自己的服务器上,所以需要 ...
将百度富文本编辑器(ueditor)中的内容转化为word文档格式
业务场景需求:根据富文本中的内容生成对应的word文档进行预览和下载功能. 实现: 采用 POIFSFileSystem 类相关实现,能够准确的将文字.格式相关内容转换成功,但是对于在线的网络图片, ...
富文本_轻量级 web 富文本编辑器 —— wangEditor
介绍 wangEditor -- 轻量级 web 富文本编辑器,配置方便,使用简单.支持 IE10+ 浏览器. 官网:www.wangEditor.com 文档:www.kancloud.cn/wan ...
保存富文本编辑器内容
在这里我使用的是layUI的layedit模块,layUI中的富文本编辑器模块. 第一步我们先将页面搭建好,引入layui.layedit模块和layui.form模块.form模块可用于表单的数据验 ...
使用vue获取富文本编辑器文字内容前50个字符
获取文章内容的前50个字符放在内容描述里 vue布局 <el-form-item label="内容描述:"prop="abstr ...

Javascript 富文本编辑器，单击按钮后内容可编辑区域失去焦点

Javascript 富文本编辑器，单击按钮后内容可编辑区域失去焦点相关推荐

最新文章

热门文章