In my CKEditor 4 application I have "blocks" that cannot be place inside each other.
I do not want any block to go into block 1 or 3. Block is is not editable so "non dropping" already works.
To prevent it I wanted to use preventDefaultDropOnElement - see documentation
Prevents dropping on the specified element.
Parameters
element : element
The element on which dropping should be disabled.
So I created code that sets preventDefaultDropOnElement for all 3 elements inside the editor. But I am still able to drag&drop a block inside the other one.
CKEDITOR.on( 'instanceReady', function( ed ){
// e.editor.addCss('css string to add');
console.log(ed.editor)
console.log(ed.editor.plugins.clipboard)
console.log(CKEDITOR.instances.editor.plugins)
var elements = CKEDITOR.instances.editor.document.getBody().getChildren()
console.log(elements)
for (var e=0,el=elements.count();e<el;e++){
console.log(elements.getItem(e))
}
// does not work
/* CKEDITOR.plugins.clipboard.preventDefaultDropOnElement( elements.getItem(3) )
CKEDITOR.plugins.clipboard.preventDefaultDropOnElement( elements.getItem(2) )
CKEDITOR.plugins.clipboard.preventDefaultDropOnElement( elements.getItem(1) )
*/
// is not a function
CKEDITOR.instances.editor.plugins.clipboard.preventDefaultDropOnElement( elements.getItem(3) )
CKEDITOR.instances.editor.plugins.clipboard.preventDefaultDropOnElement( elements.getItem(2) )
CKEDITOR.instances.editor.plugins.clipboard.preventDefaultDropOnElement( elements.getItem(1) )
// is not a function
/* ed.editor.plugins.clipboard.preventDefaultDropOnElement( elements.getItem(3) )
ed.editor.plugins.clipboard.preventDefaultDropOnElement( elements.getItem(2) )
ed.editor.plugins.clipboard.preventDefaultDropOnElement( elements.getItem(1) )
*/
});
For this code CKEDITOR.plugins.clipboard.preventDefaultDropOnElement( elements.getItem(3) ) the drop still works. And for both ed.editor.plugins.clipboard.preventDefaultDropOnElement( elements.getItem(3) ) and CKEDITOR.instances.editor.plugins.clipboard.preventDefaultDropOnElement( elements.getItem(3) ) I am getting an error .. is not a function
Would you have any idea how to make it work? The goal is not not to let paste a block onto a block.
Working jsFiddle
Related
Why do the outputs only display in one of element
(#skip-result or #distinct-result) not both of them ?
but if i try outputting the result from those two observable
below to console it works
you can check code here
var input$ = Rx.Observable.fromEvent(input,'input')
var x$ = input$
.debounce(1000)
// skip two character in string, from input value
// then, display it in #skip-result
x$
.map(v=> v.target.value)
.filter(v=> v.length > 2)
.flatMap(v=>
Rx
.Observable
.from(v)
.skip(2)
.reduce((x,y)=> x + y)
)
.subscribe(s=>{
$('#skip-result').text('Skip Value is ' + s)
})
// search distinct in string, from input value
// then, display it in #distinct-result
x$
.map(e=> e.target.value)
.filter(e=> e.length > 0)
.flatMap(v=>
Rx
.Observable
.from(v)
.distinct()
.reduce((x,y)=> x + y)
)
.subscribe(x=>{
$('#distinct-result').text('Distinct value is ' +x)
})
In the JSBin you've referenced, you haven't imported jQuery, but you appear to be using the jQuery selector to set the contents of both the #skip-result and #distinct-result DOM elements. This will throw an error.
If instead you changed them to set the innerHTML property, which one subscription already looks to be doing, you should get your expected behaviour.
.subscribe(s => {
skipResult.innerHTML = 'Skip Value is ' + s
})
EDIT
After a second look, your markup isn't being closed properly. Specifically, #skip-result is being made a child of #distinct-result.
Does CKEDITOR.htmlParser.element.remove() remove the element and its descendants or does it just remove the element and stuff its immediate children into its place? I ask because I've tried a number of approaches to removing elements from consideration during a filter and have wound up with not quite the results I expect; removing the element seems not to remove everything it ought to, but perhaps it's intended behavior.
If the latter, what is the most efficient way to remove an element and everything inside it? setHtml()?
The CKEDITOR.htmlParser.node.remove removes the node which means also its children are removed.
// Removing `em` element on `setData`.
CKEDITOR.instances.editor1.on( 'toHtml', function( evt ) {
var ems = evt.data.dataValue.find( 'em', true );
console.log( 'Before: ' + evt.data.dataValue.getHtml() );
if ( ems.length ) {
ems[ 0 ].remove();
}
console.log( 'After: ' + evt.data.dataValue.getHtml() );
}, null, null, 14 );
See this codepen demo.
It is hard to speculate on your case without seeing any code, but I assume you are trying to manipulate some copy of the element or partial tree which is not used any further so it may seem this method does not work as expected.
If you provide the code, it will be easier to check if there are any issues with it.
I want to validate a value , which is dynamic and retrieved from one page to another. That element also has space on it.
Below is my coding for that.
Page - 1
var PerAge = element(by.css("h1 > span.ng-binding")).getText();
This element has space on it , like this - > name
Page-2 - > same value displayed in an other page. This element has no space on it.
var HumAge = element(by.repeater("slide in ctrl.slides track by $index")).getText();
Now, I want to validate the value on Page 2 is same or not. Since , the repeater has bunch of other values , so I am using .toContain to validate the value.
The issue here is , the PerAge has space on it.
I checked this stack overflow question , but it did not work.
Expected '> ' to equal '> ' in jasmine.
expect(PerAge).toContain(HumAge);
Its returning following error
Expected 'Shane' to contain ' Shane'.
I tried trim, It doesn't recognize trim.
I cannot use .ToEqual like below since the element have bunch of other things.
expect(PerAge).toEqual('\xA0HumAge')
If I understand you correctly, you retrieve a value on page 1 like this:
var PerAge = element(by.css("h1 > span.ng-binding")).getText();
and use it on page 2 to compare it:
var HumAge = element(by.repeater("slide in ctrl.slides track by $index")).getText()
expect(HumAge).toEqual(PerAge);
This fails due to the spaces.
The reason why you can't use .trim() is because .getText() returns a promise. You first need to resolve the promise before you can use .trim().
What you can do is for example this. You also find an example of the code if you use a transpiler like Babel or use TypeScript which both support Async/Await.
var PerAge, HumAge;
element(by.css("h1 > span.ng-binding")).getText()
.then(function(text) {
PerAge = text.trim();
});
// Go to page 2
element(by.repeater("slide in ctrl.slides track by $index")).getText()
.then(function(text) {
HumAge = text.trim();
});
expect(HumAge).toEqual(PerAge);
// If you can use async await because you transpile with Babel or use typescript you can do this to tidy the code
// $ is the Protractor shorthand for the `css`-locator
const PerAge = (await $('h1 > span.ng-binding').getText()).trim();
const HumAge = (await $('[ng-repeater="slide in ctrl.slides track by $index"]').getText()).trim();
expect(HumAge).toEqual(PerAge);
I attempting to make an ajax call using Jquery, but (using Firebug) discover that the ".render is not a function" in the following line of code:
$( '#readTemplate' ).render( response ).appendTo( "#records" );
So I downloaded jquery.render.js, which takes care of the render error, but I now get ".replace is not a function" on the following line(s):
return tem.replace( /\$\{([^\}]+)\}\.each\(([^\)]+)\)/g, function( w, k, t )
I tried replaceTo, but that didn't work. All help is appreciated.
Try assigning tem as a new var then use replace.
var newvar = tem;
newvar.replace( /\$\{([^\}]+)\}\.each\(([^\)]+)\)/g, function( w, k, t )
If that doesn't work try updating your version of jQuery.
Edit:
Make sure your var tem is a string as replace is a string function. So if:
var tem = "Some random string";
tem.replace()
replace would work. Make sure also that what ever is defining tem isn't returning null or undefined. Try alerting tem before the replace function and see what it returns.
i have no idea how wordpress use <!--more--> to seperate the post then create read more link.
any idea?
thanks
Use the word_limiter() function from the Text Helper included in CodeIgniter to shorted your post to a fixed number of words, then append the "read more" hyperlink to that text, and echo.
Text Helper Reference
take a look in the WP source, the function is located in wp-includes/post-template.php around line 200 in the get_the_content function
I wouldn't recommend just copying and pasting as it likely won't work, but you may get the logic behind it. WP uses a preg_match for the <!--more --> tag, then parses it if it exists..
$content = $pages[$page-1];
if ( preg_match('/<!--more(.*?)?-->/', $content, $matches) ) {
$content = explode($matches[0], $content, 2);
if ( !empty($matches[1]) && !empty($more_link_text) )
$more_link_text = strip_tags(wp_kses_no_null(trim($matches[1])));
$hasTeaser = true;
} else {
// so on