can you give me a way to save the contents of the ckeditor to the database?
i have 0% idea on how to make things work for this would be the first time to be use one. i've searched on google but it always shows the fckeditor(are they the same?). also, i've tried some codes with AJAX on it but still couldn't make it work because it requires some plugin and i don't actually understand it.
anyway, i'am using the 4.0 version of ckeditor and would prefer php or javascript code because i don't really know AJAX. here's my trial code:
<!DOCTYPE html>
<!--
Copyright (c) 2003-2012, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
-->
<?php
include('global.php');
?>
<html>
<head>
<script>
var type = 'Admin';
<!-- editableContent -->
window.onload = function (){
if(type=='Admin'){
document.getElementById('opener').contentEditable= true;
document.getElementById('main').contentEditable= true;
// We need to turn off the automatic editor creation first.
CKEDITOR.disableAutoInline = true;
var editor = CKEDITOR.inline( 'opener' );
var editor = CKEDITOR.inline( 'main' );
}
else{
document.getElementById('opener').contentEditable= false;
document.getElementById('main').contentEditable= false;
}
}
function showHTML () {
document.getElementById('textpad').textContent = textEditor.document.body.innerHTML;
return;
}
</script>
<title>Inline Editing by Code — CKEditor Sample</title>
<meta charset="utf-8">
<script src="ckeditor/ckeditor.js"></script>
<link href="ckeditor/samples/sample.css" rel="stylesheet">
<style>
#editable
{
padding: 10px;
float: left;
}
</style>
</head>
<body>
<div id="opener">
<?
$result= mysql_query ("SELECT * from text_tb WHERE categoryName='index'");
while($row = mysql_fetch_array($result)){
echo $row[1];
}
?>
</div>
<div id="main">
<?
$result= mysql_query ("SELECT * from text_tb WHERE categoryName='about'");
while($row = mysql_fetch_array($result)){
echo $row[1];
}
?>
</div>
</body>
</html>
thank you very much for your time and help.
This may not be 100% on target but it is what I've used and it works well. TinyMCE uses the HTML textarea tag and some JavaScript to allow the client to format the information. Then an ordinary "submit" sends the content of the textarea to the server, where you receive it in a POST-method request and you can store it in the data base.
Sample JS for TinyMCE:
<script language="javascript" type="text/javascript" src="scripts/tiny_mce/tiny_mce.js"></script>
<script language="javascript" type="text/javascript">
tinyMCE.init({
mode : "textareas",
theme : "advanced",
plugins : "safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",
theme_advanced_buttons1 : "bold,italic,underline,|,justifyleft,justifycenter,justifyright,|,bullist,numlist,|,copy,paste,pastetext,pasteword,|,undo,redo,|,link,unlink,anchor,image,cleanup,|,removeformat,|,forecolor,backcolor,|,formatselect,charmap,emotions,iespell,",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : "",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true
});
</script>
Link here: http://www.tinymce.com/
The ckeditor documentation offers a very simple and easy way:
<form method="post">
<p>
My Editor:<br>
<textarea name="editor1"><p>Initial value.</p></textarea>
<script>
CKEDITOR.replace( 'editor1' );
</script>
</p>
<p>
<input type="submit">
</p>
# http://docs.ckeditor.com/#!/guide/dev_framed-section-4
On the server side then you only have to
mysql_query("insert into yourtable (yourtextfield) VALUES ( '".mysql_real_escape_string($_POST['editor1'])."')");
though I strongly suggest you to use prepared statements as offered by the PHP PDO Extensions. Prepared statements are much more secure.
[...] would prefer php or javascript code because i don't really know AJAX.
In fact, AJAX is a mix of PHP and JavaScript :P You can't update database content without a server side language(PHP), but using a client side language (JavaScript) you can "talk" to a server side script, that's what we call AJAX..
Anyway, as Ray Paseur said, usually you post a form containing textarea with the value of edited content but in your case you seems to be using the new Inline editing feature of the 4.0 version ?
So in this case, to access the value of the edited content you'll have to get the content of the div you've edited like this :
var opener_content=document.getElementById("opener").innerHTML;
var main_content=document.getElementById("main").innerHTML;
This will gives you the HTML code generated by the editor. Just do this in a function you call from maybe a "save changes" button in your page, then send those variables to your server with AJAX... (I would really suggest you to learn more about AJAX, it's more simple than it seams.)
But, if you don't want to learn AJAX right now, you can add an hidden form on your page with empty textareas, when the save button is clicked you fill these textarea with the 2 variables above, then you post this form via JavaScript and save data in PHP using the $_POST variable ! Its gonna work, even if it's an ugly and lazy solution :)
Related
<button type="button" id="okButton" onclick="funk()" value="okButton">Order now </button>
<script type="text/javascript">
function funk(){
alert("asdasd");
<?php echo "asdasda";?>
}
</script>
When the button is pressed I want to execute PHP code (at this point to echo asadasda)
You could use http://phpjs.org/ http://locutus.io/php/ it ports a bunch of PHP functionality to javascript, but if it's just echos, and the script is in a php file, you could do something like this:
alert("<?php echo "asdasda";?>");
don't worry about the shifty-looking use of double-quotes, PHP will render that before the browser sees it.
as for using ajax, the easiest way is to use a library, like jQuery. With that you can do:
$.ajax({
url: 'test.php',
success: function(data) {
$('.result').html(data);
}
});
and test.php would be:
<?php
echo 'asdasda';
?>
it would write the contents of test.php to whatever element has the result class.
Interaction of Javascript and PHP
We all grew up knowing that Javascript ran on the Client Side (ie the browser)
and PHP was a server side tool (ie the Server side). CLEARLY the two just cant interact.
But -- good news; it can be made to work and here's how.
The objective is to get some dynamic info (say server configuration items) from the server into the Javascript environment so it can be used when needed - - typically this implies DHTML modification to the presentation.
First, to clarify the DHTML usage I'll cite this DHTML example:
<script type="text/javascript">
function updateContent() {
var frameObj = document.getElementById("frameContent");
var y = (frameObj.contentWindow || frameObj.contentDocument);
if (y.document) y = y.document;
y.body.style.backgroundColor="red"; // demonstration of failure to alter the display
// create a default, simplistic alteration usinga fixed string.
var textMsg = 'Say good night Gracy';
y.write(textMsg);
y.body.style.backgroundColor="#00ee00"; // visual confirmation that the updateContent() was effective
}
</script>
Assuming we have an html file with the ID="frameContent" somewhere,
then we can alter the display with a simple < body onload="updateContent()" >
Golly gee; we don't need PHP to do that now do we! But that creates a structure for
applying PHP provided content.
We change the webpage in question into a PHTML type to allow the server side PHP access
to the content:
**foo.html becomes foo.phtml**
and we add to the top of that page. We also cause the php data to be loaded
into globals for later access - - like this:
<?php
global $msg1, $msg2, $textMsgPHP;
function getContent($filename) {
if ($theData = file_get_contents($filename, FALSE)) {
return "$theData";
} else {
echo "FAILED!";
}
}
function returnContent($filename) {
if ( $theData = getContent($filename) ) {
// this works ONLY if $theData is one linear line (ie remove all \n)
$textPHP = trim(preg_replace('/\r\n|\r|\n/', '', $theData));
return "$textPHP";
} else {
echo '<span class="ERR">Error opening source file :(\n</span>'; # $filename!\n";
}
}
// preload the dynamic contents now for use later in the javascript (somewhere)
$msg1 = returnContent('dummy_frame_data.txt');
$msg2 = returnContent('dummy_frame_data_0.txt');
$textMsgPHP = returnContent('dummy_frame_data_1.txt');
?>
Now our javascripts can get to the PHP globals like this:
// by accessig the globals
var textMsg = '< ? php global $textMsgPHP; echo "$textMsgPHP"; ? >';
In the javascript, replace
var textMsg = 'Say good night Gracy';
with:
// using php returnContent()
var textMsg = '< ? php $msgX = returnContent('dummy_div_data_3.txt'); echo "$msgX" ? >';
Summary:
the webpage to be modified MUST be a phtml or some php file
the first thing in that file MUST be the < ? php to get the dynamic data ?>
the php data MUST contain its own css styling (if content is in a frame)
the javascript to use the dynamic data must be in this same file
and we drop in/outof PHP as necessary to access the dynamic data
Notice:- use single quotes in the outer javascript and ONLY double quotes in the dynamic php data
To be resolved: calling updateContent() with a filename and
using it via onClick() instead of onLoad()
An example could be provided in the Sample_Dynamic_Frame.zip for your inspection, but didn't find a means to attach it
You can't run PHP with javascript. JavaScript is a client side technology (runs in the users browser) and PHP is a server side technology (run on the server).
If you want to do this you have to make an ajax request to a PHP script and have that return the results you are looking for.
Why do you want to do this?
If you just want to echo a message from PHP in a certain place on the page when the user clicks the button, you could do something like this:
<button type="button" id="okButton" onclick="funk()" value="okButton">Order now</button>
<div id="resultMsg"></div>
<script type="text/javascript">
function funk(){
alert("asdasd");
document.getElementById('resultMsg').innerHTML('<?php echo "asdasda";?>');
}
</script>
However, assuming your script needs to do some server-side processing such as adding the item to a cart, you may like to check out jQuery's http://api.jquery.com/load/ - use jQuery to load the path to the php script which does the processing. In your example you could do:
<button type="button" id="okButton" onclick="funk()" value="okButton">Order now</button>
<div id="resultMsg"></div>
<script type="text/javascript">
function funk(){
alert("asdasd");
$('#resultMsg').load('path/to/php/script/order_item.php');
}
</script>
This runs the php script and loads whatever message it returns into <div id="resultMsg">.
order_item.php would add the item to cart and just echo whatever message you would like displayed. To get the example working this will suffice as order_item.php:
<?php
// do adding to cart stuff here
echo 'Added to cart';
?>
For this to work you will need to include jQuery on your page, by adding this in your <head> tag:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
Any server side stuff such as php declaration must get evaluated in the host file (file with a .php extension) inside the script tags such as below
<script type="text/javascript">
var1 = "<?php echo 'Hello';?>";
</script>
Then in the .js file, you can use the variable
alert(var1);
If you try to evaluate php declaration in the .js file, it will NOT work
put your php into a hidden div and than call it with javascript
php part
<div id="mybox" style="visibility:hidden;"> some php here </div>
javascript part
var myfield = document.getElementById("mybox");
myfield.visibility = 'visible';
now, you can do anything with myfield...
We can use php in JavaScript by creating a form element and put the action as a .php page.
Then we use JavaScript to submit that form.
EX:
<!doctype html>
<html>
<head>
<title>PHP Executed with JS</title>
</head>
<body>
<form action="phpCode.php" id="phpCode">.
</form> <!-- This is the form-->
<script>
function runPhp() {
var php =
document.getElementById("phpCode")
php.submit() //submit the form
}
</script>
</body>
The PHP file name would be phpCode.php.
In that file would be your PHP code.
May be this way:
<?php
if($_SERVER['REQUEST_METHOD']=="POST") {
echo 'asdasda';
}
?>
<form method="post">
<button type="submit" id="okButton">Order now</button>
</form>
If you do not want to include the jquery library you can simple do the following
a) ad an iframe, size 0px so it is not visible, href is blank
b) execute this within your js code function
window.frames['iframename'].location.replace('http://....your.php');
This will execute the php script and you can for example make a database update...
Use ajax to send request and echo the response
when successfully executed. Like this:
$.get("site.com/ajax", function(status,data){
alert(status);
});
This can be achieved with jquery library.
You could run PHP at the start of the Page and grap the results from inputs
<?php
c = a * b;
?>
<input type="hidden" name="c" value="<?php c ?>"/>
<button type="submit">Submit</button>
</form>
<script>
let cValue = $('input[name="c"]').val();
alert(cValue);
</script>
I want this effect when php print gets called . How can i do it?
I have tried with
print "<span id=\"highlight\" onLoad=\"Effect.Highlight(highlight);\"><em>Your post was successfully added.</em></span>"."<hr>";
but this is not working. Help!
if it does not need to be in the php itself then use (advise against using short tags to open and close):
?>
<span id="highlight" onLoad="Effect.Highlight(this.id);"><em>Your post was successfully added.</em></span><hr>
<?php
and continue your script.
alternatively,
<head>
...
object.onload="SomeJavaScriptCode";
...
</head>
--EDIT--
Javascript would look like:
<script type="javascript/text">
body.onload=Effect.Highlight(getElemenyById('highlight'));
</script>
-- EDIT --
Javascript, I believe, (thanks to comments) will look like:
document.addEventListener('DOMContentLoaded', function () {
Effect.Highlight(getElemenyById('highlight'));
}, false);
onload=""
Does only work inside of a <body>, <frame>, <frameset>, iframe, <img>, <input type="image">, <link>, <script> or <style> Tag.
if you are using javascript why not print in your script section?
in your body you can have the notice hidden,
and after the post is added to the database you can show and highlight the alert.
are you using Ajax?
an example:
<span id="hightlight" style="display:none"><em>Your post was successfully added.</em></span>
<scrpt type="text/javascript">
<?php
print "$('highlight').show(); Effect.Highlight('highlight')";
?>
</script>
I'm trying to simply echo a function back to the client browser from a server php page after a selection has been made in a jQuery autocomplete box so that the function can process as needed (client-side) with the value of the autocomplete box. The autocomplete is in the php page as follows:
mypage.php
<html>
<head>
<title>Autocomplete</title>
<link href="../../jqSuitePHP/themes/redmond/jquery-ui-1.8.2.custom.css" id="skin" rel="stylesheet" type="text/css" />
<script src="../../jqSuitePHP/js/jquery-1.6.min.js" type="text/javascript"></script>
<script src="../../jqSuitePHP/js/jquery-ui-1.8.14.custom.min.js" type="text/javascript"></script>
<script>
$(function ac_boxes() {
$("#dlr").autocomplete({
source: "dlrAutocompleteSearch.php",
minLength: 2,
search : function(){$(this).addClass('ui-autocomplete-loading');},
open : function(){$(this).removeClass('ui-autocomplete-loading');},
select: function( event, ui ) {
// Here's my attempt at calling the client side 'test' function
<?php echo '<script>window[test](ui.item.value)</script>;' ?>
}
});
});
</script>
</head>
<body>
---------
</body>
</html>
But the < and > are causing a problem. If I remove the < and >, the page processes completely (without the 'select' function of course. If I add the < and >, the page does not process.
I have tried assigning the string using the php htmlentities() as such:
<?php
$val = htmlentities('<script>window[test](ui.item.value)</script>;');
echo $val;
?>
But this doesn't seem to work either.
Is my problem stemming from the php being inside of the jQuery script? If so, what is another method of calling the php from the 'select' method of autocomplete?
Thanks in advance.
I don't think this code is doing what you think it is doing; when you load the page the PHP is executed and you end up with something like this in the source code:
<script>
...
select: function( event, ui ) {
<script>window[test](ui.item.value)</script>;
}
...
</script>
Which is not correct (you don't need script tags within script tags; as you've seen it doesn't do anything but cause problems).
If you want to execute some PHP when the selection changes, you have to make another call to the server, via AJAX, submitting a form, or whatever. Something like this might be more like what you want:
select: function(event, ui) {
// send the selected value to the server for processing
$.get("processChange.php", {value: ui.item.value});
}
See the JQuery docs on $.get() for more on that.
On the other hand, if all you're trying to do is call another client-side javascript function (test, for example) with the selected value, you don't need PHP to echo anything. This ought to do the trick:
<script>
function test(args) {
// ...
}
$("#dlr").autocomplete({
// ...
select: function(event, ui) {
test(ui.item.value);
}
}
</script>
You can use < and > just like in HTML. You can also use the replace() function to find all the < and > and replace them.
a group images are calling in a div and there we have given an option to rotate images if required.
Actually the image is rotating but it is not showing in the page( without doing 2 or 3 manual page refresh).
I have added
<meta HTTP-EQUIV="Pragma" content="no-cache"/>
<meta HTTP-EQUIV="Cache-Control" content="no-cache"/>
at head
also done
if(isset($_GET['re'])=='re')
{
?>
<script language="JavaScript" type="text/javascript">
var reloaded = false;
var loc=""+document.location;
loc = loc.indexOf("?reloaded=")!=-1?loc.substring(loc.indexOf("?reloaded=")+10,loc.length):"";
loc = loc.indexOf("&")!=-1?loc.substring(0,loc.indexOf("&")):loc;
reloaded = loc!=""?(loc=="true"):reloaded;
function reloadOnceOnly() {
if (!reloaded)
window.location.replace(window.location+"?reloaded=true");
}
reloadOnceOnly(); //You can call this via the body tag if desired
</script>
<?php
}
But it is not showing the new rotated or changed image without another manual refresh.
Could you please help me on this?
Why not
<script>
function rotate(imgId,direction) {
var img = document.getElementById(imgId);
img.src=img.src.split("rotation=")[0]+"rotation="+direction+"&rnd="+new Date().getTime();
return false;
}
</script>
<img id="image1" src="getimage.php?name=image1&rotation=0" /><br />
Reset
90°
180°
270°
If I understand you correctly, you're trying to use a PHP to code to refresh the webpage? However, the issue here is that once the PHP is output to the client, you can't have control over it already. The best thing to do in this context is to use JavaScript to do the refresh for you. Hope it helps :)
Hi Merlin, you might want to use a simpler logic like this:
<script type="text/javascript">
var reloaded = false;
var loc=""+document.location;
loc = loc.indexOf("?reloaded=");
if (loc == -1){
window.location.replace(window.location+"?reloaded=true");
}
</script>
Optionally you might want to pack it into a function for your use. Hope it helps (:
Why am I getting an error in Firebug "u is undefined"?
My page consists of a display of photos and photo gallery as a special separate section in the PHP code divided using the "break".
Photos and photo galleries are displayed using the "Fancybox.js".
The first time when I try to open a photo, everything works fine but when I do it again after I refresh the page the Firebug display error "u is undefined".
The Jquery for the menu that I'm using for display these separate part of the page:
$(document).ready(function(){
$(".menu_rfr").bind('click', function() {
$("#main").html('<img src="img/spin.gif" class="spin">');
location.replace($(this).attr('rel'));
});
$(".menu_clickable").bind('click', function() {
$("#main").html('<img src="img/spin.gif" class="spin">');
$("#main").load($(this).attr('rel'), function(event) {
});
$(".menu_clickable").unbind("click");
});
});
The simplified PHP code looks like:
<?
if (!isset($a)) $a = '';
switch($a)
{
case 1:
default:
?>
<div class="menu_clickable prof_link" id="prof_info" rel="?a=2">Photos</div>
<div class="menu_clickable prof_link" id="prof_info" rel="?a=3">Gallery</div>
<div id="main"></div>
<?
break;//photos
case 2:
?>
<script type="text/javascript">
$("a.group").fancybox({
'titlePosition' : 'over',
'overlayShow':false
});
</script>
<?
<img src="tmb/1.jpg" border="0">
<?
break;
case 3: // photo gallery
?>
<script type="text/javascript">
$("a.groupg").fancybox({
'titlePosition' : 'over',
'overlayShow':false
});
</script>
<?
<img src="tmb/2.jpg" border="0">
<?
break;
}
?>
As I said this is a simplified code, and probably there are some errors in it. I just wanted to show where and how I'm using Fancybox.
Is there a conflict between the jquery code for the menu at the top of the page and this for fancybox or there is some other reason why I keep getting an error in Firebug "u is undefined" after opening the other part of the PHP page and attempts to re-opening photos?
View your HTML source and make sure you don't have FancyBox declared twice. I just had the exact same error pop up in firebug and this is what I found in my source:
<script language="javascript" type="text/javascript" src="./ext_scripts/jquery.fancybox-1.3.1/fancybox/jquery.fancybox-1.3.1.pack.js"></script>
<link rel="stylesheet" href="./ext_scripts/jquery.fancybox-1.3.1/fancybox/jquery.fancybox-1.3.1.css" type="text/css" media="screen" />
<script language="javascript" type="text/javascript" src="./ext_scripts/jquery.fancybox-1.3.1/fancybox/jquery.fancybox-1.3.1.pack.js"></script>
Not sure exactly why it happened, but if you nest your include and require_onces in your PHP like I unfortunately did, you can wind up with some very funky Javascript references.
You probably have the fancybox.js script included twice which is causing the issue. Please check all your files and remove the the ones that are not required.
I have this same bug as well - I think it is due to the the 'loading' divs being reset by the cleanup code. I have a VERY nasty fix:
Change:
if ($("#fancybox-wrap").length) {
return;
To: (To skip the multiple-init check)
if (false && $("#fancybox-wrap").length) {
And add:
$.apzFancyboxInit = fancybox_init;
after 'fancybox_init = function() {'
What this does is allow us to call the initialisation routine multiple times; and saves the function pointer to this routine in a global variable. All we have to do now is make sure we call the $.apzFancyboxInit function every time a fancybox is closed. The best place to do this is in the onClosed function handler; so (in my case), my calls look like this:
$.fancybox(
{
'showCloseButton' : true,
'type' : 'ajax',
'onClosed' : function()
{
$.apzFancyboxInit();
},
If you are using a "ripped" template you may find that there are the fancybox generated div written in tho the html template right above the </body> tag.
check if your html output has a div with the id of fancybox-wrap if you have JavaScript disabled, and remove that.