Plain and Rich text editor options in TinyMce editor - javascript

I am using the tinymce editor to give a good look of textarea where user write some comments. I want to give him two options: one is plain text and the other is a rich text editor option. When the user clicks on plain text option all rich text option removed and when user click on rich text it will get all options of formatting text. I want to do this in TinyMce Editor.
Is there anyone know how to implement it? I am searching from last 6 days how to implement this but i am failed to get any solution.

This is what i did for my site;
<script type="text/javascript">
function changeposttype(){
if($("#posttype option:selected").text() == 'Simple'){
//tinymce.execCommand('mceToggleEditor',true,'new-post-desc');
tinyMCE.execCommand('mceRemoveControl', false, 'new-post-desc');
}else{
tinyMCE.execCommand('mceAddControl', false, 'new-post-desc');
}
}
</script>
And inside BODY tag
<select id="posttype" onchange="changeposttype()">
<option>Rich</option>
<option>Simple</option>
</select>
<br />
<textarea id="new-post-desc" class="PostEditor"></textarea>

Well, you can take a look here:
Toggle editor with JavaScript
The code used is:
toggleEditor('content')
If you want the editor mode to be toggled based on the option chose by the user from another page, you can execute (or not to) the above function on page load.
There are links to other examples on that page which you might find useful too.
Update:
Upon reading the question a second time, you are asking for a plain-text/html and not a html-source/wysiwyg model. My suggestion above isn't the exact solution but it is still workable if the mode switching in the plain-text mode is hidden and locked.

Related

How can I use clipboard.js with a span tag onselect event?

I was able to create a simple web-page that uses clipboard.js with a button that pastes predefined text using the
data-clipboard-text="Just because you can doesn't mean you should — clipboard.js" property as the documentation at the clipboard.js site shows, but now I want to place some text in a <span> tag and copy it when this text is selected.
However, I don't know how to 'tie' the data-clipboard-action="copy" data-clipboard-target="span" properties to a <span> tag and cause it to copy the <span>'s content with the onselect event.
Are there procedural statements that I can use in javaScript to perform the copying and pasting functions?
My goal is to embed code to copy selected text into the HTML part of an email and allow the recipient of the email to simply copy the selected text to the clipboard so that it can then be pasted from the clipboard into an input text box in a web-application's page.
This would simplify copy/paste on touch-screen devices, such as tablets and cell-phones.
You can use this code to get the selection of the screen and can use 'success' and 'error' event. Read Events and Advance section of the clipboard js
var clipboard = new ClipboardJS('button', {
text: function (trigger) {
return document.getSelection().toString()
}
});
Please see iAmADeveloper's comments for the answer.
Thanks, iAmADeveloper.

Detecting non tagged textarea or input fields

I made a Chrome Extension that allowed me to change certain characters if certain keystroke combinations were made to any input or text area field. It works fine as long as what I am typing in is a input or textarea field. However, when I go to a site like FaceBook and try their post or comments field, it doesn't work because those fields somehow don't have textarea tags in their source.
Here is what I currently use.
document.activeElement.onkeydown = function(){ getCharKeyDown(event) };
document.activeElement.onkeyup = function(){ getCharKeyUp(event) };
What would I need to do, to detect if a user is typing in a textarea that doesn't seem to actually be a text area (in plain JavaScript please)?
Thanks.
Thanks to epascarello, I think I've got it sorted. After a bit of reading about the HTMLElement.contentEditable property, I came across Document.execCommand() which seems to take care of all editable elements.
This was the main change I made
function insertAtCursor(myField, myValue) {
document.execCommand('insertHTML', false, myValue);
}
and now I am able to run my functions wherever.

Qualtrics: Javascript to prevent saving entry from Text Box

