Javascript rich text editor that allows locking regions - javascript

I'm looking for a rich text editor that allows for locking regions so that they can't be edited by the user. These locked regions would contain markup, not just plain text. TinyMCE has a plugin to support this but it is quite buggy.

Rather than having the RTE contain the content you don't want edited, why not just put multiple editors around only the areas you want users to edit?
The problem I see with doing it the other way is that you could have individual nodes within the editable text with contenteditable off, but those nodes could still be part of a larger edit (e.g., they could be deleted). To truly prevent them being edited you'd have to check the current selection whenever it changed and disable all user actions until the selection didn't include the locked content. Even if you did that, it would be tricky to make sure that a user didn't add content in a place they weren't supposed to (before the first node, say, assuming the first node was locked).

Related

How to highlight/copy multiple text elements in Adobe Acrobat PDF

I've been having trouble finding a solution to this problem. I'm adding scripting to a PDF form for my job, and my goal is to be able to highlight all 3 rows to allow for easy copying, but also keep the work description as the prepare form text elements so I'm able to interact with it via JavaScript.
The issues I've encountered are that if it's multiple text elements, then I've been unable to find a way to highlight the text in all 3 to allow for copying. Or another issue being that the multi-line text box seems to be much larger than where the text will appear, thus moving into other text lines of the form.
Here is how the area looks in preview mode
Here is how it looks in edit mode (Prepare Form)
The only features I want for sure is to be able to copy the entire work description easily, and to keep the work description as an element that JavaScript can interact with.

Javascript to select/highlight multiple parts of a text

Is there any easy way or plugin to allow users to select (with their mouse) multiple parts of a text on my page?
I know that using window.getSelection().toString() I can get the current selection, but I'd like to allow the user to highlight multiple parts of the text and be able to know what pieces they highlighted.
Something like the picture below:
The general idea is to allow the users to create keywords/key expressions directly from the text
Found one that does exactly what I want (+it's compatible with really old browsers)
https://github.com/mir3z/texthighlighter

TinyMCE: validate elements on each keystroke

I'm using TinyMCE as a base for a WYSIWYG editor, and I'd like to only allow a subset of HTML elements to be entered in it, whatever the mean.
There are three different means of entering HTML elements into the editor: buttons (such as a bold button), shortcuts (CTRL+B for bold) and copy-pasting.
I'm using a custom template, so I only have a limited number of buttons that allow for a certain number of elements.
But using shortcuts or copy/pasting, the user can add whatever he wants to the editor.
The valid_elements configuration option allows to filter out elements (it works as a whitelist), but it's only triggered on cleanup, which (AFAIK) is only run when the form is submitted.
This is great, but I don't want things to be added to the editor in the first place if they're not valid elements.
How could I achieve that behavior?
This is great, but I don't want things to be added to the editor in
the first place if they're not valid elements.
This is not that easy because you will need to check each way of which code can get into the editor and check before the insertion if the html code is valid. It might be easier to call the cleanup yourself on those actions:ed.execCommand('mceCleanup');
Otherwise you will have to check for
the insertion using the code plugin
copy/paste using the paste_preprocess setting
the insertion using the code plugin
and the most annoying: pasting using the right click browser menu (this is a pain in the ass to handle)

How do I simulate browser 'select-all' in GWT

I've got a GWT application that displays largely text spans. I'd like to programatically select all of the text currently in the browser window (similar to pressing from the browser menu).
Can anybody give me a pointer to this?
cheers,
Ian
The select all function is not available for the entire DOM, however there is a selectAll message for TextBoxBase, so what is commonly used for large quantities of text where you automatically want to do a select all is to put the text inside a TextArea. If you don't like the look you can remove the borders from the text area and set it to read-only so that it would appear as just plain text.

Is it possible to detect text selection from a search with Ctrl+F?

How can I detect text selection from a text search using the browsers Ctrl+F.
For example, I want to make a FAQ, where are the items are closed (to remove clutter), and clicking them opens the text within them, but at the same time I don't want Ctrl+F to be broken.
So I'm thinking, is there a way for JavaScript to detect that I have searched for some text within a non visible (but selectable) block of text, and to automatically open it.
Is it even possible to detect text selection from a search with Ctrl+F? If so, how?
A more specific example: I have a div with the id of "one" and a div with the id of "two"
both have their own text:
<div id="one">Google is a search engine</div>
<div id="two">Stackoverflow users are very informative</div>
both have their text hidden from view but still selectable, but not by mouse (using margins or covering)
So a user searches for "Stackoverflow" on this page, I want to trigger a JavaScript function upon the search selection (how??), and I need the function that runs to know which div, with what ID has some text selected.
This is browser dependent. In Chrome (maybe Webkit in general?), it seems to use a selection that is separate from the one in the DOM API.
However, Firefox will use the DOM selection when highlighting text from a Ctrl+F.
For example, go to google.com, and type this in Firebug:
window.getSelection().toString()
This will return ""
Now do a Ctrl+F, type in Privacy, press enter.
Enter the above command again in Firebug, and you will get:
"Privacy"
As far as I know, there is no way. The content of the search field entirely under the control of the browser, and you can't access this from within the page.
What you might be able to do however, is detect a selection in the document and react to that. This will however probably produce many false positives (because you can't distinguish between an ordinary selection and a search), and it won't work with browsers that do not use an ordinary selection to highlight search results.
More info on detecting selections: Introduction to Range on Quirksmode
Why not make the FAQ search friendly and use a service for that. Google Custom Search Engine might be a good place to start.

Categories