Not only have I read the Developer's Guide, but I've also read several dozen posts AND other SSI topics. I'm fairly decent at PHP, and javascript is not quite Chinese (more like Latin) to me. But, something seems to be missing between this page and its referenced underlying code:
http://nightly.ckeditor.com/7289/_sampl ... place.html
Because:
a) I can't get it to replace, although it seems to have a hover quality
b) The css seems to be hard coded somewhere (or my browser cache is working overtime). Because even though I change, say the :hover (border-color), it remains unchanged.
First, here's my header code (though it doesn't much differ from sample code):
<!DOCTYPE blah, blah>
<script type="text/javascript" src="/ckeditor/ckeditor.js"></script>//referring to the CKdir in my root dir
<html xmlns="http://www.w3.org/1999/xhtml">
<script type="text/javascript">
//<![CDATA[ -------WHAT'S CDATA!?
// Uncomment the following code to test the "Timeout Loading Method".
// CKEDITOR.loadFullCoreTimeout = 5;
window.onload = function()
{
// Listen to the double click event.
if ( window.addEventListener )
document.body.addEventListener( 'dblclick', onDoubleClick, false );
else if ( window.attachEvent )
document.body.attachEvent( 'ondblclick', onDoubleClick );
};
function onDoubleClick( ev )
{
// Get the element which fired the event. This is not necessarily the
// element to which the event has been attached.
var element = ev.target || ev.srcElement;
// Find out the div that holds this element.
var name;
do
{
element = element.parentNode;
}
while ( element && ( name = element.nodeName.toLowerCase() ) && ( name != 'div' || element.className.indexOf( 'editable' ) == -1 ) && name != 'body' )
if ( name == 'div' && element.className.indexOf( 'editable' ) != -1 )
replaceDiv( element );
}
var editor;
function replaceDiv( div )
{
if ( editor )
editor.destroy();
editor = CKEDITOR.replace( div );
}
//]]>
</script>
</header>
and here's my body code (roughly):
<body>
<div1> //wrapper
<div2> //main
<h2>Menu</h2>
<div class="editable">//HERE's where the first editable instance should go
<?php echo $menu_desc; ?>
<script type="text/javascript">CKEDITOR.replace( 'editable' )
</script>
</div>
</div>
</div>
</body>//yes, there's more content, but doesn't pertain
Am I leaving out an element? Because, there's nothing stating that the div must contain a text-area, and it doesn't show on the underlying sample code...
Fri, 09/23/2011 - 19:59
#1
Re: replace div not working for me
You should have got an error in your javascript console (I've requested to make it a clear alert instead but I don't hold my breath about it) and as you haven't saw it I guess that there might be other errors in your page that you haven't noticed.
Also, remember that as you're replacing an HTML element and not a form element, you'll have to create some custom method to send the data back to the server.
Re: replace div not working for me
Alfonsml,
First, thanks for the reply:
Re: I think that I first tried it without the CKEDITOR.replace( 'editable' ) call, as it was not in the example. So, I understand why that would be pointless...
My main question is/was:
Why is mine not working? Because, I can figure out the end result, so long I can get the editor to pop up. I understand the above. But, as the example (above link's underlying code) showed only <div class="editable"> without embedded function calls within it - does that mean that the <header> script does all the work for the div, so long as I name my div 'editable'? Is there a link you can send me, that tells me, "do this...". Because I've literally been looking for two days. I'm getting gray hairs
I'm beginning to wonder if the script itself is faulty (though still impressive), because it's a little sketchy on the sample page (it seems to have certain 'sweet spots' that you can double-click within the div).
The main reason that I prefer to use editable divs, is because there are several areas within this particular page that need editing without the "shell" being tampered with. I can get a regular textarea to work...Any advice you or ANYBODY can give me would be simply priceless.
Thanks in advance!
Re: replace div not working for me
Yes, it seems that if you click on empty spaces the detection might not work, but you could debug that part of the sample script and create a better version
// Find out the div that holds this element. var name; do { element = element.parentNode; } while ( element && ( name = element.nodeName.toLowerCase() ) && ( name != 'div' || element.className.indexOf( 'editable' ) == -1 ) && name != 'body' ) if ( name == 'div' && element.className.indexOf( 'editable' ) != -1 ) replaceDiv( element );use firebug and check how the code is executed in that function when you double click in a place where you have problems
and that hover border is placed on the page
div.editable:hover { border-color: black; }, if you modify it it should get updated unless you have a very strange cache settings. So I wonder if you are modifying the wrong things, changing that color should be quite easy.
Re: replace div not working for me
Re: replace div not working for me
the css took after I removed it from my css page and put it directly into the page (hmm...)
Next, I try it on a simpler page, just to see if lots of coding somehow confuses the code.
Re: replace div not working for me
After no luck, I decided to go the basic textarea route. It works fine like this. Just wrapped all the changing content in a css-formatted form (width:auto, height:auto, background:none; padding:inherit; margin:0;). A single submit button at the bottom, for all the CKE textareas (with individual names/ids, of course). Was able to continue my updating from there. After that, it's just a matter of setting up appropriate cms.
I'm fairly new to cms. But, I'd be happy to share what I know with some who have questions.