I add a button to CKEditor. I want to wrap the selected text in the tag h2. If no text, the button is not working properly. I use the following code.
var selected_text = editor.getSelection().getSelectedText();
var newElement = new CKEDITOR.dom.element('h2');
newElement.setAttributes({style: ''});
newElement.setText(selected_text);
editor.insertElement(newElement);
But the tag is added h2even if text is not selected. How can I fix this?
Is there a reason you can not just check the length before making any changes?
var selected_text = editor.getSelection().getSelectedText();
if(selected_text.length > 0)
{
var newElement = new CKEDITOR.dom.element('h2');
newElement.setAttributes({style: ''});
newElement.setText(selected_text);
editor.insertElement(newElement);
}
Related
Is there a way to tell if the replace field in a search box is visible?
I'm currently using the following to check if the search box is visible:
var isVisible = editor.searchBox.element.style.display != "none";
It looks like there is a flag for it:
var isSearchVisible = editor.searchBox.element.style.display != "none";
var isReplace = editor.searchBox.isReplace;
var isReplaceVisible = isReplace && isSearchVisible;
The Oracle Application Express code editor is just plain back text on white background. No Code highlighting. Also I can't press "tab" without the textfield loosing focus.
I am using firefox 31 (can't upgrade, rescricted by Admin at work here) Also I can't install plugins. I know you can change css on specific sites using a special folder in firefox ("chrome"-folder / userContent.css). I already used this to change die default size of the textfield, because it was frickin small everytime I opened the edit page.
So do you know any framework or script I can use in Apex ? (I could copy that shit to jsfiddle.net every time but that sucks
(I also found the scratchpad in Firefox, which can run js and jquery. Does that help ?)
[SOLVED]
since you can't use
<script src = "">
etc. in plain js, I had to use loadScript. For css files it was even more complicated, but I got it all working.
This is my code, I run it in scratchpad (firefox). It uses ACE to change a div to an editor with highlighting. When clicking apply I revert the editor-changes in the DOM but keep the text/code.
// Load Ace js
loadScript("http://cdnjs.cloudflare.com/ajax/libs/ace/1.1.01/ace.js", function(){
//initialization code
});
// Load Ace css
var cssId = 'myCss'; // you could encode the css path itself to generate id..
if (!document.getElementById(cssId)){
var head = document.getElementsByTagName('head')[0];
var link = document.createElement('link');
link.id = cssId;
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap.min.css';
link.media = 'all';
head.appendChild(link);
}
// change textarea to div
var editorRegion = document.getElementById('F4000_P4651_PLUG_SOURCE_fieldset');
editorRegion.innerHTML = editorRegion.innerHTML.replace("textarea","div");
// run ACE
highlight();
// Modify the apply Button in Apex to first revert ACE-Editor to normal, then do the usual apply.
var applyChanges = document.getElementById('B3456326662');
applyChanges.setAttribute("onclick","modifiedApply()");
function modifiedApply(){
close();
setTimeout(normalApply, 500);
}
function normalApply(){
javascript:apex.submit('Apply_Changes');
}
// Revert ACE-Changes, but keep changed text/code.
function close(){
var value = editor.getValue();
editor.destroy();
var oldDiv = editor.container;
var newDiv = oldDiv.cloneNode(false);
newDiv.textContent = value;
oldDiv.parentNode.replaceChild(newDiv, oldDiv);
newDiv.outerHTML = newDiv.outerHTML.replace("div","textarea");
var old_new_old = document.getElementById('F4000_P4651_PLUG_SOURCE');
old_new_old.textContent = old_new_old.textContent.substring(0, old_new_old.textContent.length - 6);
}
var editor;
function highlight() {
editor = ace.edit("F4000_P4651_PLUG_SOURCE");
editor.setTheme("ace/theme/monokai");
editor.getSession().setUseWorker(false);
editor.getSession().setMode("ace/mode/javascript");
document.getElementsByClassName('ace_print-margin')[0].setAttribute("style","left:1000px");
}
function loadScript(url, callback){
var script = document.createElement("script")
script.type = "text/javascript";
if (script.readyState){ //IE
script.onreadystatechange = function(){
if (script.readyState == "loaded" ||
script.readyState == "complete"){
script.onreadystatechange = null;
callback();
}
};
} else { //Others
script.onload = function(){
callback();
};
}
script.src = url;
document.getElementsByTagName("head")[0].appendChild(script);
}
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
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.
I'm a newbie to jQuery and I have a map with a highlight plugin, when mouse over an area I want to change the text in a div with an ID and the text I will get it from the area attribute Alt="some text"
Here is the code that used for area loops, I'm pretty sure I can add a small function here but I couldn't figure it out.
//map
clicks$(".tabs area").click(function(){
//areas loop:
$(".tabs area").each(function(){
var d = $(this).data('maphilight') || {};
if(d.alwaysOn == true){
d.alwaysOn = false;
}
});
var data = $(this).data('maphilight') || {};
data.alwaysOn = true;
$(this).data('maphilight', data).trigger('alwaysOn.maphilight');
if ($(this).hasClass("current") == false)
{
var thisTarget = $(this).attr("href");
$(this).parents(".tabs").find('area.current').removeClass('current');
$(this).addClass('current');
$(this).parents(".tabs").nextAll(".tab-content").children(":visible").fadeOut(1, function() {
$(thisTarget).fadeIn("fast");
});
}
return false;
});
Any help or suggestions on how I can get this done would be highly appreciated.
I'm not familiar with the highlights plugin, but I think you just wanna add a mouseover event to each area like so (you would place this before/after your .click declaration):
$(".tabs area").mouseover(function() {
var alt_text = $(this).attr('alt');
$("#YOUR_TEXT_DIV_ID").html(alt_text);
}).mouseout(function() {
//do something on mouseout
});