Ionic 4 - Customize context menu

放肆的年华 提交于 2020-01-23 11:12:47

问题


I'm building an Ionic app that has heavy text editing, and I would like to customize the context menu that appears when making a text selection (shown below).

How can I add buttons to this menu? Can it be customized even further? Is it possible to switch this menu out entirely for some custom HTML menu else that appears when the user makes a text selection?

I've seen the plugin cordova-plugin-context-menu but it does not seem to be what I need (although it's hard to say because it doesn't have any screenshots and I'm not sure if it's the same "context menu" that I'm talking about).


回答1:


There is a solution available on Angular from Ben Nadel (kudos to his solution 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) , To work this on Ionic > V4 do the following tweaks,

Step 1: In general when we create directive using ionic cli it pushes ref to app.module.ts, In case if you are using directive on a different page, remove the directive from app.module.ts and include on your component.module.ts

Step 2:

On text-select.directive.ts replace mousedown with touchend and mouseup with touchstart events.

You are done here is the screenshot

UPDATE

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



来源:https://stackoverflow.com/questions/54390849/ionic-4-customize-context-menu

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!