I would like to make an option that after clicking CKEditors button (like 'bold', 'justify', 'font-size', etc.) change all text not only selected part (something like autoselection).
I have code:
editor = CKEDITOR.replace( "textEditor",{
on : {
'beforeCommandExec' : function(ev){
var sel = ev.editor.getSelection();
var element = sel.getStartElement();
sel.selectElement(element);
}
}
});
it makes selection but don't change content.
I changed code to:
editor = CKEDITOR.replace( "textEditor",{
'beforeCommandExec' : function(ev){
var sel = ev.editor.getSelection();
var element = sel.getStartElement();
sel.selectElement(element);
}
}
});
and it's working, but only when editor on start is empty. If is any text onload, and i click b, u, i buttons i get error in console
Uncaught TypeError: Cannot read property 'getParent' of null
Related
I have a problem.
When I make the editor 'readonly' some of the buttons (copy, preview, full screen) stay enabled.
Normal
Select some text
How I can enabled other buttons when I select the text? (for example enabled button 'BGColor')
You can do something like this
Look for selection event.
CKEDITOR.instances["textarea"].on( 'selectionChange', function( evt ) {
// get desired command from ckeditor
var myCommand = this.getCommand( 'CKEDITOR_COMMAND_NAME' );
var mySelection = null;
// check if something is selected
var mySelection = this.getSelection().getNative() || this.window.$.getSelection() || this.document.$.selection;
if (!mySelection) {
// if not stay disable
myCommand.disable();
} else {
//if yes enable command
myCommand.enable();
}
});
I've read this excellent answer to pretty much the same question. However, I have tried every technique that #Reinmar recommended, and none of them seem to work.
The situation is that I am taking the current HTML from the editor and wrapping certain pieces in span tags. I then set the now modified HTML back and try to restore the user's cursor location. No technique works.
Here is a very simple example to reproduce the issue:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="//cdn.ckeditor.com/4.4.7/standard/ckeditor.js"></script>
</head>
<body>
<textarea id="cktest"><p>Sometimes Lorem. Sometime Ipsum. Always dolor.</p></textarea>
<script type="text/javascript">
(function () {
var checkTimeout;
var bookmark;
var storeCursorLocation = function(editor) {
bookmark = editor.getSelection().createBookmarks();
};
var restoreCursorLocation = function(editor) {
editor.getSelection().selectBookmarks(bookmark);
};
var validateText = function(editor) {
storeCursorLocation(editor);
var data = editor.document.getBody().getHtml();
data = data.replace("Lorem", "<span class='err-item'>Lorem</span>");
editor.document.getBody().setHtml(data);
restoreCursorLocation(editor);
};
CKEDITOR.replace('cktest', {
on: {
'instanceReady': function(evt) {
},
'key' : function(evt) {
clearTimeout(checkTimeout);
checkTimeout = setTimeout(function () {
validateText(evt.editor);
}, 1000);
}
}
});
})();
</script>
</body>
</html>
This code starts a timer when a user presses a key, and then waits for 1 second after they stop pressing keys to do the check.
Copy this to a new .html file and run it in your favorite browser (I am using Chrome).
When the CKEditor loads, use the mouse to place your cursor somewhere in the middle of the text. Then press the CTRL key and wait 1 second. You will see your cursor jump back to the start of the text.
This code example uses
editor.getSelection().createBookmarks();
to create the bookmark. But I have also tried:
editor.getSelection().createBookmarks(true);
and
editor.getSelection().createBookmarks2();
I have also tried just saving the range using
var ranges = editor.getSelection().getRanges();
and
editor.getSelection().selectRanges(ranges);
in the restoreCursorLocation function.
(function () {
var checkTimeout;
var bookmark;
var storeCursorLocation = function( editor ) {
bookmark = editor.getSelection().createBookmarks( true );
};
var restoreCursorLocation = function( editor ) {
//editor.focus();
editor.getSelection().selectBookmarks( bookmark );
};
var validateText = function( editor ) {
storeCursorLocation( editor );
var data = editor.document.getBody().getHtml();
data = data.replace( "spaceflight", "<span class='err-item'>spaceflight</span>" );
editor.document.getBody().setHtml( data );
restoreCursorLocation( editor );
//fire this event after DOM changes if working with widgets
//editor.fire( 'contentDomInvalidated' );
};
var editor = CKEDITOR.replace( 'editor1', {
extraAllowedContent : 'span(err-item)',
on: {
"pluginsLoaded" : function( event ){
editor.on( 'contentDom', function() {
var editable = editor.editable();
editable.attachListener( editable, 'keyup', function( e ) {
clearTimeout( checkTimeout );
checkTimeout = setTimeout(function () {
validateText( editor );
}, 100 );
});
});
}
}
});
})();
I have checked your code, made some corrections and the above seems to work fine. I know you said you have tried it but for me createBookmarks(true) has done the trick.
Explanations and Notes:
You needed to use createBookmarks(true) which inserts unique span into HTML. Such bookmark is not affected by changes you are doing inside the DOM (there are limits of course e.g. your custom changes remove bookmark).
It was clever to use getBody().getHtml() and getBody().setHTML(). If you have used editor.getData() this would have removed empty spans that represent bookmarks.
Please note however that such approach may break widgets so it is required to fire contentDomInvalidated event after such changes.
I was also focusing editor before restoring selection but this is “just in case” solution, as I have noticed that editor selects bookmark without it. If however, for some reason, you are losing the selection, this would be another thing to use.
Here you have working example: http://jsfiddle.net/j_swiderski/nwbsywnn/1/
Check the default behaviour when you set innerHtml in https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML
Removes all of element's children, parses the content string and assigns the resulting nodes as children of the element
The bookmarks in CKEDITOR are hidden span elements and setting innerHtml will remove all those elements.
Anyway the solution is very simple.
Change your storeCursorLocation function to this
var storeCursorLocation = function(editor) {
bookmark = editor.getSelection().createBookmarks(true);
};
When you pass true as parameters it will use the ids as the reference instead of storing the DOM elements so you can restore then after an innerHtml change.
{Edit}
Reading Solution 2 from #Reinmar he says
If you can avoid uncontrolled innerHTML changes and instead append/remove/move some nodes, then just remember that you have to preserve these elements and this method will work perfectly. You can also move bookmarks' elements if your modifications should change the selection as well.
This is how you do it if you can't replace the contents of the element innerHtml.
This solution is less efficient but might work in some scenarios
Change the validateText function to this.
var validateText = function(editor) {
storeCursorLocation(editor);
var parent = editor.document.getBody().$.firstChild,
nodes = parent.childNodes,
nodeText,
words,
index = 0,
current,
newElement;
while (index < nodes.length) {
current = nodes[index];
nodeText = current.nodeValue;
if (current.nodeType === Node.TEXT_NODE && nodeText.indexOf('Lorem') !== -1) {
words = nodeText.split('Lorem');
newElement = document.createTextNode(words[0]);
parent.insertBefore(newElement, current);
newElement = document.createTextNode(words[1]);
parent.insertBefore(newElement, current.nextSibling);
newElement = document.createElement('span')
newElement.className = 'err-item';
newElement.innerHTML = 'Lorem';
parent.replaceChild(newElement, current);
break;
}
index++;
}
restoreCursorLocation(editor);
};
Basically I'm transversing the nodes of the first p in the chkeditor body and replacing only the node of type text that contains Lorem with a span and add the remaining text before and after as text elements. If you replace the whole text like you were doing it will remove from the DOM the bookmarks so when you tried to restore they don't exist.
I am using openlayers 3. From the values contained in a vector GeoJSON, I want to fill a dropdown menu. When selecting a value from the dropdown menu, I want to zoom in on the entity.
My problem now is that I want to generate my HTML from the attributes of my GeoJSON. So I tried this simple code but it doesn't work :
var menu = document.getElementById('menuDropDown');
vector2.getSource().forEachFeature(function() {
menu.innerHTML = feature.get('NOM').join(', ');
});
EDIT:
I'm able to populate a dropdown menu from a list:
var list = ['a','b','c'];
var mySelect = $('#mySelect');
$.each(list, function(val, text) {
mySelect.append(
$('<option></option>').val(val).html(text)
);
});
What i want to do it's to populate this list from the attribute of my vector
So i try this:
// vector2 it's a GeoJSON who is integrate on my map
vector2.getSource().getFeatures().forEachFeature(function(feature) {
list.push(feature.get('NOM'));
});
Firstly I'm assuming you have to pass some parameter to your callback:
vector2.getSource().forEachFeature(function(feature) {
Then you can append an item to a dropdown like so:
var item = document.createElement('option');
item.setAttribute('value', feature.get('NOM'));
var textNode = document.createTextNode(feature.get('NOM'));
item.appendChild(textNode)
menu.appendChild(item);
All together:
var menu = document.getElementById('menuDropDown');
vector2.getSource().forEachFeature(function(feature) {
var item = document.createElement('option');
item.setAttribute('value', feature.get('NOM'));
var textNode = document.createTextNode(feature.get('NOM'));
item.appendChild(textNode)
menu.appendChild(item);
});
I have resolve my problem:
vector2.getSource().on('change', function(evt){
var source = evt.target;
var list = [];
source.forEachFeature(function(feature) {
list.push(feature.get('NOM'));
});
// console.log("Ecrit moi les noms : " + list);
Thanks you to those who took the time to respond
This section of code in my /js/global.js file activate each image to open in a new window when clicked. Is it possible to alter this code to have each open in a FancyBox instead? I have downloaded a FancyBox plugin for a Vanilla forum I am running, and it currently only targets images embedded in posts After You Click On The Post Itself. On the main page, clicking on an image opens a new window.
// Shrink large images to fit into message space, and pop into new window when clicked.
// This needs to happen in onload because otherwise the image sizes are not yet known.
jQuery(window).load(function() {
var props = ['Width', 'Height'], prop;
while (prop = props.pop()) {
(function (natural, prop) {
jQuery.fn[natural] = (natural in new Image()) ?
function () {
return this[0][natural];
} :
function () {
var
node = this[0],
img,
value;
if (node.tagName.toLowerCase() === 'img') {
img = new Image();
img.src = node.src,
value = img[prop];
}
return value;
};
}('natural' + prop, prop.toLowerCase()));
}
jQuery('div.Message img').each(function(i,img) {
var img = jQuery(img);
var container = img.closest('div.Message');
if (img.naturalWidth() > container.width() && container.width() > 0) {
img.wrap('');
}
});
// Let the world know we're done here
jQuery(window).trigger('ImagesResized');
});
Add an specific class to your wrapped images, modifying this line
img.wrap('');
... into this :
img.wrap('<a class="fancybox" href="'+$(img).attr('src')+'"></a>');
Then bind fancybox to that selector (".fancybox") in a custom script like :
$(".fancybox").fancybox();
This assumes that you have properly loaded the fancybox js and css files.
function sidebar(editor)
{
var selection = editor.getSelection();
if(selection.getSelectedText()!="")
{
var range = selection.getRanges();
var customNode = editor.document.createElement( 'cdl:sidebar' );
var extractedContent = range[0].extractContents();
customNode.append(extractedContent);
var sidebarHolder = editor.document.createElement("sidebarHolder");
sidebarHolder.append(customNode);
var nodeHtml = sidebarHolder.getHtml();
editor.insertHtml(nodeHtml+" ");
}
else {
showErrorMessage("Selection is not proper");
}
}
This is my code.Whenever i select a single word like "Please" in "Please post comments or corrections" statement ,after adding tags Please.The space between "Please Post" get's trimmed.But when i select "Please "(word with space),the code works correctly.And , i want that tag should not visible in editor , it should be visible in source panel.
Try appending html to ckeditor instance rather adding text.