I have a text area and when the user clicks a button say something like insert an image button the user selects the image to be uploaded and then i would like to add this image to the text area and the user can continue editing the text area, just like what orkut does. How do we achieve such functionality?
You can't display an image directly inside a textarea control.
The closes you can get is overlay an image on it, but it will not be part of the information in the textarea. That is, text will not flow around it and when posting the form it will not be included in the data for the textarea.
Perhaps a writable div (content editable) would suit your purposes better.
I don't believe this is possible. You should look into using a content editable div.
I don't think Orkut actually does what you are talking about either. Looks like they are doing the same thing that stackoverflow does - using a wysiwyg editor, albeit a nicely dressed up or homegrown version. TinyMCE and FCKeditor are the two I'm most familiar with. There are a few leads on this page too: html editor alternative besides tinyMCE
Related
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.
I'm running into an issue where I have a button on my page that has a CKEditor.
When the button is pressed I want to append text to the editor.
I used the following code:
$('#mtxDescription').append($(this).data('key'));
CKEDITOR.instances['mtxDescription'].updateElement();
However this does not work. The editor does not reflect the change. However when I inspect the editor I find that the textarea does show the appropriate text appended, its just the editor is not showing it. Does anyone know of a way to get around this. Also, just in case anyone is wondering, I do have the jquery CKEditor adaptor script referenced in my page.
Also, if a somewhat related, but separate issue.
I have a drop down list that will allow the user to toggle between the text area shown on the page being the CKEDitor WIZIWIG and going back to being a normal textarea again. However I can't seem to do this without literally refreshing the page, I want to do it through javascript/jquery so I don't have to refresh the page whenever the change the dropdown selection. I've already tried the built in destroy method. It doesn't seem to do anything visually, the editor does not revert back to a simple textarea.
Just in case you were going to ask for some more code, here is what my HTML page looks like:
<textarea id="mtxDescription" name="mtxDescription"></textarea>
Here is how I initialize the editor
CKEDITOR.replace('mtxDescription', {
sharedSpaces: { top: 'ed-top'}
});
I was able to solve this problem by using the following code instead of using jQuery CKEDITOR.instances.mtxDescription.insertHtml($(this).data('key')) I still need a way to remove the editor at runtime.
I have a section in my website where a user can type an answer to a Question. For example the questions states:
Movie I have watched the most times:
Answer: Wedding Crashers
I have an edit button next to the question. When the user clicks on the edit button I want the website to open up a text-box with Wedding Crashers in it in the same place as the original answer box. The user can edit the answer and change it to another movie. There should be a save and cancel button below the text-box. Once the user changes the answer from Wedding Crashers to another movie and clicks save, the text-box disappears and the new answer is displayed on the website. For now I only want to be able to edit the hard-coated HTML content. I will connect to a database later and put a query to update the users database as per his/her answer. I think it is something to do with javascript and the CSS properties of display:block and display:hide. Can anybody help?
Seeing you other question relate to Rails, you can use an edit-in-place solution such as
https://github.com/bernat/best_in_place
is that what you need?
Whoa! Clicking edit button sounds like 1999 for me ...
Did You consider using plain text input (with proper styling, no border etc.) that will appear as editable on hover/focus? You still need a bit of javascript to send a request on enter (AJAX for better UX or normal POST when js is disabled) and remove focus from the field. I do it this way at my work. It works really well.
you can use something like this:
document.getElementById('someid').innerHTML = 'Fred Flinstone';
and for changing CSS properties:
document.getElementById('someid').style.borderWidth = '4px';
Is the textbox absolutely necessary?
You can use the wonder of HTML5 (http://html5demos.com/contenteditable) for browsers that support it.
I want to create my own editor with my own style, I tried to edit a couple jquery editors but I can't get what I want.
Here is a sample pic of what I want:
I finished this bar in HTML and its look exactly what I want so the next step is to add actions to these buttons.
I don't have any idea how to do it but let's say that we added a textarea like other editors and attach this textarea with the top buttons - that is what I don't know how to do it.
if there is some way to make the text bold when the user click bold button for example.
We can do it easy with jQuery if this is some DIV element but this is textarea and I don't know to do it with it.
sorry for bad english.
What you would want to look for, for the editor of your choice is some API to execute commands directly instead of using the editors packaged toolbar. It might look something like "ExecuteCommand('bold')". You would then just wire up your buttons to do that.
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.