Image tags returned by KCfinder are incomplete on CKeditor and not displayed/saved correctly. Note that i am using an inline CKEditor and KCFinder for image upload.
Here are the integration codes:
ckeditor/config.js
config.filebrowserBrowseUrl = base_url+'/js/kcfinder/browse.php?type=files';
config.filebrowserImageBrowseUrl = base_url+'/js/kcfinder/browse.php?type=images';
config.filebrowserFlashBrowseUrl = base_url+'/js/kcfinder/browse.php?type=flash';
config.filebrowserUploadUrl = base_url+'/js/kcfinder/upload.php?type=files';
config.filebrowserImageUploadUrl = base_url+'/js/kcfinder/upload.php?type=images';
config.filebrowserFlashUploadUrl = base_url+'/js/kcfinder/upload.php?type=flash';
On page HTML
<div id="page_body" contenteditable="true" class="full">...</div>
On page JS
<script type="text/javascript">
CKEDITOR.disableAutoInline = true;
var editor = CKEDITOR.inline( 'page_body', {
on: {
focus: function(event){
var data = event.editor.getData();
alert(data);
},
blur: function( event ) {
var data = event.editor.getData();
var page_id = <?php echo $this->uri->segment(3) ?>;
var page_link =$("#page_link").val();
$.ajax({
type: 'POST',
url: '<?php echo site_url('admin/dashboard/ajaxChangePageData') ?>',
data: { page_id: page_id, page_body: data,page_link:page_link },
beforeSend:function(){},
success:function(data){},
error:function(){ alert("Error"); }
});
}
}
} );
</script>
Strange is that i can browse the server/upload without any error with KCFinder i can even select an image from the server and the image is shown successfully in the content. but the code width height info are not present after a reload. I figured that the html created for the image was incomplete
in source mode i see-
<img alt="" src="/gchalk/content/images/333(1).jpg" 300px; height: 224px;" />
The situation just gets worse if for the second time i make some changes to the div say add some text. The image is lost and its treated as text, the above piece of code is shown as
in source mode-
<img alt="" data-cke-saved-src="/gchalk/content/images/333(1).jpg" src="/gchalk/content/images/333(1).jpg" 300px;="" height:="" 224px;"="">
and it appears on browser/editor as -
<img alt="" data-cke-saved-src="/gchalk/content/images/333(1).jpg" src="/gchalk/content/images/333(1).jpg" 300px;="" height:="" 224px;"="">
I am tearing my hair for a day and cant find a way around. Please help me out to figure how to solve it.
Oh, and for the record the text is saved in MySQL as "TEXT" through the ajax post i am pretty sure its not a problem but still just saying!
I notice the image tag gets messed up in the default ckeditor(not inline) too.
Things that could effect the output of your code :
1- Magic Quotes when using PDO. if they are ON, turn them OFF in you php.ini! they are deprecated. Why am I telling you this? will because in your source mode you had 300px; height: 224px;" when you stored it and displayed it you had 300px;="" height:="" 224px;"=""
2- your CKeditor package. Try to download and reupload your Ckeditor (Update it to the last version if possible)
other than that, I do not see anything wrong with the code you have provided. Good luck!
Related
Using Html2canvas, jsPdf, and angularjs to take a screen shot of a portion of my webpage to show as a pdf preview. I was able to successfully export the content to the pdf, but it only shows half of the content. What can I do to fix this?
Here is the button that creates the pdf. (rollup.html)
<button ng-click="genPDF()">PDF Test</button>
Within the controller, I used the html2canvas function (rollup.js)
Here I believe 'document.body.appendChild' may be the key because when it is uncommented it shows another copy of the table within the webpage when 'pdfTest' is click, as well as within the pdf preview, but only half of the content.
app.controller('Rollup', function($scope, $rootScope, $http, $uibModal, headersvc, locFiltersvc) {
.....
$scope.genPDF = function(){
html2canvas(document.getElementById("testDiv"), {
onrendered: function (canvas) {
//document.body.appendChild(canvas);
var img = canvas.toDataURL("image/png");
var doc = new jsPDF();
doc.addImage(img, 'JPEG',10,10);
doc.save('test.pdf');
//IE 9-11 WORK AROUND
if (navigator.userAgent.indexOf("MSIE ") > 0 ||
navigator.userAgent.match(/Trident.*rv\:11\./))
{
var blob = canvas.msToBlob();
window.navigator.msSaveBlob(blob,'Test file.png');
}
},
//width: 300,
//height: 300
});
}
});
Of course within the html page where the table is created, I have an id of testDiv within the div to the content I want appearing in the pdf.(route.html)
<div class="row" id="testDiv">
....all the table content
</div>
How can I fit the full content to the pdf preview without it cutting off? Any help is greatly appreciated.
Found a solution where I add parameters to the doc.addImage.
doc.addImage(img, 'JPEG',10,10,190,200);
I am not sure how to make the image 100 % of the pdf page, but with this I can set parameters that work best for the table atleast. Hopefully I can find a better solution, but this works for now.
I have an iframe without src. This because the iframe only shows webpage content (from the src) when a user clicks a button (the src is then replaced by a webpage URL). That button is already working.
But when nobody clicks the button, the iframe has to show some simple default text instead of that webpage. In my example I have written the text line 'This text must be displayed by default.'. Why is the text not showing up?
I need to keep the onload javascript, because that is important for the functionality of the iframe.
<iframe src="" class="prodframe pc" style='bottom:0px;position:absolute;width:90%;height:73%;margin:0px auto;left:0;right:0;border:none;background:none transparent;' frameborder='0' scrolling='auto' allowtransparency='true' onload='window.onmessage=function(e){var c=0;var o=document.getElementById("zoekframe");if(o.offsetParent){do{c += o.offsetTop;}while(o = o.offsetParent);};scrollTo(0,c);};' id=zoekframe>This text must be displayed by default.</iframe>
I have a fiddle on the following link: https://jsfiddle.net/mfhdwmya/
This question is awfully similar to Alternate text for iframes
The accepted solution for that one is:
<script>
$(function () {
$("iframe").not(":has([src])").each(function () {
var ifrm = this;
ifrm = (ifrm.contentWindow) ? ifrm.contentWindow : (ifrm.contentDocument.document) ? ifrm.contentDocument.document : ifrm.contentDocument;
ifrm.document.open();
ifrm.document.write($(this).attr("alt"));
ifrm.document.close();
});
});
</script>
I'd comment, but my reputation was not yet enough.
The following jQuery function returns a correct JSON response from Spring.
$(function() {
$('#dataForm').submit(function() {
var rows;
var form = $(this);
rowCount(function() {
var url = form.attr('action'),
rows = form.find('input[name="rows"]').val();
if(rows==0)
{
insert();
}
else if(rows==1)
{
update(function(response){
$("#textContents").val(response);
alert($("#textContents").val());
//Alerts the correct contents from the database
});
}
});
return false;
});
});
This function is called when the form is submitted.
The alert box in the else if condition alerts the correct contents from the server. textContents is a <span></span> id like.
<span id="textContents"></span>
Everything is fine but the response is apparently not being written to the HTML span tag for unknown reasons.
I have even removed design with all HTML templates of the current page but no clues found. If I changed the span tag to some other like <textarea></textarea> for demonstration, then the contents is displayed.
There are no misplaced tags on the form. I have also tried to replace <span> with <div> but it didn't help either. What am I overlooking here? Obviously, something really very basic.
You should use $("#textContents").html(response);
Because <span> has no value.
How can I remove a blank image container if the image's source is unavailable please? I would only like the image to appear if its source is available. Otherwise, I don't want anything to appear, including the blank container.
HTML image syntax:
<img src="url" alt="some_text">
You are able to do this using JavaScript and the error event on the img tag.
For example:
<img src="url" alt="some_text" id="myimage">
<script>
var imgElement = document.getElementById('myimage');
imgElement.addEventListener('error', function()
{
this.parentNode.removeChild(this);
}, true);
</script>
(Oops, sorry #JosephSilber, modified my example to be a bit different ;-))
Your best bet would be using server-side processing if you know that your image isn't going to be available. If you're intentionally leaving the src blank, for example, you can do something like this in PHP:
<?php
$src = ''; // or something else
if (!empty($src)) { ?>
<img src="<?=$src?>" alt="some_text" />
<?php } ?>
Loop through your images, and bind onerror:
imgNode.onerror = function () {
this.parentNode.removeChild(this);
};
I am trying to create chrome extension which will read text inside the particular TAG from the Webpage ...
but not able to read value
I need to pick Text inside the tag definition excluding html tags..
here i want to read the value from the tag "definition"
output:is an overwhelming urge to have of something is often connected with money
suppose web page is like this
<div id="definition">
<div class="section blurb">
<p class="short"><i>Greed</i> is an overwhelming urge to have <i>more</i>
of something
<p class="long"><i>Greed</i> is often connected with money</p>
</div>
</div>
this is what i was trying
popup.html
<script>
var newwin = chrome.extension.getBackgroundPage();
newwin.get();
</script>
background.html
<Script>
function get()
{
var myDivObj = document.getElementById("definition");
if ( myDivObj ) {
alert (myDivObj.innerHTML);
}else{
alert ( "Alien Found" );
}
}
</Script>
I moved my script from the background page to content scrit and it worked like charm..
but was just wondering why dint work in background page..?