How does stackoverflow format textarea when click edit button? - javascript

This is not a duplicate question, i know how to create a rich editor, but i meet problems
I want to make a rich text box like stackoverflow does.
I import the wmd plugin just like SO.
When i save a topic to mysql, it saves the processed text like this:
< p>hello world< /p>
< pre >< code >class Text {} < /code >< /pre >
This is normal i think because the html page can render this correctly.
But When i try to edit this topic, it directly shows the code in my textarea:
What i need is this(Just like the first time i entered):
My textarea code is very simple like this:
<!-- text area start -->
<div id="wmd-button-bar"></div>
<textarea id="wmd-input" name="description" onblur="checkForm()">${topic?.description}</textarea>
<div id="wmd-preview"></div>
<!-- text area end -->
Anyone can help ? Thanks.

I find the answer myself.
What i need to do is simply add a new hidden field to store the original text before wmd process it.
And then i save both original and processed text into my database.
When i need to edit it, just use original text.
When i need to render it, use the processed text.

Related

Dynamically adding a text bullet to a text area

I have a form that is pretty dynamically created based off of a project created in Pageflex Studio. I can add script or HTML elements above the text area and I can add script or HTML elements below the text area but I cannot directly edit the text area HTML.
Essentially, I have a textarea that was dynamically added that I can only target using a JQuery selector. I need to add some sort of functionality to this (either a button the user can press or just by pressing enter) where the user can create a text bullet (so not a bullet created with HTML ul/li).
So I want the final result to look something like this:
I tried using the code found from this answer but had trouble getting it to access the textarea. I'm a bit rusty on my JavaScript so I feel like I'm missing something simple here but just not getting it.
you can change bullet size copy any one [⬤,●,•] and set on the code
$("#btn_add").click(function(){
document.getElementById('todolist').value +='● ' + $("#entryText").val()+"\n";
});
#todolist {width:100%;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input placeholder="enter todo value" id="entryText" />
<button id="btn_add">add</button>
<textarea id="todolist" class="todolist" name="todolist" rows="10" placeholder="Maintain your pending tasks"></textarea>

Remove br tags from CKEditor output

I made a CMS and I'm working with posts which were written by Wordpress CMS. I want to save my new content in a way which WordPress did. Actually, WordPress purified the written text a little. It doesn't escape br tags.
Look at this example text (saved by Wordpress):
<span style="color: #0000ff;">Hi.I'm Peter</span>
Its a new line with one Enter key
Its another line after two Enter key
Image of saved text in database
As you can see, it doesn't escape any br tags for new lines.
I used config.enterMode = CKEDITOR.ENTER_BR; to get rid of automatic P tag insertion but now it inserts br for new lines and makes the above example text like this one:
<span style="color:#0000ff">Hi. I'm Peter</span><br />
Its a new line with one Enter key<br />
<br />
Its another line after two Enter key
Image oftext saved by cms and ckeditor
So, I have 2 questions:
1- How can I extract my content exactly like the first example ?
2- I also have problem with showing first example based content in CKeditor and it add br tag for new lines by itself and make text ruined.
Any help would be greatly appreciated.

How to display a generic text inside a text box

I have a textarea/textbox which dynamically gets url from the database. Right now the textbox is showing full url address and does not look good. What I was trying to get is use some generic text like "click here for more info". I tried placeholder but does not work. I need to use generic text and when link go to the link it gets from database. Any help will be highly appreciated.
//just for test
//this text area is getting values from db(url)
<a id="aurl" target="_blank" > <textarea id="evnt"
type="text" name="event" cols="40" disabled></textarea></a>
I don't think it makes any sense to wrap a <textarea> element in an <a> anchor tag. A textarea is expecting user input, where as an anchor tag is for linking you to somewhere else. Could just use a normal hyperlink as below?
click here for more info

How to insert tags inside a input or textarea in html

I am going to design a textarea for writing some formula. Since typing entire formula may cause mistake in formula, I think its is better that users drag and drop variables from another panel. I believe that stackoverflow's tag option could be usefull for this purpose.
How it is possible to design a text area like this?
You cannot directly convert the text box into tag. But you can make it look like a text box by giving a container to have the tag inside and a text box.
<div id="container"><span id="tagContainer"></span>
<input type="text" id="inputText" placeholder="input here.." />
</div>
Using keypress event, you can grab the value of textbox and append it into tagContainer. You can see the implementation here: JSFiddle
You can't.
However you can put another text block with highlight content at same position with that textarea or input.
Reference:
Visit https://codepen.io/lonekorean/pen/gaLEMR
This plugin might be helpful for you. http://aehlke.github.io/tag-it/

javascript: addContent - How to package

While making use of a sample for addContent (located at randomsnippets.com), I stumbled into a problem that I hope someone can help on. This may not be the best/only way to skin this cat, but we have a PHP/MySQL page that has to be modified to ADD rows for data entry when needed.
Their method works (please take a peak at their page), but the value for the FORM element TEXTAREA has it's own form elements in it, including TEXTAREA. The close of the latter TEXTAREA tag interrupts the first value and throws the remaining code to the page, not awaiting insertion by the Submit Button. Results Example: Click Here
The Submit button successfully produces the part that stayed inside, but you see the problem.
- Is there a way to use the javascript addContent function,
- Incorporate the utility of an ADD button
- But avoid using the packaging of FORMS?
Thanks for any help!
Bryan
p.s. The PHP is transparent. Direct inclusion of the HTML contained in the variable as the value of TEXTAREA produces the same result.
I don't really understand what you're trying to accomplish here, but it doesn't matter - the obvious problem is that you're including unescaped HTML in the textarea: the textarea's text must be escaped, just as you would escape text content anywhere else in a HTML document (converting < to < > to > & to &, etc.). The fact that you're ultimately feeding the text back through the browser's HTML parser doesn't matter - if you want the document to load properly, it has to be escaped:
Example:
desired content such as this:
<tr>
<td bgcolor="#F3F3F3" align="center" colspan="3"><hr size="1" color="#C0C0C0"></td>
</tr>
would be included in a textarea like so:
<textarea>
<tr>
<td bgcolor="#F3F3F3" align="center" colspan="3"><hr size="1" color="#C0C0C0"></td>
</tr>
</textarea>

Categories