I want to apply heading style (h1) to the selected text in CKEditor using JavaScript.
Here is my function:
function applyStyle()
{
var selection = CKEDITOR.instances.editor1.getSelection();
if(selection.getType() == 2) //where 2 will be Text type
{
var style = new CKEDITOR.style({element: 'h1'});
selection.applyStyle(style);
style.checkActive(editor1.elementPath(), editor1);
}
else
{
alert('Select text to apply');
}
}
But I can't get the style applied on the selected text,
Kindly someone solve this
Thanks
Its a cumbersome, but I found the solution for this ,see below
function applystyle(tagName)
{
var selection = CKEDITOR.instances.editor1.getSelection().getNative();
var oEditor = CKEDITOR.instances.editor1;
var openTag = "<" + tagName + ">";
var closeTag = "</" + tagName + ">";
var html = openTag + selection + closeTag;
var newElement = CKEDITOR.dom.element.createFromHtml( html, oEditor.document );
oEditor.insertElement( newElement );
}
I found the above code working well for me,
Thanks
Related
I am trying to dynamically add accordion elements to my DOM and I cannot seem to add it correctly so that the new element will have it's ID in place, class in place etc...
Here is my code:
function addAccordion(esr){
var elementID = document.getElementById("ThreatMainDiv_" + esr.marking);
var emittersDiv = document.getElementById("Emitters");
if(elementID != null){
return;
}
var marking = esr.marking;
var tmp;
tmp = "\"" + "ThreatMainDiv_" + marking + "\"";
var topDiv = '<div id='+ tmp + ' class="accordionTitle"><h1 style="font-size: 16px"></h1></div>';
var tDiv = document.createElement('div');
tDiv.innerHTML = topDiv;
$('#Emitters').append(tDiv);
};
How can I add it correctly?
Change
$('.accordionTitle').click(function(){});
with
$(document).on('click','.accordionTitle',function(){});
I am trying to convert selected text's font with help of AngularJs and jQuery. This is my code. Everything is working fine but i am not able to change the text with a new text.
This is my code:
var app = angular.module('myApp', []);
app.controller('editor', function($scope) {
$scope.color = "black";
$scope.selectedText = "";
$scope.changeFont = function() {
if ($scope.selectedText != "") {
var changedText = "<span style='font-size:" + $scope.kys_selected_font + "px' >" + $scope.selectedText + "</span>";
alert($scope.selectedText + $scope.kys_selected_font + " " + changedText);
document.getElementById("#content").innerHTML.replace($scope.selectedText, changedText);
} else {
$("#content").append("<span id='one' style='font-size:" + $scope.kys_selected_font + "px' > this is some text </span>");
$("#one").focus();
}
};
$("#content").mouseup(function() {
$scope.selectedText = window.getSelection();
});
});
innerHTML.replace(...) returns a new string, rather than modifying the existing one, so your replacement won't modify the element.
You need to actually update the property:
var el = document.getElementById("content");
el.innerHTML = el.innerHTML.replace($scope.selectedText, changedText);
(also note # removed from element ID as per #IvanSivak's comment)
I have the following code i would like to insert bodytext variable into anchor tag how to achieve this
function blogBodyRenderer(ctx) {
var item = ctx.CurrentItem;
var html = item['Body'];
var plainBodyText = $(html).text();
var res = plainBodyText.substring(0, 15);
alert(res);
var str2 = 'Read more...';
var bodytext = res.concat(str2);
return ' + bodytext + ';
}
You are not properly closing the string. Try this
'' + bodytext + '';
I use JavaScript to create input text fields. And everything works fine, except attribute value. It simply doesn't generate and I don't know why?
Here's my code:
k=1;
function addtxt() {
var tip = document.createElement("input");
tip.type = "text";
tip.name = "tip[" + k + "]";
tip.value = "Question1";
var div = document.createElement("div");
div.innerHTML = "Question: " + tip.outerHTML + "<br />";
document.getElementById("mydiv").appendChild(div);
k++
}
This is what I got:
<input type="text" name="tip[1]">
may be try using setAttribute(), like, change:
tip.value = "Question1";
to
tip.setAttribute('value', "Question1");
function createList(arrunique, arrayout) {
for (i = 0; i < arrayout[0].length; i++) {
var divIdC = i;
var divIdT = i + 10;
$('#tb').append('<select name="combo" style="float:left; width:100px;" id="' + divIdC + '" onchange="getComboVal(this,' + divIdC + ')"></select>');
$('#tb').append('<input type="text" name = "textBox" style= "width:100px;" id="' + divIdT + '" onkeyup="validate(this,"' + divIdT + '") value="0">');
var select = document.getElementById(divIdC);
select.options[select.options.length] = new Option("Select " + arrunique[i][0]);
for (j = 1; j < arrunique[i].length; j++) {
select.options[select.options.length] = new Option(arrunique[i][j]);
};
};
}
In this code I want to generate a combo box and a textbox and I want to apply some style sheet attribute or any class. How can I do this. Its not working.
There are many, many ways of styling a javascript created element. Here are a few.
Click here for live demo.
var myElem = document.createElement('div');
myElem.style.color = '#FFF';
with jQuery:
var $myElem = $('<div></div>');
$myElem.css('color', '#FFF');
or jQuery css object syntax (for passing multiple styles)
$myElem.css({display: 'block', background: '#000'});
Rather than adding the style after creating the element, you may also consider just adding a class to the element after creating it and styling this class in your css file.
CSS file:
.myElem {
color: #FFF;
}
myElem.className = 'myElem';
or
$myElem.addClass('myElem');
$('#tb').append('<input type="text" class="YOURCLASS" name = "textBox" style= "width:100px;" id="'+divIdT+'" onkeyup="validate(this,"'+divIdT+'") value="0">');
See this simplified jsFiddle. Ensure that the console is not generating an errors, and that you're calling the createList() function.