I am writing a component for a web app which will display some html, and let me capture and manipulate the selection boundaries (of the text selected by the user). I have done this successfully (for Mozilla) with a simple div element using window.getSelection(). However, the browser selection API is different for IE.
If I were to use a textarea instead (for interacting with the selection api), is there a uniform API across the browsers? Then I would need to overlay a DIV on top of this to display the styled text, and presumably I'd need to manage the cursor etc...
Basically I want a rich text editor - but without editing. Does anyone have any advice on the best way to go about this, which is quick, simple and cross browser compatible. I don't want to spend ages reinventing the wheel...
(If anyone's interested - this is for an online xml editor. I capture the users selection on a html version of the xml doc and then send the selection offsets info to the server, where the real xml doc gets marked up).
Kind Regards
Swami
Using a textarea won't help: the API is not consistent there either. I'd suggest using IERange to get a consistent API for selections.
Related
This question is only related to TipTap/Prosemirror and it's APIs.
Hey!
I have a TextNode (pic attached), which I extracted from the editor. And also I have a mark applied to this TextNode. And I want to unset this specific mark from the TextNode that I have.
Main point here is that I need to unset a mark without manual selection from the user.
I've tried a lot to create prosemirror Selection on fly and then toggle mark, but to instantiate Selection you need to provide positions, and I don't have them. And also I cannot find a way to get them somehow.
Also it's not really clear for me why TextNode is not selectable? I mean it's property https://tiptap.dev/api/schema#selectable.
Because of that I wasn't able to create NodeSelection via https://prosemirror.net/docs/ref/#state.NodeSelection^create.
Probably there are some options to make it selectable?
Finally I even tried to just create WEB API Selection from Ranges - https://developer.mozilla.org/en-US/docs/Web/API/Selection, but seems like it's not possible, seems like tiptap or prosemirror preventing me to do that.
I'm one step away from just rough update directly in the JSON of my editor's content, because I can't find other options to make it correctly through APIs.
Probably you can suggest something?
Thanks in advance!
I am trying to build a very simple rich-text editor for customers of my product to customize emails that are sent. An email is mostly just plain text, but it also has the ability to have placeholders - such as "Dear username". Rather than have my users learn some sort of custom syntax to mention placeholders (I want to avoid having them feel like they are doing anything that remotely resembles programming), I would like them to be able to click buttons for the placeholders, at which point the placeholder will be inserted inline into the text area.
If this seems confusing, the closest similarity I can think of is in Facebook or Google+. Both Facebook and Google+ feature a "status" text area where people can share a short amount of mostly-unformatted text. In this text area, they can also tag friends - at which point a new immutable object is added to the text area. People are free to edit text around this object, and it will be moved appropriately.
I'm unsure how to build such a control. My first attempts were to use contenteditable, but that seems riddled with cross-browser incompatibilities, and generally a road of pain.
What would people advise to build such a feature?
What I'm after is the type of text wrapper/token that Gmail uses at least in its address input fields. The objects are presented as boxes that are draggable, have a header and carry at least the email address as content (although the content itself is not presented to the user). Something like the Stackoverflow tags field has if you're unfamiliar with Gmail.
Actually Gmail or stackoverflow aren't perfect examples since I'm looking to inject this kind of wrapped content into text fields, so that they can be dragged among text but specifically in such a way that their own content is safe from modification. The reason is that in our company non IT oriented personnel routinely edit large amounts of text that has plenty of embedded code which obviously still has to work perfectly even after multiple edits.
I'd of course prefer light client side techniques like js but any and all comments are welcome. Thanks :)
jQuery UI provides dragging and sorting functionality which you can embed in any DOM elements.
I've been looking into creating a Rich Text editor, and at first I was planning on using contentEditable, but it turns out the results are extremely inconsistent and that the output HTML is often broken.
I was wondering if there are any alternatives to using contentEditable, such as the way Google Docs does it (they created there own engine).
Even Google Docs are built on contentEditable. They, however, use it in a different way most editors out there do.
When you focus the document area, it just seems like it is focused because of the fake caret. The actual focus goes to an <iframe> with keyboard event listeners set up. The engine (kix) then modifies the document area based on the keys you press.
This is awesome because there are really no serious cross-browser inconsistencies as the browser is not the one modifying the DOM.
The only alternative I can think of might be a simple text input instead of a contentEditable element but why bother with issues like max length when you can just take advantage of contentEditable ;-)
Why not give TinyMCE a go? It is quite good and fairly refined - just need to combine it with PHP and you can save the contents :)
I'm looking for a js WYSIWYG editor that lets me insert readymade content that should be non-editable via the editor's interface, but via a link on it and some custom user interface. Users should be able to add objects to the content that are too complex to be handled by the editor by default and that are finally rendered when the page is displayed.
Looking around I found some TinyMCE plugins, non-editable content and atomic sections, which both point in the right direction but don't look too promising to me. For that I'd like to know if anybody out there has experiences with implementing some functionality like this or can point me to an editor that is probably more suitable for that than TinyMCE?
I implemented something similar using YUI Rich Text Editor. Considering my requirements, dealing with non-editable elements inside an iFrame was a hassle. What I ended up doing is this: whenever the user inserts a custom item using the toolbar (in my case it was a custom gallery with embeddable videos, etc.), I'd "split" the content of the editor at the cursor and insert a gallery "between" the editors. You end up with 2 actual editors and a gallery:
It required a bit of work to manage and render all of the objects and it had its downsides. But with proper CSS and some JS it could be made to look like and work like it's part of the editor.
I think you should stick with Tinymce. Actually all real time editors for browsers use an iframe in which the text gets put due to styling issues i guess. So using another editor won't solve the iframe problem MK_Dev described.