Ok this is my problem: I want produce a rich text editor when a user can make changes to a large block of text. I then want to be able to identify not only what parts of the document were changed, but most importantly the character index at which these changes happened.
By knowing what was changed I want to be able to replicate those exact changes to a clone of the original document.
I have looked briefly into:
http://code.google.com/p/google-diff-match-patch/
http://ejohn.org/projects/javascript-diff-algorithm/
http://en.wikipedia.org/wiki/User:Cacycle/diff.js
Does anyone know the best way to go about this?
P.S. I know it sounds like a complicated requirement but for what I am building it is neccessary.
Related
The title probably isn't great but there isn't an easy way to explain what I am trying to do.
I have a div with Content editable enabled. I want to make is so that any text written will be saved. I don't want to use localStorage but want to just directly save the text in the html file. I'm not sure if this is possible and I have looked for anything similar and wasn't able to find anything.
No: it is not possible to edit the files you serve to users using only front-end specific technologies. It would be very dangerous.
However, you could trigger an event on text modification and then send changes information to you back-end. There you would have to do some logic to ensure next loading will contain the data changed by your user.
I had no success researching this problem, so apologies for my difficulty in concisely describing it.
Basically, I'm building a website where users can submit "recipes," by way of html form > php. I wanted a way then for users to dynamically add or subtract steps or ingredients (I've seen this on other sites, but I couldn't find a simple pure js solution).
Anyway, I built something akin to what I wanted (example here, JavaScript here), but I'm not convinced it's such a great solution. To retrieve the form info, the php code basically loops through the materials' and steps' ids until it's reached the last one.
Although this solution works, I've run into 2 more problems:
The first is that the text for each input is saved in a js array each time the user types--that way new inputs can be added or removed without losing the text. However, when a new input element is created, if this previous text was too long, it is cut off.
The second is that for the ingredients section, I'd like to have a element where users can only choose standardized measurements (ie mg, g, kg...) and then another for a numeric quantity. I've tried Bootstrap's input-group classes, but the spacing turns out very odd and doesn't work at all on mobile. Is there a better way to accomplish this? This also thoroughly complicates the my original solution, since there will now be 3x as many inputs.
Helo there!
I'm trying to figure out a simple way of doing multiline placeholders inside a textarea (or an alternative solution, more about that in the bottom) that only disappears when the row have changes. So, basically, if this is the initial state of the textarea (or whatever it can be)
Write a question here
Write another question here
Write the third question here
And the user clicks the first question and types A it would look like this:
A
Write another question here
Write the third question here
I've thought about three different solutions so far but not sure which one to prefer.
1) Have ghost content that is rendered separately from the area of text.
2) Instead of using a textarea, have one input per line that the textarea would be. Problem would be to implement textarea behavior but with many inputs instead. Having placeholders per line would be trivial though.
3) Have actual text and use a parser of some kind to add/remove text whenever that is needed.
Appreciate any help/pointers I can get.
I'm using React and Redux but I'm happy to get answers that are including other technologies that I can take inspiration from.
I'm working on a Chrome Extension which I want to replace certain characters in a specific text field on one specific website. It is basically to change emoticon text (like ":-D") into the proper emoji's, such as "😄". I tried a few things I found online (I'm not very good with JS):
- A MutationObserver and then look for all text fields with a certain name, then replace all emoticons by hand. Didn't really do the job properly and also kept firing up the print window for some reason
- Event listener added with event 'keyup' but it doesn't seem to fire up.
Hope you guys know a good solution!
This question does not give anywhere near enough information to answer. Are you using the program for input fields on the website? What solutions have you tried? Where is the code? Essentially, you are asking us to write the entire program for you. This forum is meant for programming help, NOT doing the entire program for you. You need to fix the question to be more specific.
If you just want to replace text elements, you would have to use the select elements by tag name to select all text elements on the page and then search through each of these for the sets of emoticons. Once finding these, you would have to change the elements inner html to fit the emoticon from UTF-8.
I've been looking around for a good back-end independent HTML/CSS/JS widget for many-to-many/has_many relations with XHR filtering and I can't seem to find any.
I find hard to believe people are constantly re-inventing this wheel.
What am I missing?
EDIT: Ok, from the number of people that didn't understand it, this was a crappy question.
I believe that regular web interactions should come at minimal cost (it should either already be in HTML or a package install away).
That's true for most cases. However, I'm having a hard time finding something for picking up an item from a collection (Not autocomplete, something more elaborate than merely a string. If you want an example, assume you want to pick users and have their avatar displayed while picking.).
Picture this:
When you want the user to provide
a short string in a form, you give them an input box
a long text in a form, you give them a text area
a piece of HTML (for a blog post's body, for example), you give them a text area with CKEditor or TinyMCE
pick something from a short list, you give them a drop down menu (like a select box)
a string based on a wide range of known alternatives, you give them an input box with autocomplete (jQuery UI Autocomplete, YUI Autocomplete, etc..)
a set of items from a wide range of options, you give them... drumroll...
I don't know! And that's my question. I've searched a bit and could only come up with jquery-tokeninput as a credible option.