I have a custom plugin that do some stuff and at the end of it's processing it should create a link in HTML using the selected text (the selected HTML, actually) if some text is currently selected. The selected HTML formating must be preserved (i.e. the HTML tags and attributes must not be lost) and the link must be created around all the elements.
In the FCKEditor (old version of CKEDITOR) it was possible to do:
FCK.CreateLink("mylink");
With CKEDITOR you can do it like this:
var selectedText = CKEDITOR.instances.editor1.getSelection().getSelectedText();
CKEDITOR.instances.editor1.insertHtml( ''+selectedText+'' );
What solved my problem was something like:
var attributes = Array();
attributes["href"] = link;
var style = new CKEDITOR.style( { element : 'a', attributes : attributes } );
style.type = CKEDITOR.STYLE_INLINE;
style.apply(editor.document);
It created the link in the selected elements keeping all the formating.
Related
I have a drop down which builds a form based of the selections that are selected. So, if someone selects 'foobar', it displays a text field, if they choose 'cheese', it displays radio buttons. The user can then enter data into these forms as they go along. The only problem is that when they add a new form element, all the rest of the information is erased. Im currently using the following to do add to the form:
document.getElementById('theform_div').innerHTML =
document.getElementById('theform_div').innerHTML + 'this is the new stuff';
How can I get it to keep whatever has be enetered in the form and also add the new field to the end?
Setting innerHTML destroys the contents of the element and rebuilds it from the HTML.
You need to build a separate DOM tree and add it by calling appendChild.
For example:
var container = document.createElement("div");
container.innerHTML = "...";
document.getElementById("theform_div").appendChild(container);
This is much easier to do using jQuery.
Step One:
Add jQuery to your headers:
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js”></script>
Step Two:
Append, don't replace, data to your DIV like this:
$("#theform_div").append("your_new_html_goes_here");
Don't use innerHTML to create the form elements. With innerHTML you're overwriting the old HTML with new HTML which will recreate all the elements. Instead you need to use the DOM to create and append the elements.
EXAMPLE
function addRadioElement()
{
var frm = document.getElementById("form_container");
var newEl = document.createElement("input");
newEl.type = "radio";
newEl.name = "foo";
newEl.value = "bar";
frm.appendChild(newEl);
}
The most correct way to do it without using a framework (like jQuery, Dojo, YUI) is:
var text = document.createTextNode('The text you want to write');
var div = document.createElement('div');
div.appendChild(text);
document.getElementById('theform_div').appendChild(div);
innerHTML, although supported by most browsers, is not standard compliant and - therefore, not guaranteed to work.
I would suggest using jQuery and its append function.
I'm trying to add a search link to an online form with a userscript using jQuery. I don't work too much in firefox and I feel like things that would normally work in chrome don't in ff 9/10 times for me. But anyway... this needs to be with ff.
I'm taking the text from a <p> element and creating a search url out of it (or trying to). Right now this is the function I'm trying that should be doing it... but it's doing nothing, not even any errors in console
$(function() {
var companyName = $('p')[7]; // Element that contains the name text
var companyText = companyName.text(); // Retrieve the text from element
var mixRankUrl = $("<a></a>").innerHTML("Search Mixrank"); // Create an <a> element
mixRankUrl.href = 'https://mixrank.com/appstore/sdks?search=' + companyText; // Define the href of the a element
var sdkPara = $('label.control-label')[10]; // Where I want it to go
sdkPara.append(mixRankUrl); // Append the element
});
Also, whoever wrote the html uses hardly any ids, and most classes are assigned to 10 or more elements... so unless there's a better way, I'm sort of stuck using node selectors (which stay the same form to form).
The problem is that you try to use jQuery method on DOM element. Don't understand why you don't have any errors with your code.
For exemple : $('p')[7] return a DOM element while $('p').eq(7) return a JQuery object. So you can't use a jQuery method like text() on your DOM element. You need to deal with jQuery object.
For the same reason, you had a problem with the declaration of your label object and with the modification of the href attribute of your link.
Try like this :
$(function() {
var companyName = $('p').eq(7); // Element that contains the name text
var companyText = companyName.text(); // Retrieve the text from element
var sdkPara = $('label.control-label').eq(10); // Where I want it to go
var mixRankUrl = $('<a>',{
text: 'Search Mixrank',
href: 'https://mixrank.com/appstore/sdks?search=' + companyText
}).appendTo(sdkPara); // Append the element
});
I am creating a custom WYSIWYG using editable iframe.I want to add a Custom html tag <ino> to a selected text like <info>some content here</info>.I have used this code
Editor = document.getElementById('iframe_id').contentWindow.document;
var tag='info'
var range = Editor.selection.createRange();
if (range.pasteHTML)
{
var content=Editor.selection.createRange().htmlText
content1="<"+tag+">"+content+"</"+tag+">"
range.pasteHTML(content1);
}
This code is for IE.In content1 am getting the correct text.But in output, the starting tag <info> is not getting .I have created the element using document.createElement('info');How i can solve this problem.Thanks in advance.
There is no HTML <info> element. This could well be the reason that your code is not working.
If you really need to do this (I can't see why you would), you could take advantage of the fact that IE allows you to create invalid DOM elements using document.createElement() and do something like the following, which pastes in a marker element, positions an <info> element containing the original TextRange content before the marker element and then removes the marker:
var range = Editor.selection.createRange();
var info = Editor.createElement("info");
info.innerHTML = range.htmlText;
var id = "some_random_id";
range.pasteHTML('<span id="' + id + '"></span>');
var span = Editor.getElementById(id);
span.parentNode.insertBefore(info, span);
span.parentNode.removeChild(span);
As it says in this link:http://msdn.microsoft.com/en-us/library/ms536656%28VS.85%29.aspx pasteHML only accepts HTML tags.
You can use innerHTML property instead:
range.innerHTML = content1;
I have a text <info>SOME CONTENTS GOES HERE</info>
How i can remove this text from the editor when I click on a button (custom button) using javascript function. I used this code:
dom.remove(dom.getParent(selection.getNode(), 'info'));
But it is showing an error. Is there any solution?
Thanks in advance.
tinyMCE offers a method under DOMUtils which is tinymce.dom.DOMUtils/remove
// Removes all paragraphs in the active editor
tinyMCE.activeEditor.dom.remove(tinyMCE.activeEditor.dom.select('p'));
// Removes a element by id in the document
tinyMCE.DOM.remove('mydiv');
So in your case since you want to remove <info> and what's inside then you should write something like :
// Removes all paragraphs in the active editor
tinyMCE.activeEditor.dom.remove(tinyMCE.activeEditor.dom.select('info'));
var a = ed.selection.getNode();
var txt = ed.selection.getContent();
var newT = document.createTextNode(txt);
a.parentNode.replaceChild(newT, a);
I have a drop down which builds a form based of the selections that are selected. So, if someone selects 'foobar', it displays a text field, if they choose 'cheese', it displays radio buttons. The user can then enter data into these forms as they go along. The only problem is that when they add a new form element, all the rest of the information is erased. Im currently using the following to do add to the form:
document.getElementById('theform_div').innerHTML =
document.getElementById('theform_div').innerHTML + 'this is the new stuff';
How can I get it to keep whatever has be enetered in the form and also add the new field to the end?
Setting innerHTML destroys the contents of the element and rebuilds it from the HTML.
You need to build a separate DOM tree and add it by calling appendChild.
For example:
var container = document.createElement("div");
container.innerHTML = "...";
document.getElementById("theform_div").appendChild(container);
This is much easier to do using jQuery.
Step One:
Add jQuery to your headers:
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js”></script>
Step Two:
Append, don't replace, data to your DIV like this:
$("#theform_div").append("your_new_html_goes_here");
Don't use innerHTML to create the form elements. With innerHTML you're overwriting the old HTML with new HTML which will recreate all the elements. Instead you need to use the DOM to create and append the elements.
EXAMPLE
function addRadioElement()
{
var frm = document.getElementById("form_container");
var newEl = document.createElement("input");
newEl.type = "radio";
newEl.name = "foo";
newEl.value = "bar";
frm.appendChild(newEl);
}
The most correct way to do it without using a framework (like jQuery, Dojo, YUI) is:
var text = document.createTextNode('The text you want to write');
var div = document.createElement('div');
div.appendChild(text);
document.getElementById('theform_div').appendChild(div);
innerHTML, although supported by most browsers, is not standard compliant and - therefore, not guaranteed to work.
I would suggest using jQuery and its append function.