I want to remove the format the content when user paste into ckeditor. I tried this code but it doesn't work.
CKEDITOR.on('instanceReady', function (e) {
editor = e.editor;
editor.on('paste', function (e) {
editor.focus();
editor.document.$.execCommand('SelectAll', false, null );
editor.execCommand('RemoveFormat', editor.getSelection().getNative());
editor.insertHtml('additional content');
});
});
Try adding CKEDITOR.config.forcePasteAsPlainText= true; to config.js, that should solve your problem.
i solved my problem by formating content before set value for textarea
CKEDITOR.on('instanceReady', function(e){
var editor = e.editor;
editor.on('paste', function(e){
setTimeout(function(){
$('body').append("<div id='tmpCt'>"+ editor.getData() +"</div>");
$('#tmpCt div, #tmpCt p, #tmpCt a, #tmpCt span').removeAttr("style");
$('#requiredDescription').val($('#tmpCt').html());
$('#tmpCt').remove();
}, 100);
});
});
Related
I am new to Kendo-UI and Web-Engineering and I am facing a problem which I haven't solved after investing hours of time.
I have a grid with 8 columns, and a Excel toolbar button. When I fire the excelExport event, i show 2 more hidden columns to include their data in the report, and after that I hide them again.
My Problem is that my columns shrink for the hidden columns when they are shown, yet dont expand their width afterwards when they're hidden again.
Here's my script for the excelExport event:
<script type="text/javascript">
var exportFlag = false;
$(window).load(function() {
$("#pr-grid").data("kendoGrid").bind("excelExport",function(e) {
if (!exportFlag) {
e.sender.showColumn("CallOff");
e.sender.showColumn("LastChange");
e.preventDefault();
exportFlag = true;
setTimeout(function() {
e.sender.saveAsExcel();
});
} else {
e.sender.hideColumn("CallOff");
e.sender.hideColumn("LastChange");
exportFlag = false;
}
});
});
</script>
I'd appreciate any help.
Regards Paparis
$('#pr-grid table').width('100%');
<script type="text/javascript">
var exportFlag = false;
function excelExport(e) {
if (!exportFlag) {
e.sender.showColumn("CallOff");
e.sender.showColumn("LastChange");
e.preventDefault();
exportFlag = true;
setTimeout(function() {
e.sender.saveAsExcel();
});
} else {
e.sender.hideColumn("CallOff");
e.sender.hideColumn("LastChange");
exportFlag = false;
$('#grid table').width('100%');
}
}
</script>
I've tried to make event deledation, set "click" event on body. Event works on button. But why it doesn't work on body?
window.onload = function(){
var bodyN = document.body,
bodyS = bodyN.style
bodyS.transition = "all 0s";
bodyS.backgroundColor = localStorage.getItem("bgc")
bodyN.addEventListener("click", function(e){
console.log(e.target); // why doesn't work this when I click on body?
if (e.target.tagName == "BUTTON") {
console.log(e);
bodyS.transition = "";
bodyS.backgroundColor = e.target.id;
localStorage.setItem("bgc", e.target.id);
}
});
};
the same via jQuery:
$(document).ready(function(){
$("body").css("transition", "all 0s" );
$("body").css("backgroundColor", localStorage.getItem("bgc"));
$("body").on("click", "button", function(e){
console.log(e);
$("body").css("transition", "" );
$("body").css("backgroundColor", e.target.id);
localStorage.setItem("bgc", e.target.id);
})
});
With jQuery, I used "click" instead of "on". Here's an example:
$("body").click(function(e){
console.log(e);
if(e.target.id == "button"){
alert('button');
}
else{
alert('body');
}
});
https://jsfiddle.net/aumayk6s/
Hope it helps you!
I have a Kendo grid with a detailTemplate (textarea with some styling) and am trying to intercept and handle a keypress event.
I have tried AngularJS and jQuery patterns with no luck.
If anybody has been successful I would be grateful for any suggestions.
$("#grid").kendoGrid({
detailTemplate: kendo.template( $("#template" ).html()),
detailInit: detailInit
});
function detailInit(e) {
var detailRow = e.detailRow;
var txtArea = detailRow.find(".myTextArea");
$(txtArea).on("keypress", function(e) {
console.log(e)
});
}
<div id="gid"></div>
<script id="template" type="text/x-kendo-template">
<textarea class="myTextArea"></textarea>
</script>
If you are interested in the control characters such as CR or Tab, then also listen to the KeyDown event.
function detailInit(e) {
var detailRow = e.detailRow;
detailRow.find(".myTextArea").on("keypress", function(e) {
console.log(e);
});
detailRow.find(".myTextArea").on("keydown", function(e) {
console.log(e);
});
}
I have an application that needs the inline CKEditor but without toolbar. For the inline CKEditor part I have:
CKEDITOR.disableAutoInline = true;
var editor = CKEDITOR.inline('editable', {on: {
instanceReady: function() {periodic();}
}});
var periodic = (function() {
var data, oldData;
return function() {
if ((data = editor.getData()) !== oldData) {
oldData = data;
$.post("update.php", {txt:data});
}
setTimeout(periodic, 1000);
};
})();
Then for the toolbar hiding part I found this: CKEditor 4 Inline: How to hide toolbar on demand?
//Whenever CKEditor loses focus, We will hide the corresponding toolbar DIV.
function hideToolBarDiv(event) {
// Select the correct toolbar DIV and hide it.
//'event.editor.name' returns the name of the DIV receiving focus.
$('#'+event.editor.name+'TBdiv').hide();
}
Problem is that I have no clue how to combine these two together :) I appreciate for any hint. Thank you.
I found another link that seems to solve my problem: Can I use CKEditor without a toolbar?
The script seems to be working alright though I am still not sure if it is a correct way to do it:
CKEDITOR.disableAutoInline = true;
var editor = CKEDITOR.inline('editable', {
removePlugins: 'toolbar',
allowedContent: 'p h1 h2 strong em; a[!href]; img[!src,width,height]'
on: {instanceReady: function() {periodic();}}
});
var periodic = (function() {
var data, oldData;
return function() {
if ((data = editor.getData()) !== oldData) {
oldData = data;
$.post("update.php", {txt:data});
}
setTimeout(periodic, 1000);
};
})();
In my eyes, I have done it in two ways:
1) Using the removePlugins option and just remove the toolbar:
CKEDITOR.inline( 'textarea', {
removePlugins: 'toolbar'
} );
here, you can also use allowedContent to allow the contents for ACF
CKEDITOR.inline( 'editable', {
removePlugins: 'toolbar',
allowedContent: 'p h1 h2 strong em; a[!href]; img[!src,width,height];'
} );
2) Using CSS - Not the standard approach: (little tricky)
Just make css to display:none the toolbar, like
.cke_inner {
display: none;
}
Hope it will help someone.
I got the following:
http://jsfiddle.net/GsL8Z/
I want to toggle the size of an image. After each toggle, I want to replace the scaled image with its instance in right size.
This actually works pretty well, but only the first time. After the third click, the wrong class gets allocated.
Any help would be greatly appreciated!
HTML
<div id="projekt_1" class="projekt">
<ul class="bilder">
<li><img class="imgKlein" src="images/mainworks_th.jpg" alt="Mainworks"/></li>
</ul>
</div>
CSS
.imgGross{
height: 450px;
}
.imgKlein{
height: 215px;
}
JS
var status = true,
obj = $('.projekt'),
projekte = $.makeArray(obj),
obj = $('.bilder'),
projekte_li = $.makeArray(obj),
obj = $('.projekt li img'),
projekte_li_img = $.makeArray(obj);
var images = new Array (2);
images[0] = $('<img class="imgKlein"/>').attr({src: 'images/mainworks_th.jpg'});
images[1] = $('<img class="imgGross"/>').attr({src:'images/mainworks_pre.jpg'});
$('#projekt_1').click(function() {
if (status == true) {
$("img", this).switchClass( "imgKlein", "imgGross", 1000, "easeInOutQuad" );
setTimeout(function(){
$(projekte_li[0]).html(images[1]);
}, 2000);
status = false;
}
else {
$("img", this).switchClass( "imgGross", "imgKlein", 1000, "easeInOutQuad" );
setTimeout(function(){
$(projekte_li[0]).html(images[0]);
}, 2000);
status = true;
}
return false;
});
Somehow the switchClass is having problems with you replacing the whole html for the img. As a matter of fact you can just change the src.
Also, you are better off using .toggle() in jQuery to handle things changing back and forward on each click.
By the way, also the setTimeout can give problems. .switchClass() has a complete handler that runs after the animation is complete and you should use that.
So, the solution could be:
$('#projekt_1').toggle(
function(e) {
$("img", this).switchClass("imgKlein", "imgGross", 1000, "easeInOutQuad",
function() {
$(this).attr({ src: 'images/mainworks_pre.jpg', alt: "Mainworks_pre" });
});
return false;
},
function (e) {
$("img", this).switchClass("imgGross", "imgKlein", 1000, "easeInOutQuad",
function(){
$(this).attr({ src: 'images/mainworks_th.jpg', alt: "Mainworks_TH" });
});
return false;
}
);
Fiddle: http://jsfiddle.net/GsL8Z/2/
i testet something with the example from jquery-ui and it works
the code is little bit shorter than yours:
$(function() {
$( "#projekt_1" ).click(function(){
$(".imgKlein").switchClass( "imgKlein", "imgGross", 1000, "easeInOutQuad", function()
{
$("img").attr("src", "http://www.spielwiki.de/images/e/e9/Kleines_M%C3%A4dchen%2C_zu_gro%C3%9Fer_Luftballon.png");
});
$(".imgGross").switchClass( "imgGross", "imgKlein", 1000, "easeInOutQuad", function()
{
$("img").attr("src", "http://images.all-free-download.com/images/graphiclarge/small_house_329.jpg");
});
return false;
});
});
the link to the example: http://jsfiddle.net/DWrC6/24/