HTML code inside controls: ComboBox, TextArea - javascript

I'm looking for a way to display full HTML in the components (like ComboBox - Select, TextArea) on a web page. Is it somehow possible to do with the native HTML controls, ex. extending them? Are there any extensions that would be useful for me?
Thanks,
Rafal

Take a look at how CKEditor renders it's view on the client - it's effectively an Rich Text Editor for browsers (there's lots of other alternatives, too):
http://ckeditor.com/demo
http://www.kevinroth.com/rte/demo.htm
http://developer.yahoo.com/yui/examples/editor/index.html
Looking at the construction of these with the IE Developer Toolbar, Firebug etc is a real learning experience.
An approach many people take is to embed their text area in a div, and also have a another div that's hidden. Underneath, are tabs, for example, Editor, Preview. Clicking on preview takes the HTML in the text box and does something like previewDiv.innerHTML = textbox.value;
I'm not sure if this is the kind of thing you want, but an example of this is here:
http://www.freetextbox.com/demos/
Hope this helps.

Related

How to copy to clipboard a selected text with styling ang images by using javascript?

When a user selects a part of the page with styled texts and images, it is possible to copy all that content (with images and styles) and paste it to MS Word or to an e-mail client by clicking "Copy" in the context menu.
How is it possible to achieve the same result with javascript?
So far, I have found solutions to copy plain text only or by using the depreciated document.execCommand("copy") command.
Is there a solution that works for all modern browsers, including Firefox?
If such a function cannot be implemented for security reasons or whatever, could someone please explain why exactly? Because users copy content all the time, why it cannot be done with Javascript?
Edit: I'm trying to show a custom popup with a Copy button when user selects some content on the page. That button should be able to copy all the styling of the selected content, not just plain text. Just like the Copy button in the browser context menu or Ctrl+C
As far as I understand, you wanna magically transform HTML, CSS and JavaScript to a text format. This is technically not possible.
Yes, it is possible. I suggest looking at Navigator.clipboard API: https://developer.mozilla.org/en-US/docs/Web/API/Navigator/clipboard
You can get the selected HTML Elements, do all kinds of transformation on data and then paste the data in to the clipboard. Multiple formats also supported, such as images, HTML and simple text. Note that if you are going to copy HTML and/or images pasting will not work in simple text editors, only in editors like Word that supports advanced pasting formats.

Can The Preview Pane in the MarkdownDeep Markdown Editor be Disabled?

I'm working on an ASP.NET MVC project which uses the MarkdownDeep Editor to add a rich editor on top of a basic markdown input textbox (very similar to the Stackoverflow editor window).
Generally it works great. However, in certain scenarios, I would like to disable the preview window. This is automatically generated below the textarea by MDD. Can this be disabled?
Just to be clear, I know I can use CSS to hide the preview. But on some devices it's slow and makes typing painful. I want to entirely turn off that feature. I don't see anything in the docs other than how to customize the preview.
Any ideas?
In the docs it specifically mentions that it is recommended that you have the div preview already in your document because it will be created if it isn't found and consequently, could could a visible page refresh if any re-layout has to occur.
Note: the associated divs are all optional and if missing, the plugin will create them. However... you might experience the page jumping around during load if you do this. ie: it's recommended to explicitly include them.
Thus from the sounds of this, and that there doesn't appear to be any option to turn it off in the API page I would say no, it's not possible.
I am a little confused here: if you don't want the preview, use a regular text area instead of mdd_editor... So, under the scenarios where you don't need the previews, instantiate a plain vanilla editor. What am I missing here?
I know this is old, but I was looking for something else on mdd. I recently had this same requirement.
Just comment out the code
// Update the DOM
if (this.m_divHtml)
this.m_divHtml.innerHTML=output;
in MarkdownDeepEditor.js

How to implement a Rich Text Editor in HTML?

Here is the demo:
http://www.kevinroth.com/rte/demo.htm
when I use firebugs to inspect the source code, I see that it is iFrame only, but how can the iFrame have a text area behavior?? Any ideas on how to implement this? Thank in
As I'm doing this for my job right now, I've done a small amount of of research. From what I have figured out, there are two ways to accomplish this:
document.designMode
Using document.designMode in JavaScript which sets the whole HTML document to be editable. As the whole HTML document is editable, presumably an iframe is needed to encapsulate the editing, so that the user can't edit any part of the page you don't want editing.
From what I can tell, the demo you linked and TinyMCE uses this method.
contenteditable
The contenteditable HTML attribute is similar but doesn't require an iframe to be used. You add the attribute to a tag and all of the HTML within it becomes editable with a blinking cursor.
Here is a demo of it: http://html5demos.com/contenteditable
Notes
Personally I'll be looking at contenteditable for my task. Here is good overview and details on the topic: http://blog.whatwg.org/the-road-to-html-5-contenteditable
As I say I have done limited research on this, so please help me correct any errors :)
In that frame you can see a full HTML source that builds up something that looks like a text area + toolbar + stuff. A complicated Javascript is doing all the trick behind. E.g. if you select some text and make it bold with the toolbar than the script places <strong> tags around your text and so on..
Use http://www.tinymce.com/ It is the best rich editor out there. Works great with any browser and it has many many options. It's very easy to use. Just look at the examples and docs. It's included with many popular blogs and CMS.

JQuery tool to show selected DOM elements in real time

I was recently on CodeSchool's website and took the JQueryAir course that features a web-based text editor that shows - in real time - what elements of the DOM are being selected as you write your JQuery code. It does this by highlighting the selected elements of the html page in light gray.
Does anyone know of text editor (or plugin) that can recreate that functionality? I'm mainly looking to use it for practice purposes. Or if you know of a website that would allow me to do they same thing, that would be great too.
Here is a screenshot to give you an idea of what I mean:
As the JQuery in the bottom panel changes, the html above is highlighted.
Any advice appreciated - thanks!
A simple way to do this (although perhaps not quite as dynamic as you would like) is to use FireBug's console (or similar in Chrome, IE9 etc.). After loading a page containing a jQuery reference in FireFox, go to FireBug's Console tab and paste this.
$("p").css("background-color", "gray");
Hit Enter. You can change the selector to see the results, though they will be additive until you refresh the page. Use the up arrow to bring back your most recent selector to edit.
EDIT: OK, this was before you added the screenshot showing the desired HTML source highlighting. Still, perhaps this method will come in handy at some point.

Is there a simple set of tools to create Javascript buttons for text boxes?

When one enters a question on StackOverflow, just above the text entry box is a set of Javascript buttons to do things like make text bold or italic, and to insert pictures and links.
I want to create a similar set of buttons for my own custom Content Management System (CMS). I was hoping that this would not be the kind of task that I would have to re-invent the wheel for.
However, the only set of buttons I have come across is TinyMCE, which, to say the least is incredibly feature-bloated.
I only need the ability to select text, and then have it be modified to be bold, italic, or a link, using the syntax of my CMS.
After some examination, it seems to me that paring down TinyMCE down to that level would be more difficult than writing from scratch.
Is are an existing toolbox that I can use to help me create these kinds of buttons (or perhaps a tutorial) that is ideally open source and not overly feature rich?
Note that I am not that great at Javascript programming, so while most programmers would probably assume this was easily done from scratch, I need a starting point to see how it is done.
Thank you for any advice.
These are some of the tools like TinyMce , all are open source.
Alternative to Tinymce

Categories