codeMirror: How to interactively resize the text area?

Community Driven Extensions Project
Post Reply
stolp
Posts: 4
Joined: 21 Aug 2018, 16:05

27 Jun 2019, 10:52

I like to add resize handles to a pe:codeMirror instance.

The obvious way does not work: Adding a p:resizable pointing to the codeMirror instance id would just resize the hidden textarea rendered with that id which is useless here.

The div containing the actual editor has no id assigned so I cannot address that instead.

Does someone have a hint on how this can be achieved?
Is there an alternative way to influence the codeMirror size?

User avatar
Melloware
Posts: 1182
Joined: 22 Apr 2013, 15:48

27 Jun 2019, 13:51

So when I look at the source on this example: https://www.primefaces.org/showcase-ext ... cUsage.jsf

I see the <div> has a class class="CodeMirror cm-s-blackboard" so could you do something like...

Code: Select all

<p:resizable for="@(.cm-s-blackboard)" handles="e,w,n,se,sw,ne,nw"/>
Using the PFS Selector framework to select the item by class.
PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 7.0.4 / PF Extensions 7.0.1

stolp
Posts: 4
Joined: 21 Aug 2018, 16:05

27 Jun 2019, 17:34

Thanks a lot, it is a splendid idea (which I was not aware of), but sadly we cannot use query selectors here:
jQuery selectors aka PFS are not supported on the server side... expression "@(.cm-s-blackboard)"
Too bad.

User avatar
Melloware
Posts: 1182
Joined: 22 Apr 2013, 15:48

27 Jun 2019, 18:14

Let me look. I might have another clever trick or two up my sleeve.
PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 7.0.4 / PF Extensions 7.0.1

User avatar
Melloware
Posts: 1182
Joined: 22 Apr 2013, 15:48

29 Jun 2019, 13:35

What about just doing what Resizable is doing and call the JS directely in your page like this line.

https://github.com/primefaces/primeface ... ble.js#L71

You could just configure resizable for what you want and do something like...

Code: Select all

$('.cm-s-blackboard').resizable(your.cfg)
PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 7.0.4 / PF Extensions 7.0.1

Post Reply

Return to “Extensions”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest