Does anyone know of a way to wrap custom tags around selected text
using execCommand or otherwise?
I am developing a rich text editor for use in a web site and while
there are a few decent ones already floating around I need to
implement a few extra bits of functionality. Specifically tool tips.
Idealy I'd like to wrap custom tags around selected text using
execCommand. Ie "Selected Text" becomes:
im working with execCommand and trying to make a function to insert a youtube video into a content editable div with execcommand inserthtml. Now this works with every other browser except, OMG IE. now i am trying to use pasteHTML(), found that some people have gotten it to work, for its part but for some reason it is not working
I would like to include extra "hidden" information in a generated HTML page that can be used by javascript functions.
I realise that most browsers seem to ignore any tags and attributes they don't understand, but from what I can tell the standards do not allow me to make up my own tags or attributes as they will fail validation.
is there any standard element name that can be used for such a purpose i.e. passes validation but never produces any output (and ideally allows nested elements to be rendered normally too)...
I need to replace custom tags to spans. I have: Code: <block style="color:blue" class="block01" limit="100">This is a block</block> I need to fetch the attributes and add them to a span, like: Code: <span style="color:blue" class="block01" limit="100">This is a block</span> There's a few on the page so I need to change all of them some may have many attributes.
I am trying to find how to use custom tags in html and render data based on their use.
A good example is the joomla <jm:whatever> tag.
I found the following article: [url]
I think it might be outdated though because the behavior:url element does not seem to work. Plus, when I check the style sheet on a joomla site, it doesnt seem to use this method. I think these tags might be xml but I do not know how to render them based on the tag.
For example: <customAbbrv:display src="test.html" label="Test" />
I would want this tag to fire test.html and pass the attribute label which is set to Test.
Here's what I'm trying to do: 1) I get reference to a div that's on my page: var theDiv = $("#" + divID); 2) Now I want to add a custom attribute tag to it, so for instance I want to add "winWidth" so that the div object now contains "winWidth=" for instance. 3) I want to set winWidth now since it's part of theDiv to a value
I'm not sure how to really do 1 + 2. I need to do this on the fly because some javascript logic later will add these attributes dynamically to the div... outside of what the original div had...I don't care what it had, I know I have it now in a JS variable and now I want to both add some new attributes to the div, and then set them on the fly. I don't need these attributes to be on my page, I just need them added to my div variable reference.
Can I use execCommand to save just the contents of a textfield as a PHP file on a users computer? I've been searching for an hour and can't figure out how to do it.
I am using IE 6.0. On a page, I have placed a contenteditable div which I want to use as a Rich Text Area. I am using the execCommand method of the document to control bold, italics, underlining, and undo for this div.
I have placed an input element on the page to. All but the undo, are restricted to working only on the div. How can I restrict the undo to working on only the div?
Below is the complete page so you can see what I am talking about. Just paste it into an htm file and traverse to it via your browser. Type something in the div and the input and then try the buttons. Code:
I'm (experimenting) writing my own RTE in JavaScript, I'm doing pretty good until it comes to the commands, the execCommand method. Here's what I have so far:
I am attempting to write a wysiwyg text editor to use in back-end site administration forms. It's working pretty well, aside from one error: when I hilight a large block of text and change the font, the change only applies to portions of the text selected (which appears to be random portions). Here is the javascript I'm using:
Code:function applyFont() { document.all.rtEditor.focus(); document.execCommand(fontname, false, document.all.fontNameSelector.value);}Where am I going wrong?
I'm using an HTML page with one section having editable content. Nothing overly complicated. All other execCommands are working fine, but I cannot get Paste to work. The function is called from this button:
And, here's the Javascript function:
When I use the Copy or Cut buttons the selected text is loaded into the clipboard. If I press Ctrl+V to paste, it works fine. But clicking the Paste button either has no visible effect (if no text is selected) or just deletes any selected text. I've used the Paste command before from VB without any problem, but it's been awhile since I've used JS.
I am having a problem with my wysiwyg editor for my site, users dont like the fact that you have to select text before you create a link and I was wondering if it was possible to prompt the user to add title text before you use the execCommand('createlink') and use that has the select text that they made from the prompt. Instead of the old way where you must select text first to use execCommand('createlink') to create a link. kind of like Sitepoint's insert link function but instead prompts the user for the title and doesn't insert bbcode but a anchor tag?
Can't seem to make it work, I have seen many examples but they are all just for 1 div tag. When i trymore than one it doesn't work anymore.The first one works, if i have more than 1 then the other don't work.
using the following jquery $(document).ready(function(){ $("#toggle-text").click(function () { var divvalue= this.value;
Is it possible to trigger the action of a form with a submit button that's outside the form tags? If so, how should this example be rescripted to make the input tag work outside the form tags?
I really know nothing about how to code JavaScript (I know what it is and what it does) and I need a script to go in the head of my page and look for all <a> tags that have <img> tags inside of them and add a rel="lightbox" attribute to them.
function unHide (fieldname) { .... not important... document.form1.fieldname.style.visibility = 'visible'
}
I have a field name called country in a form. When the onclick="unHide('country')" is used then the above function does not work but if i change the following line within the function document.form1.country.style.visibility = 'visible' then it works.
I've tested it in most recent versions of IE, FF, Opera, and Safari.
The first parameter is the alert's text, if a second parameter is passed, it is the alert's title, else it will just have "Alert" in the title.
You can fire the function as many times as you like, any alert's thrown after the first will set themselves on top of each other slightly staggered much like the built in alert.
The alert will automatically be placed in a visible place regardless of where the page has scrolled. They will also stay in that same place in relation to the screen if the user scrolls after the alert has fired.
The top most alert is the only one clickable and moveable until it has been acknowledged (Much like a regular alert).
The benefit of this is that it does not freeze the user's interface once the alert is thrown.
Here's the code:
Javascript:
//***************************** // Custom Alert Box // Free to use with credits in tact. // Written By Adam Matthews aka Basscyst //AdamDMatthews@Gmail.com //***************************** function msgBox(msg,hdr){ if(!document.getElementById('alerts')){ var div=document.createElement('div'); div.setAttribute('id','alerts'); document.body.appendChild(div); } var div=document.createElement('div'); div.className="alertbox"; var h3=document.createElement('h3'); h3.className="alerttitle"; var p=document.createElement('p'); p.className="alerttxt"; var footdiv=document.createElement('p'); footdiv.className="alertfoot"; div.appendChild(h3); div.appendChild(p); div.appendChild(footdiv); var but=document.createElement('input'); but.setAttribute('type','button'); but.className='alertbut' but.setAttribute('value','OK'); footdiv.appendChild(but); var hdr=(hdr) ? hdr : "Alert!"; h3.appendChild(document.createTextNode(hdr)); var cut=msg.split(" "); var len=cut.length; p.appendChild(document.createTextNode(cut[0])); for(var i=1;i<len;i++){ p.appendChild(document.createElement('br')); p.appendChild(document.createTextNode(cut[i])); } document.getElementById('alerts').appendChild(div); window.onscroll=function(){ placeAlerts(); } window.onresize=function(){ placeAlerts(); } placeAlerts(); } var posX; var posY; function mouseXY(e){ if (!e){ var e = window.event; } if (e.clientX) { posX = e.clientX + document.documentElement.scrollLeft; posY = e.clientY + document.documentElement.scrollTop; } else { posX = Math.max(e.pageX,0); posY = Math.max(e.pageY,0); } var coord=new Array(); return coord; } if(document.captureEvents){ document.captureEvents(Event.MOUSEMOVE) } function placeAlerts(){ var alerts=document.getElementById('alerts').getElementsByTagName('div'); var len=alerts.length; var x=0; var y=300; var w=document.body.clientWidth; var h=document.body.clientHeight; for(var i=0;i<len;i++){ alerts[i].style.zIndex=i+100; alerts[i].getElementsByTagName('h3')[0].onmousedown=""; alerts[i].getElementsByTagName('input')[0].onclick="";
if(window.pageYOffset){ alerts[i].style.top=y+(window.pageYOffset)+'px' }else{ alerts[i].style.top=y+(document.documentElement.scrollTop)+'px' } alerts[i].style.left=(w / 2)- (343 / 2) + x +'px'; x=x+15; y=y+15; if(i==len-1){ var h3=alerts[i].getElementsByTagName('h3')[0]; var but=alerts[i].getElementsByTagName('input')[0]; but.onclick=function(){ this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode); var alerts=document.getElementById('alerts').getElementsByTagName('div'); if(alerts.length==0){ window.onscroll=""; } placeAlerts(); } h3.onmousedown=function(event){ this.parentNode.setAttribute('id','active_alert'); var event=(event)?event:arguments[0]; mouseXY(event); start_x=posX; start_left=document.getElementById('active_alert').style.left.replace('px',''); adjust=posX-start_left; document.onmousemove=function(event){ var event=(event)?event:arguments[0]; mouseXY(event); var obj=document.getElementById('active_alert'); obj.style.left=posX-adjust+'px' obj.style.top=posY-5+'px' }; } h3.onmouseup=function(){ document.onmousemove=""; this.parentNode.setAttribute('id',''); } } } }
Function Call
msgBox("You have done something real bad! So Bad, oh so bad!","Ya shoudn't of done it boy!")
i wrote a very simple HTML page to test some DOM features between Mozilla and IE. Mozilla is perfect everything went fine and i got the childNodes from my custom tag ( this tag i named <blah> ), inside this tag there is two <span>, that i retrieved. But with IE i really could figure out how its done! Code:
