I was wondering if it were possible to preformat text that is inside a textarea. Right now I have a textarea code that I want to add syntax highlighting and also add linenumbers so I am trying to wrap the text inside a pre tag. Is this correct or should I be doing something completely different?
<textarea id="conversation" class="codebox" style="font-family:courier;">
<pre class="brush: js;">// Start typing...</pre>
</textarea>
textareas are not able to render content like you're wanting to do, they only display text. I would suggest an in-browser code editor. A good one is CodeMirror, which is fairly easy to use:
HTML
<textarea id="code" name="code">
// Demo code (the actual new parser character stream implementation)
function StringStream(string) {
this.pos = 0;
this.string = string;
}
...
</textarea>
Javascript
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
lineNumbers: true,
matchBrackets: true
});
And CodeMirror insert an editable block with that content within the new editor.
There are other options. Wikipedia has a comparison of Javascript-based source code editors entry.
Having the Pre tag contain the textarea works in Chrome
The textarea element content is treated as preformatted in implementations, though browsers by default line wrap the text if a line is longer than specified by the cols attribute. The wrapping can be disabled using the nonstandard but widely supported attribute wrap=off.
The textarea element is not adequate for mere display of content, though. Neither is it suitable for setting up an input editor with formatting features, since all markup inside textarea is taken literally.
Related
I have a tinyMCE editor and I want to build 2 buttons that allow raw/styled copying to clipboard of the text.
Raw works perfectly with getContent({ format : 'text' });
the copyRich2Clip function should mimic the browser behavior of keeping the styling when copying the text. With the below function, when I paste to word it just shows the html tags.
How can I get the tinyMCE content in a format that can be pasted with the applied styling so that it will look the same in word as in the browser editor instance?
function copyRich2Clip() {
var copyText = tinyMCE.activeEditor.getContent();
var dummy = $('<input>').val(copyText).appendTo('body').select()
document.execCommand("copy");
dummy.remove()
}
Thanks
I managed it with the execCommand, selectAll and copy
tinyMCE.execCommand('selectAll',true,'id_text');
tinyMCE.execCommand('copy',true,'id_text');
I know virtually nothing about Javascript. By a monkey-see, monkey-do approach I’ve managed to successfully use Javascript within AppleScript/Safari to fill text fields on a web-site using the following command:
do JavaScript "document.getElementById('ElementID').value ='TextToEnter';" in document 1
I’ve been able to enter text into all fields except one. The fields that work are labeled as input type="text”. The field that doesn’t work is complex in that the entered text can be formatted (bold, italics, underline, alignment, etc.) after entry. Assuming I’ve identified the correct source code for this element it looks as follows PRIOR TO any text entry:
<body id="tinymce" class="mce-content-body " onload="window.parent.tinymce.get('fax_text').fire('load');" contenteditable="true" spellcheck="false"><p><br data-mce-bogus="1"></p></body>
Depending on how its viewed, sometimes the p and br tags appear on separate lines but everything is otherwise identical.
After manual entry of text (“INSERT TEXT HERE”) directly into the web page's text field the source code becomes:
<body id="tinymce" class="mce-content-body " onload="window.parent.tinymce.get('fax_text').fire('load');" contenteditable="true" spellcheck="false"><p>INSERT TEXT HERE</p></body>
The following did not work (wrapped in Applescript):
document.getElementById('tinymce').value ='INSERT TEXT HERE';
It produces the error: "missing value".
As per #WhiteHat, the following with n= 0-4 inserted text at several spots on the page but not in the targeted text field; n > 4 resulted in the "missing value" error:
document.getElementsByTagName('p')[n].innerHTML ='Insert text here';
I tried targeting the br tag but to no avail. How do I target this text field with Javascript? Note: I do not need to format the entered text.
You need to access the <p> element, which is just after the body of the document, as such...
document.getElementsByTagName('P')[0].innerHTML = 'your text'
The getElementsByTagName function returns an array of all elements with the tag name you provide, P in this case. You're looking for the first one, hence the [0].
The innerHTML property will allow you to set the contents of the <p> element.
Following is a good JavaScript reference...
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference
The following reference is for the web page, or Document Object Model (DOM).
https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model
And tinymce is a 3rd party JavaScript library which allows the rich edit functionality.
http://www.tinymce.com/
Based on the comments, the specific field you are looking for is named fax_text. Here is the source, it's in a textarea tag, take note on which function to use TagName vs. Name...
document.getElementsByName('fax_text')[0].value = 'This is my text!';
document.getElementsByTagName('textarea')[0].value =
document.getElementsByName('fax_text')[0].value +
'\nThis is additional text...';
<textarea rows="5" name="fax_text" cols="36" class="mytext"></textarea>
This text field is in an iFrame.
This iFrame contains an HTML document (<html><head><body>).
To get this document, you need the_iFrame.contentDocument.
do JavaScript "var ifr = document.getElementById('fax_text_ifr'); ifr.contentDocument.getElementsByTagName('p')[0].innerHTML = 'some text';" in document 1
I'm using tinymce to edit some field in a web application.
I need to have an html result (after editing) with some specification.
For example: when I press enter tinymce create a new paragraph (that's ok, and I know this behaviour can be changed, but paragraph is ok).
What I need is a specific style to the paragraph be applied.
I saw there is the possibility to specify content_css, but this is a visual deformation of what is written in the edited html.
my need is when I press enter a paragraph with specific style (margin, alignmnent, ..) must be written directly in the edited html text.
e.g. <P style="margin-top:2px; margin-bottom:10px"> ...</P>
Is it possibile to define specific style to be applied to each html tags ?
I need this because after editing, the html content is used in another part of application, where I can not add additional style configurations.
Did you try that?
...
'content_css' : './path/to/your/styles.css',
...
styles.css
p {
margin-top:2px;
margin-bottom:10px
}
..I saw there is the possibility to specify content_css, but this is a visual deformation..
True, but don't forget that this visual deformation is extracted when you call tinyMCE.activeEditor.getContent().
Though, i'm not sure it will extract your specific styles applied to <p> (untested)
Check also here
UPDATED
Ok, i have another suggestion using HTML parsing using this.
$html = str_get_html("<div>add here your HTML from tinymce editor <p></p></div> test <p></p>");
foreach($html->find("p") as $p) {
$p->style = "margin:2px 0 10px 0";
}
$html_modified = $html;
The $html_modified should contain the <p> with margin applied.
Yes it is possible in tinymce. Just go to Tools -> Source Code of the editor toolbar. Write your HTML code with style there. You can try yourself.
When inserting a new emoji inside my textbox i want to be displayed as the emoji image and not the emoji symbol how can i do that like instead of ( ':)'--> put the image represent it inside my textbox )
One way: Instead of a text box, use a <div contenteditable="true"></div>. As the user types, change occurrences of the smiley for the image. When the form is submitted, your javascript needs to translate the contents of that div back into plain text and put it into a field for submission.
If you want to use images, then it would require you to change your HTML significantly. You would need to make use of the Content Editable functionality on something like a <span>, rather than a regular input box. You'd then need JavaScript code to monitor keypress events and whenever it sees a :) (or whatever), it replaces the code with the appropriate <img>.
A quick-and-dirty solution that sticks with your text box, however, would be to use the same approach, but use the Unicode emoji characters (rather than images). This will only work on platforms with the appropriate font glyphs -- although the common smilies are more widely supported -- but it gives you the idea:
HTML:
<input class="emojify" type="text" />
JavaScript (using jQuery, to make everyone's life easier):
$(document).ready(function() {
// Map plaintext smilies to Unicode equivalents
var emoji = {
':)': '\u263a',
':(': '\u2639'
},
// Function to escape regular expressions
reEscape = function(s) {
return s.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
};
$('input.emojify').keyup(function() {
var text = $(this).val();
// See if any of our emoji exist in the text and replace with Unicode
$.each(emoji, function(plaintext, unicode) {
text = text.replace(new RegExp(reEscape(plaintext), 'g'), unicode);
});
// Replace text with new values
$(this).val(text);
});
});
Here's a working demo on jsFiddle. Note that the caret position will be reset every time the keyup event is triggered. I'm sure you can work around that somehow, but this code suffices to illustrate the process.
I have a regular texbox control. I need to highlight some words with a red color. Is it any possible to do with JavaScript (jquery or anything else)?
Most rich text javascript editors use an iframe with designMode='on' since that yields the best cross browser results:
<iframe ID="rtbox"></iframe>
To make the iframe editable and insert rich text via Javascript you can use the following sample code:
var rtbox = document.getElementById('rtbox');
var doc = rtbox.document ? rtbox.document : rtbox.contentDocument;
doc.designMode = 'on';
doc.body.innerHTML = 'one <span style="color:red">red</span> word';
No, you can't do that. Your only way would be to use a rich text editor component like FCKEditor or similar.
No you cannot use different styles in a standard <textarea>.
I recommend using TinyMCE for a rich text editor.
And no, what you say is not possible on a normat textarea.