Ionic 4 - 自定义上下文菜单
Ionic 4 - Customize context menu
我正在构建一个具有大量文本编辑功能的 Ionic 应用程序,我想自定义在进行文本选择时出现的上下文菜单(如下所示)。
如何向该菜单添加按钮?是否可以进一步定制?是否可以针对用户进行文本选择时出现的某些自定义 HTML 菜单完全切换此菜单?
我看过插件cordova-plugin-context-menu,但它似乎不是我需要的(虽然很难说,因为它没有任何截图,我不确定它是否是与我所说的 "context menu" 相同)。
Angular Ben Nadel 提供了一个解决方案(感谢他的解决方案 https://www.bennadel.com/blog/3439-creating-a-medium-inspired-text-selection-directive-in-angular-5-2-10.htm), this works only on tags not on Input elements (https://developer.mozilla.org/en-US/docs/Web/Events/selectionchange),要在 Ionic > V4 上执行此操作经过调整,
第 1 步:
一般来说,当我们使用 ionic cli 创建指令时,它会将 ref 推送到 app.module.ts,如果您在不同的页面上使用指令,请从 app.module.ts 中删除指令并包含在您的 component.module.ts
第 2 步:
在文本上-select.directive.ts 用 touchend 替换 mousedown,用 touchstart 事件替换 mouseup。
你已经完成了这里是截图
更新
Unfortunately this text selection works on tags but not on the Input
elements, check
https://developer.mozilla.org/en-US/docs/Web/Events/selectionchange
Browser compatibility Section
我正在构建一个具有大量文本编辑功能的 Ionic 应用程序,我想自定义在进行文本选择时出现的上下文菜单(如下所示)。
如何向该菜单添加按钮?是否可以进一步定制?是否可以针对用户进行文本选择时出现的某些自定义 HTML 菜单完全切换此菜单?
我看过插件cordova-plugin-context-menu,但它似乎不是我需要的(虽然很难说,因为它没有任何截图,我不确定它是否是与我所说的 "context menu" 相同)。
Angular Ben Nadel 提供了一个解决方案(感谢他的解决方案 https://www.bennadel.com/blog/3439-creating-a-medium-inspired-text-selection-directive-in-angular-5-2-10.htm), this works only on tags not on Input elements (https://developer.mozilla.org/en-US/docs/Web/Events/selectionchange),要在 Ionic > V4 上执行此操作经过调整,
第 1 步: 一般来说,当我们使用 ionic cli 创建指令时,它会将 ref 推送到 app.module.ts,如果您在不同的页面上使用指令,请从 app.module.ts 中删除指令并包含在您的 component.module.ts
第 2 步:
在文本上-select.directive.ts 用 touchend 替换 mousedown,用 touchstart 事件替换 mouseup。
你已经完成了这里是截图
更新
Unfortunately this text selection works on tags but not on the Input elements, check https://developer.mozilla.org/en-US/docs/Web/Events/selectionchange Browser compatibility Section