WYSIWYG - Self Insertion - Create An Iframe With DesignMode On To Enable Editing Of The Frame
Aug 5, 2009
I am trying to create a WYSIWYG editor for my site, but seeing as how every browser gives different results when using the execcommand method, I am trying to do my own insertions instead.
What I would like to do is create an iframe with designMode On to enable editing of the frame, but when someone does a command to bold text, I want to make a method which enters <b>Some Highlighted Text</b> into the frame where the user highlighted so it would appear bold and the source would have the <b> tags.
My issue is I have been unsuccessful in learning how to take the selected text within an iframe and surround it with tags. I was able to accomplish this in Internet Explorer using this code:
Except the resulting text would actually have the <i> tags appear, and the source would be:
Pretty retarded if you ask me since in no way did I want it to convert the tags into entities.
Anyway, if anyone could please direct me to a method in which I can successfully take selected text within the iframe and surround it with HTML tags in such a way that the formatting will actually show.
For my projet I need to creat an editor WYSIWYG (as CKeditor or WYMeditor [jQuery]) and after must research i see editor need iFrame for functioning.I don't understand when i can access to ifram..This is the creat code :
var myIframe = $('<iframe id="frame_'+myId+'" name="frameName_'+myId+'" frameborder="no" width="500" height="100">'); var myEditorBody = $('<div class="K_editor_body"></div>');
I am trying to use a very simpe wysiwyg-editor. It works fine, except i don't know how to proces the data from the iframe. I simply cant make use of the text written.
I am referencing an iframe from another server in my website. The iframe is in a table format, and I want to get rid of the top two rows of the table for my website. Is there any way I could display the iframe without the first two rows?
I've been able to successfully add event handlers to an iframe where designMode = "on". The scope of these events are at the document of the iframe (contentWindow.document). What I would like to do is actually bind events to elements w/in the document while designMode is on. I have tried various methods like using find(), bind() and or live() but seem to have hit a road block. I have tried the following w/nosuccess. In the examples below .doc() returns the iframe's document.
I need to know level of difficulty/hours needed to do this:
A user uploads a photo into an editing tool. It takes a couple of seconds to upload the full res version. Then, when the photos are being edited in the tool (cropping, color, etc.) it converts to low res for faster editing, so the high res image doesn't have to load every time there's a change. Once the user is done, and/or adds their final product, the manipulated image is saved to hi res again, for print.
What is the time estimate/level of complexity if this? The code is there for the tool (some advanced JavaScript), just need to change the speed of editing. Server disk write speed is plenty fast.
I am using a very simple search-type page to enable users to input a model number and its page appears in a inline frame. Its not a true search as it is simply relying on a person entering the correct html page name to find it. But this works perfectly in my application.The problem I have is that I cannot get the type box to accept enter key as a submitt, only a click of the mouse will submitt the request. If enter is pressed the box loses the users input but no action is taken.I think this may be a javascript issue. I have posted the code below.
Inside my iframe when someone clicks on a thumbnail, I want to change the value of imageon in the parent window.
Here is what I am doing
//I will hardcode the #4 here for this example i_imageon =4;
/* here I have to tell my parent page that they clicked on a thumbnail so my parent page knows where to pick up when they start hitting the next or prev arrows */ parent.document.imageon = i_imageon;
This is not working. Any ideas? Onclick, I can alert i_imageon and it shows what I need. The problem is, it is not setting the var imageon to this value in my parent frame.
I have a page that consists of 3 frames.In the left frame there are 2 stacked iframes. I would like to change which iframe is on top from the center frame.I've spent the entire morning trying to find an answer on the internet.
I would like to utilize this script where I could pass the string of words to another page.
Meaning, search for the text, actually a word, then take the two words following the searched text and have them passed to the next page...I have tried to "alert" the words, but have no success.
I have tried to modify the code using the following, but the result just posts a "-1" in my alert popup.
As you can see I modified the code from the original thread in the third block of "for" code. also, I added an "alert" tag. One more thing, I added a function call for the form button.
The code is below:
<script type="text/javascript"> var count = 0; var itemList = new Array(); var oldText = "";
I have an iframe that is used to access the server so the entire page doesn't reload. The frame works great the first time but after the frame has preformed the query and reloaded, if the script tries to access the frame, I get a "permission denied" error.
I have a web page. In that there is a toggle button to show or hide advanced search options. Below that there is a "IFrame A"(Table). IFrame A conatins "IFrame B" (Table Contents). Based on the toggle switch status, i want to update "IFrame A" size without refreshing the "IFrame B".Is it possible to do so ? Can you give me some example or point to some tutorial .
I've built in an iFrame that pulls in various other pages of variable height. Can you make this iFrame render its size based on it's src content ? I've been trying to use the scrollHeight of the frame but it isn't working. My current code:
Code: <script type="text/javascript"> function resizeIframe (frame) {[code]....
Basically my code always renders the scrollHeight at 150 but the test.html I'm pulling into the frame I've made a height of 500px ?
I'm trying to create a group of radio buttons that enable user to select whether to maintain the current image, remove the image or upload a new image. If user selects maintain the current image or remove the image, the upload field will be disabled, when user select upload a new image, the upload field will be enable. My script is as below but I do not get it work correctly, do you have any advice for me?
HTML Code: <script type="text/javascript"> function Disab() { frm=document.forms[0] if(frm.change_voucher.checked) {frm.img_voucher.disabled=false} [Code]....
I'm trying to dynamically set the height of my Iframe. my https: main page is calling another https in an Iframe. But i get an access denied error from my javascript trying to call the parent document.
Main https page <IFRAME APPLICATION="yes" style="width:100%;" id="iframename" frameborder="no" scrolling="no" SRC="https://www.otherdomain.com">
otherdomain.com html ------------------------------------------------ <script> function bodyheight() { x = document.body.scrollHeight parent.document.all.iframename.style.height = x } </script>
I am using this code to refresh the browser after a iframe has finished loading. Does anyone know a cross-browser one that will work on all browsers. I have tested it on firefox and internet explorer, it seems to only work on firefox.
How do i make it so that when there is an event insidean iframe on the page, it affects and can call a function from the outerpage? (that houses the iframe
To sum up this issue, I have a parent page, which holds some values in hidden input fields passed to them from the url. On this page, I have an iframe with a form in it, to which I want to pass values from these hidden fields to be displayed for the user in the iframe form. In IE, it works. To accomplish this, im just simply doing a <body onload="GetInput()">. The GetInput function does the following, but for about 10 fields:
Fnamefield=document.getElementById('firstname').value = parent.document.getElementById('firstname').value; Thats it. Once the page loads, i see my values. In firefox it does not work. I know the hidden fields are getting their values, but thats as far as it makes it. I have tried calling the GetInput function after the form is written out and not in the body tag, which still works for IE, but not FF.
I'm trying to build a web page where the user can insert text dinamically. When the user hits a button, a new text box is created and the user can insert text into it.
It's working nice with Firefox 1.0, but it's not working with IE 6.0.2800.1106 (W2K SP4) Code:
is it possible to set document.designMode = "on" for an iframe element that is loaded into a page with AJAX? I've been searching for a solution for hours, it can't be set with <body onload=> since the page is already loaded, and window.onload does not work. Any ideas?? The reason i need to do this is because I have a web app that includes a multipage form and the pages of the form are controlled with XmlHttpRequest, i need the iframe element that is loaded to act as a rich text editor.
If the user presses enter and their cursor is in the middle of a <p>, i want to insert a <br> tag. If their cursor is at the end of the <p> tag's innerHTML, then i want to insert a new <p> tag.
I can insert both tags as I need, but I can't find a way to get the position of the cursor relative to its containing tag (just assuming there's no other markup in the <p>'s innerHTML, so that selection.parentElement() will return the <p> tag).
