How to manipulate text in editable iFrame documents? - javascript

I am wanting to create fancy "text-areas" like typeit.org has. I'm pretty sure they use iFrames with the iFrame doument's contentEditable value set to true, but how might the symbol buttons work? When using this technique, how do you replace the current selection inside the iFrame with a symbol or if nothing is selected, insert the symbol to the left of the cursor?
http://currencies.typeit.org/

When using an iFrame as a Rich Text Editor, you can tell the iFrame to enable design mode and execute commands.
To enable design mode (allowing the user to edit the iframe), you can use this snippet:
document.getElementById("myiframe").document.designMode="on";
Then to execute a command when the user clicks a button, you simply use this code snippet:
var textEditor = document.getElementById("myiframe");
textEditor.document.execCommand(x,"",y);
textEditor.focus();
Where x is the command and y is the value. For more information on available commands, look at MSDN. I believe OverWrite provides the functionality that you see in TypeIt; but I could be wrong, I'll look into it and update my answer.
EDIT: As #TimDown suggested: IE does not support insertHTML, so in order to do the equivalent in IE, use textEditor.document.selection.createRange().pasteHTML("some HTML").

Related

Tinymce view mode switches after init

My editor is tinymce4+.
It works greatly in most parts.
But no matter what I do, there's something I just can't do.
- switching editor mode instantly. -
I have a page that users can select a data and edit it and view the content. Users click on a button named " viewmode ", the other flipside is " editmode "
I achieved this by putting two DIVs in a same container, making one of them invisible by the start-look-settings users have choosen. One DIV has tinymce editor, the iframe tag, and another one has just a bunch of html values that the editor is holding. But the side effect of this is that the content style could look different, depending on its style attributes.
This web application I'm talking about now is an existing system that has its own CSSs.
It's so complicated that once you get to look at it, you might want to run away from it.
So I would like to avoid this CSS discrepancy by making editor dynamically switchable to both ways.
Loading multiple tinymce objects is the last thing I need here.
I can make editor disable by setting up an attribute - contenteditable = false -
But then the toolbar elements become bad boys here. because they still work. I hide the toolbar itself to complete this mission.
But you know, my client hated it and insisted me that the editor should provide a print button in its viewmode. This is frustrating.
So, if you could just give me an idea of how to manipulate the elements of toolbar, then I think I can manage to solve this issue.
If it's too difficult, attaching the print event listener to an external element could be also the second best option for me. Because from that moment on, I just throw the toolbar away and make a print icon on the top of the editor and attach the event to it.
Sorry for typing all the plain texts. But issue like this requires no codes I think.
Hope some tinymce guru stop by and help me out.
Finally, I made my editor switchable.
First step is to hide all the elements in the toolbar of tinyMCE.
tinyMCE toolbars have a specific class name so they are selectable with jQuery class selector. But selecting with class name alone causes getting unwanted toolbars as well, so you have to be careful with this.
FYI .eq() API might help you.
after hiding all the elements in the toolbar, ( don't hide toolbar by the way. ) do this.
tinymce.ui.Factory.create({
type: 'button',
cmd: 'mcePrint',
icon: 'print',
shortcut: 'Ctrl+P',
class : 'temp'
}).renderTo(appendTarget);
This is going to add a button element into the toolbar.
But somehow it doesn't invoke the command I defined in cmd's value.
So attaching this event to the button manually will be required.
tinymce.activeEditor.execCommand('mcePrint');
So far I created a custom-toolbar for view-mode editor. Now it's time to freeze the edior's actual content field.
It's very easy after getting iframe contents as jQuery object.
.contents() API should help you.
after that, you can select <BODY> element on your side, so the last thing left to do is to give 'contenteditable=false' attribute and value to the body tag.
Then your editor freezes.
Going back to the edit mode is easy too. Just do the backwards.
Invoke these events when you click on your own "switch" button. Then you can toggle your editor from view-mode to edit-mode ( and the oppsite way as well ).

link to website automatically inserting text into textarea

On my website I want to link to a web-app, automatically inserting some text into a textarea.
Is it possible to link to the website doing something like this?
www.website.com/#document.getElementById('textarea').value ='inserted text';
This bookmarklet is working code, I just want to use a link to the website and somehow get it to run the bookmarklet automatically.
javascript:{document.getElementById('textarea').value = 'inserted text'; void(0)}
Any suggestions/ideas?
On my website I want to link to a web-app, automatically inserting some text into a textarea.
You cannot, unless that web-app provides a means for you to do so (for instance, passing information on a query string or otherwise as part of the URL). You can't create a link that runs JavaScript on the page after loading it, not without the page's cooperation.
On the off-chance that the target web-app is also under your control: You could, of course, add a feature to the web-app to do it. If so, be sure you just accept a value and don't allow executing arbitrary JavaScript code passed to you on the URL, that would be a Very Bad Idea unless the target page never shows anything user-specific (and probably even if it doesn't).

