I have a textarea that outputs HTML code. I am having difficulty getting my jsfiddle to work on my project.
It works perfectly in the JSfiddle but when I use it on my page it keeps outputting the original textarea value and not the updated one.
Should I be using a keypress to make it work or might there be a conflict with other JS code that I have?
http://jsfiddle.net/YPLeB/7/
I am using the same code on my page, but no luck.
<div id="update">
<textarea id="example">I cannot get the alert to show the new value</textarea>
<button id="btn">update</button>
</div>
Script:
$("#btn").click(function() {
alert($('#example').val());
});
I found out what the issue was. I was using nicEdit text editor that was not playing well with textareas. I switched editors and now it works using .val().
Thank you all for your help!
Related
I am using Jquery plugin dotdotdot.. (http://dotdotdot.frebsite.nl/).
I am facing some issues with it.
When I am applying it on my long text in Japanese, it is not working correctly and showing blank instead of truncated text.
I am using wrap:word.
Text I am using is : 筋肉のブレを抑え、さらなるパフォーマンスをサポート独自の段階着圧により効果的に筋肉のブレを抑える高機能ソックス
Expected result : it should show truncate result but its showing blank.
Can anyone please suggest on it..
Regards,
Ritesh
This was fixed as of version 1.6.9.
JSFiddle
However, it is still not working properly if there is a space at the beginning of the sentence.
Works:
<div id="wrapper">筋肉のブレを抑え、さらなるパフォーマンスをサポート独自の段階着圧により効果的に筋肉のブレを抑える高機能ソックス</div>
Doesn't work:
<div id="wrapper"> 筋肉のブレを抑え、さらなるパフォーマンスをサポート独自の段階着圧により効果的に筋肉のブレを抑える高機能ソックス</div>
I am new to summernote text editor. I am trying to get the proper content from the summernote textarea, which infact coming with html tags.
I tried
<textarea class="summernote" id="summernote" ng-model="blog.content" ></textarea>
in my html page and getting the textarea content with,
$("#summernote").code();
it is fetching the content in
html tags. I want the content to be displayed without the html tags.
Thank you for the advice.
Use val() to get all what entered in textarea or text, So :
var content = $("#summernote").val()
in laravel, simple use
{!! $product->small_description !!}
instread of
{{! $product->small_description !}}
in blade file where you want to fetch the data
Use $().text() method to get plain text.
$("<div />").html($("#summernote").code()).text();
After a long time of searching , thought instead of trying that in getting summernote text editor value with plain text, why not try with the angular filter. So searched and got the filter which exactly does what I needed.
Here is the link which did my job.
angularjs to output plain text instead of html
I had the same problem, "fixed" it by using version 0.6.16 instead of the current stable version 0.7. HTML is rendering fine now without extra js code.
Trying to accomplish the above result with jquery.googleSuggest.js is giving me a lot of trouble as can be seen here. Some of the original CSS of jquery UI seems to be shining tough. Anyone any hints on the most elegant way to fix this? (And how to add the grey "gle", after "goo" behavior in the screenshot above?)
HTML
<div class="suggestions_box">
<ul>
<li>f<b>acebook</b></li>
<li>f<b>unda</b></li>
</ul>
</div>
JS
var div = $("<div>").appendTo("#inputs")
, input = $("<input>").appendTo(div);
input.googleSuggest({ service: "web" });
Your custom css in the linked fiddle is creating problems. Removing all the css and adding external jquery-ui.css makes the dropdown appear correctly (as seen in this fork of your fiddle).
Basically, you only need:
// html placeholder for the input
<div id="inputs"></div>
and
// js init code
var input = $("<input>").appendTo($("#inputs"));
input.googleSuggest({ service: "web" });
Also, your other question has already been answered in this thread: How to implement a google suggest-like input field? It's a neat trick accomplished by overlaying two input fields one above the other one, with the lower one disabled and set to the value of first suggested entry.
I'm developing a RTE(rich text editor) using a wrapper div.
<div id="myeditor"></div>
//then
editorfunction(myeditor);
What the function does is add the following elements
<div id="myeditor">
<div class="toolbar">buttons here</div>
<div class="editorwrapper">
<div class="editor-richtext">
rich text etc
</div>
<textarea class="editor-source"><p>rich text etc</p></textarea>
</div>
</div>
I can successfully grab the html from the .editor-richtext and put it inside the textarea, but when I edit the textarea, I don't seem to be able to paste that back into the rich-text.
Thanks in advance!
Update 1
Ok, it seems that
$("richtext").blur(function() {
$("textarea").val($(this).html());
});
Works fine, but not the other way around (from textarea to richtext).
Update 2
It seems it is very unstable, it partially works but is acting strange :\
I'm not able to fully get content from textarea and paste as html into contenteditable. I will continue to do some research.
Update 3
I just updated update 1 and update 2 as I totally flipped textarea and richtext in my brain. Sorry!
Update 4
Ok, I pretty much got it solved now. I just have one slight problem, upon initialization, if I don't focus the contenteditable div and switch to the source view\textarea. the textarea is emptied, and when I then go back to RTE view\contenteditable div it is emptied. from the empty textarea\source.
I'm working on a work-around.
You can hook the onBlur event of textarea to copy the text and paste it in editor-richtext
$("textarea.editor-source").blur(function(){
$("div.editor-richtext").html($(this).val());
});
EDIT
For other way around, you can use the following code segment
$("textarea.editor-source").focus(function(){
$(this).val($("div.editor-richtext").text());
});
You may want to use jQuery and the following functionnalities?
$(".editor-source").keyup(function() {
$(".editor-richtext").html($(this).val());
});
Everything works fine. Selectors in your example are incorrect thought:
HTML:
<div class="editor-richtext">
original text
</div>
<textarea class="editor-source">modified text</textarea>
JS:
$(".editor-source").blur(function() {
$(".editor-richtext").html($(this).val());
});
Demo
UPD:
$(".editor-richtext").click(function(){
$(".editor-source").val($(this).html().trim());
});
new demo that puts content from div into textarea on click event.
I am using the TinyMCE editor. I have a div element. When an edit link is clicked, I would like to replace it with a TinyMCE editor. I added the mceEditor class in the javascript file that will get executed when the edit link is clicked.But it is not working. TinyMCE editor works when I have a textarea during page load. Can someone please tell me how to do it. Thanks.
<textarea id='answer' rows='25' cols='100' class='span-15 mceEditor'></textarea><br />
I added it using tinyMCE.execCommand('mceAddControl',false,'elementId') and removed it using tinyMCE.execCommand('mceRemoveControl',false,'elementId')
Version 4 of tinymce now uses tinymce.execCommand('mceAddEditor', false, 'elementId'); and tinymce.execCommand('mceRemoveEditor', false, 'elementId');