如何禁用 contenteditable div 中的元素选择和调整大小?

2024-01-18

例如。我有以下布局:

<div contenteditable="true">
   <span class="text-block" contenteditable="false">
      <span contenteditable="false">Name</span>
      <a href="javascript:void(0)">
          <i class="small-icon-remove"></i>
      </a>
   </span>
​</div>

那么,如何禁用它:

和这个:


当我尝试完全隐藏控件选择(这就是它们的调用方式)时,我自己在这方面花了很多时间CKEditor http://ckeditor.com's widgets http://docs.ckeditor.com/#!/guide/widget_sdk_intro。不幸的是我没有好消息。

解决方案1

首先,有一个mscontrolselect http://msdn.microsoft.com/en-us/library/ie/ms536915%28v=vs.85%29.aspx事件。当我发现它时(事实上它的名字有一个ms前缀)我很高兴,因为根据MS http://connect.microsoft.com/IE/feedback/details/791253/ie-11-enableobjectresizing-execcommand-support它应该是可以预防的。

但事实证明它完全不稳定。有时会被解雇,有时则不会。它因 IE 版本、DOM 结构、属性、您单击的元素、它是块元素等而异。通常的 MS 的废话。但你可以尝试:

function controlselectHandler(evt) {
    evt.preventDefault();
}
document.body.addEventListener('mscontrolselect', controlselectHandler);

但是,这将完全阻止选择(如果有效的话)。因此,您将使这些元素根本无法选择。

解决方案2

然后还有第二个选项,更可靠 - 单击此类元素后将选择移动到其他位置。有几种方法可以实现这一点。在 CKEditor 中,我们正在修复选择mousedown... and mouseup因为(再次)有时这对于 IE 来说是不够的,它取决于许多条件。您还可以收听selectionchange事件并修复那里的选择。

然而,我们再次讨论的是阻止选择此类元素。

解决方案3

因此,第三个选项不是阻止选择,而是阻止resizestart事件。 CKEditor 将其与enableObjectResizing命令:https://github.com/ckeditor/ckeditor-dev/blob/a81e759/plugins/wysiwygarea/plugin.js#L211-L218 https://github.com/ckeditor/ckeditor-dev/blob/a81e759/plugins/wysiwygarea/plugin.js#L211-L218。此解决方案将阻止调整大小,但当然不会隐藏那些丑陋的边框。

解决方案4

正如我提到的,我在 CKEditor 中解决了这个问题。我们设法使可编辑元素中包含不可编辑元素成为可能,但浏览器之间的行为完全可控且统一。完整的解决方案太复杂,无法在 StackOverflow 上解释,我们花了几个月的时间才实现它。我们将此功能称为小部件。看一些演示在这里 http://ckeditor.com/demo#widgets。正如您所看到的,当选择不可编辑元素时,没有控件选择。该选择仅在以下时间间隔内出现:mousedown and mouseup,但仅限于特定情况。除此之外,一切都像本机一样工作(尽管它完全是假的)。

