I'm building a gramma-checker system for a client, where users can add comments/suggestions to a given text. When a user selects some text, a button appear to create a comment/suggestion to that given text selection. My problem comes when I want to save the text selection range in a database, along with the comment/suggestion.
I'm currently trying to solve the problem by using Rangy (http://rangy.googlecode.com/).
These are the ideas I'v tried so far:
Using the rangy serializer to serialize the range. The problem with
this approach is that the DOM is changing each time a new
comment/suggestion is added, and therfore not allowing for a
successful deserialization.
Using the rangy selection wrapper and save that directly in the
database, but like the idea above, the target elements content is
changing with each comment/suggestion, which again makes the approach
not work as intended.
Any suggestions to how I could solve this problem would be appriciated.
I haven't used rangy. But here is one way I would approach it.
Get a selected text from a element (tutorial here)
Then add a wrapper span with a specific id to it. (You might want to fetch a unique id from your server)
Then show a form to enter comments.
On Submit, send the span id and comment to server and store it in database.
When re rendering you can easily assign a class to this span to mark it and show comments on hover using css.
This will give you a system like google document where you can comment on text.
Let me know if that helps or you need more explanation on how to accomplish individual steps.
Advantage of this is you dont need to send the selected text back to server or worry about serializing. Just the id of span you wrapped it in.
Related
I've googled and found nothing, so here I am. If this is in the CKEditor documentation, I haven't found it there either.
The powers that be want a user to be able to double-click on a piece of text (say, a word) in CKEditor, and have that be able to open up a new HTML element outside of CKEditor (such as a Bootstrap Modal). Is this even possible, and if so, how do I go about it?
For example, I've written a separate "Agenda Builder" which is really just where you pick some stuff from drop downs like the name of a meeting room, how many seats you'll need, etc, and enter some dates and times. That all gets saved to the database. But in the text in CKEditor, they want to be able to double-click on [[agenda]] and have it then open up that feature for the user to create their agenda and save it (an entirely separate thing from CKEditor), and then later I will "insert" the agenda into the document in place of the [[agenda]] tag. Make sense?
Thanks!
I think I manage to find the answers to these after posting the question... here's what I came up with:
editor.on('doubleclick', function(e) {
var element = e.data.element.$.innerText;
if (element =='[[agenda]]' ) {
alert("clicked on agenda");
}
});
We solved this exact scenario by creating a CKEditor Plugin(for our own use). When you highlight a word and select a drop down from the plugin, it edits the element highlighted.
In our scenario we used an Angular directive for the navigation.
I was working on a website for which I was designing the conversation system (Post, comment, like, etc.) like what all social networking sites have.
I am trying to provide option for inserting smileys along with the normal text content in a textarea.
My Questions
How do I add images like smileys in a textarea (which accepts only text by default) as and when user selects one from the list or puts in the symbol
Once I have the textarea with smileys and normal text, what is the best way to store it in the MySQL database
When displaying the message with smileys, what is the best way to parse the message from the database
NOTE
I am aware of developing a conversation system with just plain text and files. I am just not sure how to add,store,display smileys.
I am already aware of plugins like Tinymce: http://www.tinymce.com/tryit/basic.php
But I want to know how to make my own.
textarea can't be used to display images,use a contenteditable div instead.
As for the backend,store data in the database regularly (ex: Store :) directly)
and maintain a common table/array where you replace these text with the image/smiley each time you display the data.
Wouldn't having some kind of inline notation help here? You could have something like [::smiley-XXX::] where that represents a particular smile. So long as it's something users are unlikely to type by accident it'll be fine.
Then you need a way of converting that from text into HTML, where you inline the appropriate image.
I am working on a business cards project with variable data printing done online. I need a rule I can use so that the fields that are not used or left blank will be suppressed.
At the moment I am getting a blank test field between two text fields if it is left blank. I am new to this so any help will be appreciated.
I'm assuming your situation involves a user typing data into an HTML form after which the information is displayed somehow on an HTML page. If any of that is false, we will need more information to answer your question. It sounds like you have already figured out how to send the information from form to display and you just want to not see empty lines of display. That is handled with CSS style.
First, you need to have some way to test whether the field contains user input. Since you didn't offer any code to build on, I'm going to assume for the moment that you can figure out how to do that.
Then you can use JavaScript to programmatically alter the CSS of a given element. It will go something like this:
if (field_modified === false) {
// cause an HTML element to not be displayed
// here, the value associated to whatever field
// you are testing is displayed in an HTML node with ID 'id_of_node_here'
// There are various other ways of accessing specific HTML nodes
// without giving them IDs. You can research that yourself.
document.getElementById('id_of_node_here').style.display = "none";
}
To test user input in a field, it's probably sufficient to test the length of the value or whether a form element has been changed from default.
I have a list of input objects in my DOM, each with a button. When the user clicks one of the buttons, a dialog box is AJAXed. I would like to pass a reference to one of the input objects, depending on which button is clicked, to the dialog box. This way when the dialog box "Okay" button is clicked, it knows which input to manipulate on the original page.
Have I lost you yet? So how can I pass this input node reference to the AJAXed dialog box?
I am trying to steer away from using a global variable to store the node reference. I also do not want to have to give each input a unique id or name as this would force other areas of my code to become more complicated.
I suspect I will end up having to use one of the above solutions, but before I do, is there some way to pass a node reference via an URL without using the node's id or name? Would I have to use a selector index or something?
Note: Using JQuery.
In my opinion IDs would be the most secure way of identifying nodes.
If you don't like this approach then all is left is using structure to identify elements. A generated path string containing parent hierarchy and child element position would probably do the trick. This question about identifying DOM nodes also contains some tips. The consensus there is to use XPath or something alike. This of course will only work if the structure of your page doesn't change too much.
Personally, I like IDs :)
I don't know if this is possible in Javascript but I am trying to achieve this. I don't know the terminology so I thought I would post it on here with pseudo code to help you understand what I want to implement.
Pseudo Code:
User Selects Option from pull down.
If selection matches criteria
Add text boxes to the form
Else if selection is something else
Add invisible text box with NULL value
I would like to code it myself but if you could post some reference material or links as I have not done much with Javascript.
Thanks
For your first and second entries, google for 'html select onchange'.
You'll want to check out document.createElement for "Add text boxes to the form"
To make your text box invisible, check out the CSS display property, setting it to none or block (or inline)
I've tried to keep this answer very short without code samples because it sounds like you want to do it yourself. Add a comment to my answer if you want more of an example.
EDIT
Also of note, along with document.createElement, you will want to look at appendChild to add the created element to an HTML element, most likely some FORM element in your page.