How to edit web pages in browser in real time like visualwebsiteoptimizer.com?

Is there a way to enable in-browser editing of a web page, as done in following video (demo of visualwebsiteoptimizer.com)?
(see video at 0:15)
http://www.youtube.com/watch?v=oy89HnIJsE4&feature=plcp
Basically, what I wish is to be able to:
take a copy of a web page, (that part is ok),
somehow enable edit mode (as would be done in any text editor),
click on the element I wish to edit, and be able to modify the selected element
Edit: sorry I wasn't clear enough: my end goal is to enable my users to do live editing online (as done by visualwebsiteoptimizer.com) in a visual way.
You could use designMode=on on the document, or contentEditable=true on specific elements. See for a small demo http://html5demos.com/contenteditable/. In addition, you could also catch mouseclicks and keydowns with jQuery and check the target element as to show options like CSS etc..!
1 - use google chrome.
2 - hit ctrl + shift + i
3 - go to elements tab
4 - right click on the html you want to edit and select "edit as html" or double click in the text you want to change in that tab
You can try using Jelliphy. Jelliphy is a tool that allows any users to edit any text of a web page, to move and resize elements in the page, to draw on the page, to edit the images and much more.
Jelliphy Lite and Jelliphy Extended are bookmarklets that you can use with any browser for free: just go to the page to change and click the Jelliphy link from your favorites.
Here is what you need, enjoy: http://myedit.io

Cut Copy Paste jQuery/Javascript

I want to know if it is possible to select the text anywhere on a webpage and then copy it using jQuery or Javascript.In another language how to invoke CTRL+X,CTRL+C and CTRL+V on a selected text using jQuery or Javascript?.Can this be done?However the CUT command will be invoked on the text which is present in a textarea or textbox not on the hypertext of the webpage. Please let me know.
You could probably invoke the buttons, and copying text on a webpage is most certainly possible with access to the DOM, however it seems like what you are trying to do is access the clipboard, and the way to do that consistently is usually with flash.
The ZeroClipboard plugin is the one most commonly used, it's easy to integrate and gives you full access ro the clipboard.
For an example have a look at CSS3Please, I believe they are using the ZeroClipboard plugin.
Can this be done?
...
I don't want to use Flash
No, not if you need it to work in all major browsers.

Is there a textarea/rich text editor that allows the user to follow links that render in them while entering?

I am looking for something like like FCKEditor that allows users to follow links by left clicking them.
For example, the markdown editor in StackOverflow does not allow you to click the links you add as you are entering data into the editor. I would like to render a text area pre-populated with some links to lab results that the user can choose to review while making their comments.
both tinyMCE and fck editor will highlight the links with blue color and if you ctrl+click on them, will open in a new tab/window (depends of you browser configuration)
Most HTML richtext don't do anything to the link (with the exception that you can place the cursor in them with a single left click, in order to edit their text) that would prevent you from, for instance, right-clicking to open the link, copy it, or whatever your browser allows.
TinyMCE allows you to preview within the same page and then click on any links with the click of a button/icon. I'm thinking there must be a way of triggering this outside of the TinyMCE and possibly having it populate another field/area. (You probably could also grab the value of the textarea and put that somewhere else on the page.)
Not sure if this is what you are looking for.
Or you could try a preview mode, just like StackOverflow. See How can I enable live preview for FCKeditor in an ASP.Net site?

Categories

Resources