阅读更多内容小部件简介 http://docs.ckeditor.com/#!/guide/dev_widgets并在小部件教程 http://docs.ckeditor.com/#!/guide/widget_sdk_intro.

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何禁用 contenteditable div 中的元素选择和调整大小? 的相关文章

  • 在打字稿中导入 json

    我是 typescript 的新手 在我的项目中 我们使用 typescript2 在我的要求之一中 我需要导入 json 文件 所以我创建了 d ts 文件如下 test d ts declare module json const va
  • Bootstrap按钮加载+Ajax

    我正在使用 Twitter Bootstrap 的按钮加载状态 http twitter github com bootstrap javascript html buttons http twitter github com bootst
  • 如何选择具有“A”类但不具有“B”类的 div?

    我有一些 div div class A Target div div class A B NotMyTarget div div class A C NotMyTarget div div class A D NotMyTarget di
  • Jquery 数据表列总和

    我只是参考一下这个链接 https datatables net examples advanced init footer callback html了解如何获取 jquery 数据表中的列总计 但我已经完成了一半的项目 我在html页面
  • Javascript split 不是一个函数

    嘿朋友们 我正在使用 javascript sdk 通过 jQuery facebook 多朋友选择器在用户朋友墙上发布信息 但是我收到此错误friendId split 不是函数 这是我的代码 function recommendToFr
  • 检查 jQuery 1.7 中是否存在基于文本的选择选项

    所以我有以下 HTML 片段
  • DataTables row.add 到特定索引

    我正在替换这样的行项目 var targetRow entity row dataTable targetRow closest table dataTable DataTable dataTable row targetRow remov
  • 图像背景不透明度不影响边框

    如何设置背景不透明度而不影响边框线不透明度 我找到的解决方案没有帮助 div class selected img src assets img image product 1 thumbnail jpg alt product 1 thu
  • Vuejs 2:去抖动不适用于手表选项

    当我在 VueJs 中反跳此函数时 如果我提供毫秒数作为原语 它就可以正常工作 但是 如果我将其提供为对 prop 的引用 它会忽略它 这是道具的缩写版本 props debounce type Number default 500 这是不
  • 可以设置标题样式吗? (并且使用CSS或js?)[重复]

    这个问题在这里已经有答案了 我想知道是否可以设计一个title a href title This is a title Hello a 样式问题有两个方面 文本格式 编码 我猜这是可能的 所以在问题中这样做 工具提示样式 你能把它弄大一点
  • CSS3 信封形状

    正如您可能已经猜到的 该图像是邮件信封形状的一部分 如果可能的话 我想使用 CSS3 创建该形状 我已经制作了其他部分 但这个很棘手 该形状需要两侧都有三角形切口和圆角 大概是 border radius bottom left borde
  • 在移动设备上滚动

    这个问题更多的是一个建议研究 我确实希望它对其他人有帮助 并且它不会关闭 因为我不太确定在哪里寻求有关此事的建议 在过去的 6 个月里 我一直在进行移动开发 我有机会处理各种设备上的各种情况和错误 最麻烦的是滚动问题 当涉及到在网站的多个区
  • Vue 和 Vuex:处理依赖的计算属性

    我的应用程序是一个使用 Vuex 在 Vue 中构建的精简电子表格 关键组件是TableCollection Table and Row The TableCollection有一个包含多个的数组Table对象 每个Table有一个包含多个
  • 表格行未扩展到全宽

    我有一个表格 当我将表格的宽度设置为 100 并将表格行的宽度设置为 100 时 没有任何反应或宽度发生变化 Table Normal position relative display block margin 10px auto pad
  • 如何隐藏/禁用 Highcharts.js 中的图例框?

    我想问是否可以使用 HighCharts js 库隐藏图表中的所有图例框 var chart object chart renderTo render to type graph type colors graph colors title
  • 从 FileReader 设置背景图像样式

    我正在寻找一种解决方案 允许我从文件上传输入中获取文件并通过设置 document body style backgroundImage 来预览它 以下代码用于在 Image 元素中显示预览 function setImage id tar
  • Jquery - 选择选项后如何获取选项的特定数据类型?

    我将直接跳到标记 然后解释我想要做什么 HTML 选择选项
  • 如何在执行新操作时取消先前操作的执行?

    我有一个动作创建器 它会进行昂贵的计算 并在每次用户输入内容时调度一个动作 基本上是实时更新 但是 如果用户输入多个内容 我不希望之前昂贵的计算完全运行 理想情况下 我希望能够取消执行先前的计算并只执行当前的计算 没有内置功能可以取消Pro
  • CSS溢出文本显示在几行中,没有断字

    我有一些长文本显示在 div 中 该 div 具有固定的宽度和高度 我希望文本显示在几行上 作为 div 高度 并且句子单词不会中断 一行中的单词前缀和下一行中的继续 此外 我想在末尾添加省略号最后一句话 CSS white space n
  • 在 Nexus 7 2013 上更改方向时 CSS 媒体查询不起作用

    我目前正在我的笔记本电脑 台式电脑和 Nexus 7 2013 上测试 CSS 媒体查询 除了 Nexus 7 之外 它们在台式机和笔记本电脑上都运行良好 当我更改方向时 除非刷新页面 否则样式不会应用 例如 以纵向模式握住设备时 页面正常

