Good in-line code editor similar to TinyMCE?
Added by Mark Travis about 2 months ago
I'm working on a request to allow users to type code (Lua in particular) into a chat-style format, and have the code syntax colored.
Kind of like this forum when you use the "<>" button to insert code
auto someCPPCode = this;
I found a plugin called CodeSample that is a TinyMCE plugin. But that requires double-clicking to open the sub-editor, and the code isn't syntax highlighted until you close it. https://www.tiny.cloud/docs/tinymce/latest/codesample/
Ideally, they want something to work in-line the way TinyMCE works with WTextEdit.
There is https://github.com/codemirror/dev but I'm not sure, yet, what kind of effort that will be to implement via WTextEdit.
Another requirement is to run all code locally with no outside interenet connection, so any library I find needs to be able to run in a local net environment.
Replies (5)
RE: Good in-line code editor similar to TinyMCE? - Added by Matthias Van Ceulebroeck about 2 months ago
Hey Mark,
while I cannot chime in on an alternative, as I've not used one. I can add some information on your remark.
but I'm not sure, yet, what kind of effort that will be to implement via WTextEdit.
I would not override WTextEdit, but go to that file's base class WTextArea. You can then also create the JS implementation file, similar to WTextEdit.js.
The documentation of CodeMirror seems pretty good. Allowing its state to be managed by JS calls.
A rough outline would be to then:
- initialise the widget, loading the JS file, and setting its JS members
- call the JS constructor, which defines the extensions to be used
- the
updateDomfunction will then cal the CodeMirror API on any changes the application performed
You may want to see if the API offers some hooks you should be aware of (content changes, plugin changes, renders, ...), which can be listened to as JSignals.
Personally I don't think it's a huge amount of work (but of course, I work with Wt a lot, and I am biased), and it will be a teaching experience on many Wt concepts.
If you do take this route, and encounter issues, let me know!
If you do take this route, and do NOT encounter issues, still let me know, as I find this interesting! ;)
Best,
Matthias
RE: Good in-line code editor similar to TinyMCE? - Added by Mark Travis 26 days ago
I'll give it a shot. I'll also contribute the basic implementation back to the community if it works.
Is there a naming convention for Wt? Wt::WCodeMirror? Wt::WCodeEdit?
RE: Good in-line code editor similar to TinyMCE? - Added by Matthias Van Ceulebroeck 24 days ago
I don't think this really has a convention, since WTextEdit doesn't mention the specific library it uses at all.
I have a slight preference for WCodeMirrorEdit, since that both mentions the used library and makes clear what the widget's task will be.
This is only a personal preference, so feel free to take up whatever name you see fit.
I'll give it a shot. I'll also contribute the basic implementation back to the community if it works.
That is a wonderful idea. I have a ticket pending to provide more tutorials, so that people can more easily start working with Wt, and have some blueprints for certain approached. This would fit great in there! So if you could provide that to me, that would be fantastic!
RE: Good in-line code editor similar to TinyMCE? - Added by Mark Travis 23 days ago
LOL! Great minds think alike. WCodeMirrorEdit is exactly what I called it.
I look forward to seeing your tutorials! I've been thinking of writing a Wt book if I can find the time. It really deserves to be much more widely used than it is.
RE: Good in-line code editor similar to TinyMCE? - Added by Wim Dumon 23 days ago
Hey Mark,
CodeMirror works well with Wt, I've seen it used in a couple of projects. About 100 lines of integration effort, I guess?
Wim.