Changing content CSS on the run in TinyMCE or CKEditor - javascript

I have a form in which I want to edit a HTML template. It has 2 textareas, one for the HTML and another one for the CSS.
I'd like to use either TinyMCE or CKEditor for the HTML textarea.
Is there any way to change the content CSS in either of them to match the CSS in the CSS textarea on the run, so when I change the CSS it is automatically loaded into the editor?
Thanks.

I have no experience with CKEditor, but i know that it is possible with TinyMce. What you need to do is to write an own plugin which will provide the necessary functionality.
OnNodeChange in the 2nd textarea (the one with your css) you need to update the head of the first editors iframe. This code snippet to be executed on a special action (for example onNodeChange) should point you into the right direction:
var DEBUG = false;
var css_code = tinymce.editors[1].getContent(); // get content of 2nd editorinstance on page (your css)
iframe_id = tinymce.editors[0].id+'_ifr';
with(document.getElementById(iframe_id).contentWindow){
var h=document.getElementsByTagName("head");
if (!h.length) {
if (DEBUG) console.log('length of h is null');
return;
}
var newStyleSheet=document.createElement("style");
newStyleSheet.type="text/css";
h[0].appendChild(newStyleSheet);
try{
if (typeof newStyleSheet.styleSheet !== "undefined") {
newStyleSheet.styleSheet.cssText = css_code;
}
else {
newStyleSheet.appendChild(document.createTextNode(css_code));
newStyleSheet.innerHTML=css_code;
}
}
Be aware that this code will add a new style sheet everytime it is called - yielding in increasing the editor iframes head. So i think best practice is to clean up the last inserted style before appliing the new one. Removing the last Node of the head shozld be sufficient.

Related

How to get html element after append with pure JavaScript?

I found some JQuery solutions, but I am limited by school task restrictions to use pure Javascript, and I need to use specific early appended element that is still not in DOM for replacing by my CKEDITOR.
Code:
function newOption(){
...
mainUL = document.getElementById("myUL");
var inputA = document.createElement("input");
inputA.type ="text";
inputA.style = "margin-right: 45px";
inputA.name = "option[]";
inputA.id = inputID;
mainUL.appendChild(inputA );
CKEDITOR.replace(inputID).setData('Type anything you want ...');
...
}
By replacing my input with CKEDITOR will JS fail, because input, commonly, is still not in DOM. I tried to use
mainUL.innerHTML += "all elements like html text";
and this is working and will immediately insert elements into DOM, but I can't to use innerHTML, because it will remove old listeners (for example checked checkboxes that JS will set from checked to unchecked, what is my main problem due to I have to try using append DOM function).
Try changing the code to wrap the call to CKEDITOR.replace in a setTimeout:
setTimeout(function() {
CKEDITOR.replace(inputID).setData('Type anything you want ...');
},0).
This will allow the browser time to insert the element before trying to replace it.
And I assume that inputID has a valid value in it...

I have an error in Javascript with an A href

I don't understand why this an issue.
Could someone explain the issue and may be a possible fix.
Thank you.
Error:
XHTML element "a" is not allowed as child of XHTML element "script" in this context
Code:
<script type="text/javascript">
// Andy Langton's show/hide/mini-accordion - updated 23/11/2009
// Latest version # http://andylangton.co.uk/jquery-show-hide
// this tells jquery to run the function below once the DOM is ready
$(document).ready(function() {
// choose text for the show/hide link - can contain HTML (e.g. an image)
var showText='More Info';
var hideText='Less Info';
// initialise the visibility check
var is_visible = false;
// append show/hide links to the element directly preceding the element with a class of "toggle"
***$('.toggle').prev().append(' ('+showText+')');***
// hide all of the elements with a class of 'toggle'
$('.toggle').hide();
// capture clicks on the toggle links
$('a.toggleLink').click(function() {
// switch visibility
is_visible = !is_visible;
// change the link depending on whether the element is shown or hidden
$(this).html( (!is_visible) ? showText : hideText);
// toggle the display - uncomment the next line for a basic "accordion" style
//$('.toggle').hide();$('a.toggleLink').html(showText);
$(this).parent().next('.toggle').toggle('slow');
// return false so any link destination is not followed
return false;
});
});
<script>
There are differences between HTML and XHTML. In XHTML, scripts don't have a CDATA content type: the contents is treated exactly the same as any other element. It's not just a NetBeans issue.
So, there are several solutions:
Put the script in a separate file, so that its contents will not be mangled by the XML parser. This is the best solution, as it doesn't have any drawbacks. It works for HTML and XHTML.
Make sure the contents don't contain any < or & signs. Also make sure that editing the script will not introduce < or & signs later on. Replace them with their entity references: < and & respectively.
If the script doesn't contain ]]>, you can put the whole content in a <![CDATA[ .. ]]> block. This may even work in HTML in some browsers, but as <![CDATA[ is not formally defined as part of the HTML standard, this method is (officially) not HTML compatible.

have element change appreance with only javascript and CSS

attempting to have my webpage be a bit more dynamic by having the background change on some elements when a checkbox is clicked. I am trying to do this via class change and a CSS sheet. I have the following which is kicking out an error that my onclick function ins not defined (in IE9). More importantly will the webpage update if I only change the class of the object which would have a different class in the CSS file. Whats a better alternative if this does not work?
my elemenet and function
UPDATE
I made updates to both my HTML and CSS file as suggested by many. I am still getting no change in my webpage but the console is claiming that my function called from the onclick event is not defined which is a bit odd since it is. Also does this type for scripting belong in the HTML or should I pull it out and put in a seperate file. I figured since it was creating elements it belongs in the main html. Is there a cleaner more compact way of accomplishing this and not making my home screen html huge?
<tr class= 'tr.notchosen'><td><input type='checkbox' onclick='handleClick(this.id)'/></td></tr>
function handleClick(cb) {
var currentColumn = cb.parentNode
var currentRow = currentColumn.parentNode
if (currentRow.className === "chosen")
{
currentRow.className = "notchosen";
}
else
{
currentRow.className = "chosen";
}
}
and my css file is the following
tr.chosen
{
background-color:rgba(255,223,0,0.75);
}
tr.notchosen
{
background-color:rgba(255,223,0,0);
}
There are a couple of things going on here. First, your css selector is not quite right. In fact, I would suggest making the class name just "chosen" or "not chosen" and then selecting tr elements with that class.
<tr class='notchosen'>
And then you can target it from css (which was probably the original intention)
tr.notchosen
{
background-color:rgba(255,223,0,0);
}
Further, although I would not suggest using inline javascript, using your example, you should pass this if you want to work with the element and not this.id which would pass a string.
onclick='handleClick(this)'
The last part would be to sync up your javascript with the class name change
if (currentRow.className == "chosen")
{
currentRow.className = "notchosen";
}
else
{
currentRow.className = "chosen";
}

html tags changing but no change made on form

I am using the following code to change the attributes of a tag on my form
the tag
<input jwcid="licensingApprovalDate#CustomDatePicker" disabled="ognl:disabled || isLicensingApprovalDateDisabled()"
value="ognl:company.licensingApprovalDate" displayName="message:company.licensingApprovalDate"/>
the code to add new attributes to the above tag
function checkForChange(field) {
var approvalStatus = document.getElementById('licensingStatus').value;
if(approvalStatus == "Pass"){
document.getElementById('licensingApprovalDate').setAttribute("validators", "validators:maxDateToday,required");
} else {
document.getElementById('licensingApprovalDate').setAttribute("validators", "validators:maxDateToday");
}
}
this function is being called when ever licensingStatus is changed, it is working and when i inspect the element when the licensingStatus is changed the tag is changed correctly but this should add an * next to the licensingApprovalDate input box but it doesn't
Is there a way for the changes to take place the second the tag/licensinggStatus is changed?
validators is a parameter, and not an attribute. It appears in the template as an attribute because, hey, it's kinda XML.
Tapestry 3 was not designed for this level of dynamic behavior (it was cutting edge in 2003 though!). Given that its 2012, please consider an upgrade to Tapestry 5!

Indesign Server Scripting Textarea.Contents

I am creating a Javascript script to use with Indesign Server (CS3).
Trying to find all textareas within a document and find the contents of them.
I can easily loop through all the textareas, using the functions provided by Adobe.
However, when i try to get the content of the TextArea, I only get the content that is visible within that textarea, not the out port text.
document.TextAreas[0].contents
In other words, if the Indesign document contains a textarea with a little plus sign, indicating that there is more text, but it did not fit, then my script does not return the hidden text.
Or, to put it another words again. Can i get the entire content when the 'overflows' property of the 'textarea' is false;
Full code:
function FindAllTextBoxes(){
var alertMessage;
for (var myCounter = myDoc.textFrames.length-1; myCounter >= 0; myCounter--) {
var myTextFrame = myDoc.textFrames[myCounter];
alertMessage += "\nTextbox content: " + myTextFrame.contents;
alertMessage += "\nOverflow:" + myTextFrame.overflows;
alert(alertMessage);
}
}
How can I read the full content of the Textarea?
A little late, but just came across this. This is tested with InDesign CS5 - the following line will get all of the overflown text from a TextFrame:
var content = myTextFrame.parentStory.contents;
Hope this helps!

Categories