Is there any event that is fired when there is a change inside custom div?I don't want to listen for editor.on('change'), but only to detect in which dom element the change is taking place, (removed or inserted character). For example:
var template = new CKEDITOR.template(
'<div class="layout-container">\
<div class="layout-column-content" >\
<p>content</p>\
</div>\
</div>\
</div>\
</div>'
);
var layoutElement = CKEDITOR.dom.element.createFromHtml(template);
editor.insertElement(layoutElement);
Adds custom layout.User types in it and i want to see what is he typing without traversing the whole dom. I tried to add listeners to the div but it seems that CKEditor cleans them. Any clever solutions?
Edit:
This plugin http://ckeditor.com/addon/elementspath is probable workaround:
i have solved my problem with this snippet:
editor.on('elementsPathUpdate', function(event) {
elementsList = editor._.elementsPath.list;
});
combined with the change event.
The only solution i know is this plugin: http://alfonsoml.blogspot.de/2011/03/onchange-event-for-ckeditor.html
Related
So I've a custom widget which renders a custom component.
conversion.for('editingDowncast').elementToElement({
model: 'modelName',
view: (modelElement, viewWriter) => {
const modelName = modelElement.getAttribute('modelName');
const modelNameView = viewWriter.createContainerElement('span', {
class: 'modelName',
'data-modelName': modelName,
});
const reactWrapper = viewWriter.createUIElement(
'span',
{
class: 'modelName__react-wrapper',
},
function (this, domDocument) {
const domElement = this.toDomElement(domDocument);
rendermodelName(modelName, domElement);
return domElement;
},
);
viewWriter.insert(
viewWriter.createPositionAt(modelNameView, 0),
reactWrapper,
);
return toWidgetEditable(modelNameView, viewWriter);
},
});
Where rendermodelName will give back a React component with a simple input box as
return (
<div>
<input type="text" />
</div>
);
https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/react.html.
But the problem is, whenever I tried to add some content inside the input, the focus is lost from the field and automatically moved to the surrounding editor. What am I missing. Tried creating a focushandler and adding the modelNameView to it.
Should I go with the new createRawElement? My current CK5 is 20.0.0 So I don't want any breaking changes coming now.
EDIT:
I researched a little bit more. seems like createRawElement may not work here. I think this doesn't have a simple solution. I tried with allowContentOf: '$block' which also not letting me focus. But these values are explicitly for normal CK widget, not for a react component.
I had the same issue and solved it by adding this tag to the parent div that wraps my Vue component.
https://ckeditor.com/docs/ckeditor5/latest/framework/guides/deep-dive/ui/widget-internals.html#exclude-dom-events-from-default-handlers
Adding from CKE Docs:
Sometimes it can be useful to prevent processing of events by default handlers, for example using React component inside an UIElement in the widget where, by default, widget itself wants to control everything. To make it possible the only thing to do is to add a data-cke-ignore-events attribute to an element or to its ancestor and then all events triggered by any of children from that element will be ignored in default handlers.
Let’s see it in an short example:
<div data-cke-ignore-events="true">
<button>Click!</button>
</div>
In the above template events dispatched from the button, which is placed inside containing data-cke-ignore-events attribute, will be ignored by default event handlers.
I faced the similar issue.
CKEditor will takes all the events on React component which you hosted on Widget.
The work around is to stop propagation of events to CKEditor which are fired from your DOM element(domElement) where your React component hosted.
Here is the sample code:
https://github.com/ckeditor/ckeditor5-core/compare/proto/input-widget#diff-44ca1561ce575490eac0d660407d5144R239
You should stop all required events. Also you can't paste any content inside the input field of React component. That will also listened by clipboardInput event of CKEditor.
I have a grid which works normally while adding, removing, deleting rows.
Now, troubles come when I try to add row and then I click cancel. After that, my entire grid element loses .data('kendoGrid') (it returns undefined after that). I don't have any custom actions defined.
Did anyone run into similar issue?
I found the solution finally...
So, the problem was that I have been using grid like this:
<div class='n-grid' kendo-grid="widget" k-options="gridOptions"></div>
But this kind of using requires additional div wrapper. When I changed it to:
<div>
<div class='n-grid' kendo-grid="widget" k-options="gridOptions"></div>
</div>
Everything was fine...
I found this out from this part of angular-kendo.js:
self.bind("dataBinding", function(ev) {
ev.sender.$angular_itemsToCompile().each(function(){
var el = $(this);
if (el.attr(_UID_)) {
var rowScope = angular.element(this).scope();
// avoid destroying the widget's own scope
// no idea why we get it, but we do.... :(
if (rowScope && rowScope !== scope) {
destroyScope(rowScope, el);
}
}
});
When used without wrapper, cancelling changes in row, destroy parent's scope.
Hope this helps :)
Currently I have a page which on load scatters draggable divs randomly over a page using math.random
Using media queries however the page uses packery to display the same images for browser widths under 769px in a grided fashion.
I had the idea that it could be interesting to create a 'sort/organize' button which would rearrange these divs using packery and remove the draggable class already applied, however i have no idea if this is possible or how to go about it. If there is any method of animating this process that would also be a bonus!
If anyone could at the very least point me in the right direction i would be extremely thankful!!
Hopefully this gives you a bit of a starting point.
I would read up on JQuery as it has some useful helpers for DOM manipulation.
I don't think this is the most efficient way to do it, and I think you will need to rethink your test harness for doing this in the future, but hopefully this gets you started.
Firstly I've added a button to trigger the sort
<div class="rotate" id="contact">Contact</div>
<div id="logo">Andrew Ireland</div>
<button id="sort">sort</button>
Then updated the script to override the css setting to switch between draggable view and item view.
// general wait for jquery syntax
$(function(){
// trigger the layour to sort get the packery container
var container = document.querySelector('#container.packery');
var pckry = new Packery( container );
//button function
$("#sort").click(function(){
//Hide all the dragged divs
//ui-helper-hidden is a jquery ui hider class
if($('.box').css('display') == 'block') {
$('.box').css({'display':'none'});
//Show all the item class's
$('.item').css({'display':'block'});
//show the container
$('#container').css({'display':'block'});
// trigger the layour to sort
pckry.layout();
} else {
//hide all the item class's
$('.item').css({'display':'none'});
//hide the container
$('#container').css({'display':'none'});
//show the draggable box's
$('.box').css({'display':'block'});
}
});
$( ".pstn" ).draggable({ scroll: false });
$(".pstn").each(function(i,el){
var tLeft = Math.floor(Math.random()*1000),
tTop = Math.floor(Math.random()*1000);
$(el).css({position:'absolute', left: tLeft, top: tTop});
});
});
As I said this is more to get started. The packery documentation details how to trigger its layout functions so another approach would be to only have the draggable elements, and put these inside a packery container. Then when you want to sort them you can just trigger that the packery.layout() function.
I hope this is helpful, I am only just getting started on stack overflow so any feedback would be appreciated.
I don't even know if this is possible but here is an example:
<div id="register">
//bunch of markup including inputs
</div>
Via AJAX I replace the register div, but if there is a focus on a text box inside of the register div, it loses focus when replaces happens. Is there a way to maintain focus?
here is the javascript:
$("#cart_contents input").change(function()
{
$(this.form).ajaxSubmit({target: "#register_container", success: function()
{
}
});
});
I have lots of inputs inside this form, how can I figure out how to refocus
If you get an ID handle for the text box, e.g. textbox, when AJAX is complete, call:
$('#textbox').focus();
A more generic solution. Given focusable elements have IDs, bookend your AJAX stuff like so:
var focusedId = $(document.activeElement).attr('id');
// .. AJAX, replacement ..
$('#' + focusedId).focus();
Reference focus()jQuery, Using jQuery to test if an input has focus.
If you replace the markups inside the register div,the focus from earlier fields would be removed,use
$("#"+someid).focus();
to focus on the textfields with id if you are using jquery..
I am currently trying to make a bookmarklet that adds, among other things, a DIV element to the page.
I'm doing this by adding the HTML code to body.innerHTML and that works fine. On this DIV element is a button that should allow to hide the added DIV. I therefore tried to add via JavaScript a JavaScript function to the innerHTML called function hideDiv().
The new JavaScript is added to the body and it looks fine. But it doesn't work.
Short example:
javascript:var b = document.body.InnerHTML; b=b+'<input type="button" onclick="javascript:alert("hello")"/>'; document.body.innerHTML = b;
This bookmarklet should add a button that shows an alert if its clicked. It adds the button but nothing happens when clicking on it.
Is this a general issue? Can JavaScript add (working) JavaScript to a page?
I think you should set an id and then just add the function to the element. Like this:
javascript:var b = document.body.InnerHTML; b=b+'<input type="button" id="test"/>'; document.body.innerHTML = b; document.getElementById('test').onclick = function () { alert('hi')}
The javascript: prefix is only used in href attributes (or action for forms). It is NOT used in onclick or any other events. Remove the javascript: and your code should work fine.