Populate a div from TinyMCE content dynamically - javascript

I'm trying to get the contents from a TinyMCE textarea to populate a button/div as I type. This is to show the client how the button/div will look like when it goes live. Everything else works dynamically, such as the button/div colour, the title and dropdown.
The issue lies with dynamically retrieving the contents from TinyMCE. If I use a standard textarea box it works fine. I want the client to be able to use some of the basic features of TinyMCE.
Kind of how this form field is working. As I'm typing in this box, I can see my text updating below.
My JS is:
$(document).on('change', '#ParentID', function() {
var NTxt = $('#ParentID option:selected').text();
var NVal = document.getElementById("ParentID").value;
NTxt = NTxt.replace(/ # /g,"<br/>");
if(NVal != "0"){
if(NTxt.value != null || NTxt.value != "0" || NTxt.value != undefined){
$("#LTxt").html(NTxt);
}
}else{
$("#LTxt").html('External Link Text/Quote Text');
}
});
$(document).on('keyup', '#Opt2', function() {
$('#LTxt').text($(this).val());
});
Here are some screen grabs:
1. Normal State:
2. Populated title and dropdown "internal link" text:
3. Textarea, populating same place (WITHOUT TINYMCE):
Anyone know how I can do this with TinyMCE? I've tried...
tinymce.get('content id').getContent()
...but it didn't seem to populate dynamically.
This is the key question: How to pass anything typed into the TinyMCE textarea into the button, at the bottom, as the user is typing?
Many thanks in advance,
Glynn

You need to use a variety of events that TinyMCE triggers to know when its content has changed. You can then grab the content from the editor and do whatever you need with it.
Here is an example that shows the actual raw HTML in a neighboring DIV. It can easily be adapted to insert the HTML into an elements so its actually rendered to the page.
http://fiddle.tinymce.com/Gegaab/5
The list of available events is documented here: https://www.tinymce.com/docs/advanced/events/#editorevents
The example uses the keydown and change events in particular but there are many to choose from if those don't fit your needs.

Related

Making a FormBody Shrink and Expand Using JQuery and SharePoint

I am creating a form in sharepoint. I have an ms-FormBody for a text box. I would like for the user to be able to double click the box in order to expand the box and if they double click again, it will shrink back up. Again this is in SharePoint.
EDIT: Thanks to some help from #Thriggle I am very close to the goal I wanted with this project. The problem now is that Whatever you type will only stay on one line (t ext wrapping maybe?). Also The text box doesn't actually take up less space (This is not a big deal but if you can think of anyway to make the rest of the boxes move as this box resizes) and I was wondering if there is a way that the box will be small when program launches.
Based on your screenshots, I'm assuming that you're using Nintex Forms.
For Plain Text Multi-Line Fields
The following will work for plain text multiline fields, but not for rich text or enhanced rich text fields (neither of which are represented by an ordinary textarea element).
In your form settings, in the Custom JavaScript section, you can add the following code:
ExecuteOrDelayUntilScriptLoaded(function(){setTimeout(checkFieldExists,1000);},"sp.js");
function checkFieldExists(){
// Nintex forms load slowly; we'll hold off on running the code
// until we're able to access the element through the DOM.
var field = document.getElementById(DescriptionID);
if(field){
// The field exists, time to attach an event listener.
addExpansionToggleEvent(field);
}else{
// Wait a second, then check again.
setTimeout(checkFieldExists,1000);
}
}
function addExpansionToggleEvent(field){
field.style.height = ""; // remove the default height=100%
field.ondblclick = function(){
var rows = field.getAttribute("rows");
field.setAttribute("rows",+rows < 10 ? 10 : 1);
};
}
This is assuming you added a client ID of DescriptionID to the plain text multiline field that you want to toggle, as shown in your screenshot.
For Rich Text Multi-Line Fields
Rich text fields are (bizarrely) represented by iframes instead of textarea elements.
The following code can be added to your Custom JavaScript section to provide expand/shrink behavior upon double-clicking a rich text field, but note that this does not readjust the way other controls are laid out on the form to account for the field's new size... so it's not especially useful.
ExecuteOrDelayUntilScriptLoaded(function(){setTimeout(checkFieldExists,1000);},"sp.js");
function checkFieldExists(){
var iframes = document.querySelectorAll("iframe[title=\"Rich Text Editor\"]");
if(iframes.length > 0){
addExpansionToggleEvent(iframes);
}else{
setTimeout(checkFieldExists,1000);
}
}
function addExpansionToggleEvent(iframes){
for(var i = 0, len = iframes.length; i < len; i++){
var body = iframes[i].contentDocument.querySelector("body");
(function(container){
body.ondblclick = function(){
container.height = +(container.height) < 140 ? 140 : 30;
};
})(iframes[i]);
}
}
Again, this code is specifically targeted toward rich text field, and will not work for plain text or enhanced rich text fields.

jQuery: show html elements when a disabled select menu is loaded

In my application users can edit information for their reservation but I don't want them to change the type of reservation. So I have thought to load a page with a select menu displaying the type of reservation but it is also disabled. What I would like to happen is that on page load if the select menu is disabled then the relative elements are showed according to the selected but disabled type. Reading the documentation this is what I have thought I need:
jQuery("#tipologia_piazzola").load(function(){
alert("something");
if (this.value == "mensile" && this.is(":disabled")) {
jQuery(".both").show();
jQuery(".mensile").show();
jQuery(".giornaliera").hide();
}
});
Obviously I have inserted it inside the ready function but neither the alert nor the html elements appear. Is this the correct way? Or, how can I reach my goal?
You need to use jQuery(this) instead of this to call is(':disabled') function because it need jQuery object and not javascript object. Also use document.ready as shown below to ensure that all DOM element is ready.
jQuery(document).ready(function(){
var $this = jQuery('#tipologia_piazzola');
if ($this.val() == "mensile" && $this.is(":disabled")) {
jQuery(".both").show();
jQuery(".mensile").show();
jQuery(".giornaliera").hide();
}
});
NOTE : - please exclude document.ready if you have it already and put above code in your existing document.ready

Change the title of a page while typing

As an exercise for myself I'm trying to make a blog posting application using JavasScript, JQuery and PHP. What I want to happen is that, when you're typing, the title of the page changes. With this, I mean the title declared within the <title></title> tags. A good example of this is StackOverflow: when you're asking a new question, you type in the title of that post, and the page title (the one declared inside the <head>) changes to the title you are typing.
How is this effect done? Is it possible using only JavaScript/JQuery or do you need AJAX for it?
You can just change the title with JS:
document.title = 'New title';
About the effect you are looking for you can probably do something in the lines of:
$(document).ready(function() {
$("input").keyup(function() {
var text = $(this).val();
document.title = text;
});
});
I'm not sure but I think you want to change the page title to whatever is typed in a input tag, For example
something like this?
$(document).ready(function () {
$('#myInput').keyup(function () {
$(document).attr('title', $('#myInput').val());
});
});
the above will track the changes of key up (on keyboard) and get the value of the text input and set it as page title :
here a working fiddle: http://jsfiddle.net/ZLPfM/show
To change the page title, you can do one of two things:
//plain javascript
document.title = 'My JavaScript title!';
//jQuery
$(document).attr('title', 'My jQuery Title');
In order to change it while typing, hook up an keyup event:
$(document).keyup(function(e)
{
//Check the keycode using e.keyCode
});
This will bind it to the document, which means anytime a key is pressed, within an input or otherwise, your event will fire. You could also bind it to a textbox so that it will only fire when you type within the input (which is probably what you want to do).
If you bind to the document, like shown above, you'll have to check the keyCode and append the value onto your title. If you bind to an input, you can grab the input value and set the title to the new value:
$('#myinput').keyup(function(e)
{
var text = $(this).val();
document.title = text;
});

Unable to Retrieve Text from DOM

Using JS in CSOM for SharePoint 2013, I'm having difficulty retrieving the text from an element. This is from a custom display form for a custom list. The column type in question is a multi-line text box, but is rendered differently in the display form due to the form override script being used.
Inspect element in Chrome reveals:
<span class="formOverride" id="itemData" data-displayName="RequisitionItems">
<div dir>1||X-HEDC.000.000||GC-M||Critical Item #42||1||10||$10.00||</div>
</span>
Every attempt at retrieving the text in the div element has resulted in an empty string.
document.getElementById("itemData").innerText;
$("#itemData").text();
$("span#itemData.formOverride").text();
$("span#itemData.formOverride").children().text();
When I display the DOM properties for the span, the innerText is even listed properly, but still an empty string is returned.
What am I missing...?
Thanks in advance.
Edit: More info...
Override script:
$("span.formOverride").each(function()
{
//get the display name from the custom layout
displayName = $(this).attr("data-displayName");
elem = $(this);
//find the corresponding field from the default form and move it
//into the custom layout
$("table.ms-formtable td").each(function(){
if (this.innerHTML.indexOf('FieldName="'+displayName+'"') != -1){
$(this).contents().appendTo(elem);
}
});
});
So, the span posted originally has the contents from the default display form appended. I've never had any troubles accessing the formOverride information previously, so this is just being odd.
Further update:
Seems I cannot access any element's text on the page. It also appears that this is an issue particular to a SharePoint display form. I copied in full the script/html from my Edit page and pasted it into the Display page's corresponding file. In Edit the text returns fine, but in Display the text returned is an empty string.
Should be
$("#itemData").children().first().text();
Or
$("#itemData").find("div").text();
Or
$("#itemData div").text();
Your markup has a quote opening error
<span class="formOverride" id="itemData" data-displayName="RequisitionItems">
<div dir>1||X-HEDC.000.000||GC-M||Critical Item #42||1||10||$10.00||</div>
</span>
then
jQuery(function () {
console.log($("#itemData").text())
})
Demo: Fiddle

Formatting text in dynamicaly created textboxes

I have jquery that generates textareas with different id's. Now i need to make some buttons that will format text inside that textareas. For example: when user clicks in certain textarea, enter text, and click "bold" button, only text inside of that textarea will become bold (in other will be normal). I did manage to make something like this with JS, but it was too primitive (text was formated in all of textboxes) :(
Here is some sample code for this:
<button id="bold">B</button>
<textarea id="ta_1">Some test text</textarea>
<textarea id="ta_2">Some test text</textarea>
What i want to say: one button, multiply text boxes. Entering text in ta_1 and clicking bold, should bold only text in that txtarea. Additional info: all id's starting with same word, just different number at the end.
I feel there is some simple solution, just cant figure it out :D
Actually this is a really bad practice, but you can do that like this,
var activeEl;
$("textarea").focus(function() {
activeEl = $(this);
});
$("#bold").click(function() {
$("textarea").css("font-weight", "");
activeEl.css("font-weight","bold");
});
​
​
DEMO
UPDATE-1: I don't know why you are trying to do this, but I suggest to you use a WYSIWYG Editor like elRTE
UPDATE-2 : You can costomize your toolbar in elRTE, if you want your editor has just a "bold" button, yes you can do that,
$(document).ready(function() {
elRTE.prototype.options.panels.web2pyPanel = ['bold'];
elRTE.prototype.options.toolbars.web2pyToolbar = ['web2pyPanel'];
var opts = {
toolbar: 'web2pyToolbar',
}
var rte = $('#our-element').elrte(opts);
});​
DEMO FOR elRTE
I'm not sure this is a great idea for user functionality, but it can be done. You'll just need to record the "active textarea" somwhere. I would suggest using .data(). jsFiddle
//disable the button until we have a target textarea to avoid confusion
$('#bold').attr('disabled','disabled');
//Record a new 'activeElement' each time user focuses a textarea
$('textarea').focus(function(e){
$('#bold').data('activeElement',e.target)
.removeAttr('disabled');//this first time we will enable the bold button
});
//retrieve the stored 'activeElement' and do something to it
$('#bold').click(function(){
var activeElement = $('#bold').data('activeElement');
$(activeElement).css('font-weight','bold');
});
Most people expect a "text formatting" button to work on their selection. Selections and ranges are out of the perview of jQuery and quite complicated to work with. As has been suggested already, I would advise using one of the many wonderful WYSIWYGs like tinyMCE.
Use document.activeElement
var activeEl;
$('#bold').mousedown(function()
{
activeEl = document.activeElement
});
$("#bold").click(function() {
//check activeElement
if(......){
activeEl .css("font-weight","bold");
}
});
Don't forget check that activeElement exactly textarea

Categories