随机推荐

  • 唯一的短信发送者 ID?

    我想构建一个向人们发送短信的应用程序 但是 我希望我的用户知道短信来自应用程序而不是其他任何内容 因此他们无法伪造它 有没有办法保证发件人 ID 对于我的应用程序是唯一的 似乎通过电话发送 SMS 时每个电话号码都有一个唯一的 SENDER
  • Angular 与微数据

    Microdata 是否可以与动态 Angular 一起使用ng repeat items 我可以将它用作 div div 我已经发现模式验证器 https search google com structured data testing
  • 如何将滚动视图布局分成两半以显示父背景颜色和两个窗格?

    我有一个带有白色背景的简单 UI 屏幕 然后我有 Scrollview 四周边距为 10 dp 背景为黑色 所以基本上是一个矩形中的一个矩形 如何将滚动视图分成两半 以便可以在内部黑色矩形的中间显示一条白色水平线 从而创建两个黑色窗格 下面
  • createBottomTabNavigator 具有针对不同选项卡的动态 tabStyle

    根据Document https reactnavigation org docs en bottom tab navigator html bottomtabnavigatorconfig 我可以改变activeTintColor and
  • 使用ansible从配置文件中删除文本块

    我正在尝试从 samba 配置文件 smb conf 中删除以下部分 public path opt samba public guest ok yes browsable yes writable yes read only no Blo
  • 来自 Jenkins 的 Web 服务调用

    我需要编写一个 Web 服务客户端并从 Jenkins 调用它 以下是我的问题 从 Jenkins 调用 Web 服务的最佳方式是什么 有可用的默认插件吗 我需要将 XML 数据作为输入传递给 Web 服务 如果插件不是选项 您能否让我知道
  • 带有 CUDA 的 Lambda 表达式

    如果我使用thrust transform on thrust host lambda 用法没问题 thrust transform thrust host a a arraySize b d int a int b gt int retu
  • 子虚拟目录中的 IIS URL 重写不重定向

    我在 默认网站 果园 上安装了 Asp NET 应用程序 可访问http localhost 果园 http localhost orchard 并且我想使用 URL 重写 我添加了规则
  • 如何删除当前目录中与给定模式不匹配的某些文件?

    using rm sh删除以 sh 结尾的文件很容易且易于理解 但是如何删除当前目录中所有不以以下结尾的文件 jar就像是rm except jar 尝试这个 find mindepth 1 maxdepth 1 name jar sort
  • 如何正确使用 ref 与 React 类组件和样式组件?

    我正在尝试构建一个下拉菜单 基础结构Test是我需要使用 React 检测内容区域之外的点击的地方ref and styled components 我已经检查了 SO 中的相关文章 但它们使用了我的类组件不支持的钩子 这是代码 impor
  • Javascript文件写入覆盖页面?

    我对 javascript 很陌生 我正在尝试使用 document write 使用 Wordpress 创建一个标签 以添加在预加载之前隐藏图像的样式 在通过 CSS 加载图像之前 我不得不编写 Javascript 样式来隐藏图像 我
  • CUDA 纹理内存中支持双精度类型

    计算能力1 3的GTX 280中可以为双精度型变量声明2D纹理吗 该声明仅针对 float 给出 据我所知 你不能 但是 您可以使用 int2 类型 如第 23 点所示 http forums nvidia com index php sh
  • C++ Singleton 未定义的引用

    我是 C 新手 并试图理解 C 中的单例模式 myclass h ifndef MYCLASS H define MYCLASS H class Myclass public static Myclass getInstance priva
  • 使用常量字符串列表中的 INNER JOIN 进行 SQL INSERT

    我想创建一个 SQL Server 2012 查询 它插入一个常量的权限名称列表 例如将 ViewUsersPermission ModifyUsersPermission 添加到表 RolePermissions 中 该表有两列 Role
  • 如何消除日期抖动中的时间

    我想从这个日期中删除时间格式 我想显示这样的日期22 10 2019 or 2019 10 22 2019 10 22 00 00 00 000 现在有一个DateUtils https api flutter dev flutter ma
  • 将 NSTimer 设置为将来触发一次

    如何设置 NSTimer 在将来触发一次 例如 30 秒 到目前为止 我只能将其设置为立即触发 然后每隔一段时间触发 您要使用的方法是 NSTimer scheduledTimerWithTimeInterval NSTimeInterva
  • JSF UrlRewriteFilter 包罗万象/404 替换

    我正在使用 Tuckey UrlRewrite 设置 URL 规则 到目前为止一切正常 但是我正在努力处理我的默认页面 客观的 任何与现有文件不匹配的请求 或者 任何不符合先前规则的请求 应该启动搜索search jsf q 它的目的是处理
  • 在控件的模式弹出扩展器上显示消息框

    我在页面内有一个控件 该控件具有以下模式弹出窗口扩展程序
  • Maven 依赖与多模块?

    对 Maven 非常陌生 有人可以向我解释一下使用 Maven 模块与仅将 Maven 项目的依赖项添加到工作区中的另一个 Maven 项目之间的区别吗 你什么时候会使用其中一种而不是另一种 依赖项是一个预先构建的实体 您可以从 Maven
  • 如何禁用 contenteditable div 中的元素选择和调整大小?

    例如 我有以下布局 div span class text block span Name span a href i class small icon remove i a span div 那么 如何禁用它 和这个 当我尝试完全隐藏控件