I have one Text Box (also called "Text Entry") in my qualtrics survey in which I want participants to write something but I do not want to have the result saved in my data. I do not want to use the password function, therefore I have used JavaScript at the Text Box level.
The code below works to the extent that whatever participants put in the Text Box it will be set to an empty string the moment they hit the Next-Button.
Qualtrics.SurveyEngine.addOnload(function()
{
/*Place Your Javascript Below This Line*/
var currentQuestionID = this.getQuestionInfo().QuestionID
var input = $("QR~"+currentQuestionID);
$('NextButton').onclick = function (event) {
input.value = ""
}
});
The problem: This code only works sometimes. For example when I have two textboxes with the exact same code it only works for the first but not the second one. Similarly for some reason if the textbox is embedded in some other questions it doesn't work either.
Does anybody know how I can make this work either by changing my code or with a completely different solution? Essentially, I just want participants to entry some text which will never be saved in my data and I cannot use the password function.
Solution: One way of solving this would be adding a "Descriptive Text" item in which you can add some simple HTML code:
<p>Please provide your email address:</p><p><br></p>
<input name="nothing" type="textarea">
I don't think JavaScript works well in this case as it can't be guaranteed to run before the page has sent the data.
The best way is to make a dummy HTML "question" which has the appearance of a form but does not save any information.
I tried this out in a test survey by adding a question of type "Descriptive Text", and then in "HTML View" for that question, adding:
<p>This is not a real question, there is just a HTML textarea. </p>
<form id="mydummyform">
<input name="nothing" type="textarea" />
</form>
I found that this sometimes showed the HTML source instead of the form in the survey editor; if it does this, just go to "HTML View" and then "Normal View" and it should resolve correctly. This problem was only in the editor -- it always showed correctly in a preview of the survey.

javascript focus function not working as expected

I am having a jsp/html page.This page is accessed from two different links.
It is Menu1-->demo.html page and from Menu2-->demo.html page(In my case its jsp)
In the demo.html page I am having a text box which is disabled by default.
<input class="mytextinputtextField" type="text" id="countryOfOrigin"
readonly style="background-color:#DCDCDC" />
Now when the demo.html page is accessed from Menu2 , I am checking it using a hidden parameter and again enabling the text box and setting the focus on the text box.
if(document.getElementById("submenu_name").value=="PM")
{
document.getElementById("countryOfOrigin").focus();
}
The field is enable and the cursor is visible but if I type the text is not typed in the text box.
I need to click on the text box to enter the text.
I think it is because of the disabled and again enabling the field .
Please can any one help me to be able to type in the text box on the focus event from javascript.
I am not using JQuery and the browser is I.E 6
Try this :
document.getElementById("countryOfOrigin").removeAttribute('readOnly');
jQuery version :
jQuery('#countryOfOrigin').removeAttr('readOnly');
Have you tried removing the attribute?
document.getElementById("countryOfOrigin").Attributes.Remove("readonly");
or
document.getElementById("countryOfOrigin").removeAttribute("readonly");
Thank you for your help.
I hav found solution or may say work around.
I am pasting the code which may be useful for others
if(document.getElementById("submenu_name").value=="PM")
{
document.getElementById("countryOfOrigin").focus();
document.getElementById("countryOfOrigin").select();
}
Here is an unofficial solution, we have to use the setTimeout() function to delay the focus() execute time.
setTimeout(function() { document.getElementById('myInput').focus(); }, 10);
See http://www.mkyong.com/javascript/focus-is-not-working-in-ie-solution/

Button to Copy a Text Box

I need a simple script that gives me a button that when clicked will copy the contents of a text input box to the clipboard. Or it could be a script that when you click on the text input box, automatically copies the contents to the clipboard and displays a "Copy" message next to the text input box.
I've seen them all over the web, but can't find the code for one now.
This example uses jQuery:
Assuming an input box with an id of foo, and a button with an id of clickme, here's how I'd do it:
var inputText = "";
$("#clickme").click(function() {
inputText = $("#foo").val();
});
// inputText now has the input box's value
Edit:
After your clarification, I now understand what you are trying to do. Unfortunately, flash 10 broke most of the methods to do this. However, some great people wrote ZeroClipboard, which is fully compatible with flash 10 and makes it really easy to accomplish this task. Their wiki explains usage.

Categories

Resources