I am looking for something very simlar to the SO WMD markdown editor that is extremely lightweight but I would like the text area to display the "preview" as you type. I have looked into many Rich editors but they are all seem to do everything under the sun. All I really want is Bold, Italic, Link, Image, and Lists (ordered/unordered).
The most lightweight way to go would be to roll your own. The simplest way to do it would be to use Javascript to react to changes to a <textarea>, and then update a <div> underneath it with the Markdown translated. A good Markdown implementation in Javascript is Showdown.
I have just created this Rich Text Editor plugin that is focused to be used on public text editor such as comment form and/or Q/A form in a forum. It accept inline HTML only by default, but some hacks can be created to expand the limitation.
https://github.com/taufik-nurrohman/rich-text-editor
Basic Usage
The CSS:
<link href="rich-text-editor.min.css" rel="stylesheet">
</head>
The HTML:
<textarea></textarea>
The JavaScript:
<script src="rich-text-editor.min.js"></script>
<script>
var editor new RTE(document.querySelector('textarea'));
</script>
</body>
I'm a big fan of FCKeditor.
This HTML text editor brings to the
web much of the power of desktop
editors like MS Word. It's lightweight
and doesn't require any kind of
installation on the client computer.
http://www.fckeditor.net/
Related
Full context, because I'm not exactly sure what I'm looking for:
I am working on web software, and I have various mail templates that get sent. The templates are just HTML files. I'm planning to implement a text editor so that my clients can edit these mail templates. However, there are certain 'chunks' for the files that I don't want them to be able to edit, so I was thinking of putting 'flags' of some kind into the html so that I can detect them programmatically and make the blocks un-editable in the UI.
I was envisioning something like this:
<p>
lots of text here
</p>
<blank-tag-here-that-wont-display-or-do-anything>
<p>
important un-editable text here
</p>
<blank-tag-here-that-wont-display-or-do-anything>
<p>
other text here
</p>
Is there such a tag? Or something else I'm not considering? Thanks for the help.
Have you tried using your context then parse the html tags to find the tag and make the whole block visible='false' to the html editor, this way it will not show in the editor but if the html editor has the html view capability then the user will be able to modify the tag via the html viewer.
I am building a web app that allows users to write their own html pages using the Froala editor integrated on my website.
The editor works really well and provides a great degree of control as well but, there is a small problem I am facing with the bold button. If you highlight some text inside the editor and click on the bold button, in the editor the text does become bold but in the corresponding html which is generated has a simple <strong> tag around it. Now when you load that html on a browser when it is delivered via a link or any other service, it does not show up as bold unless we write some css for it.
What I would like to know is:
Is this the correct behaviour?
Is there any fix or option that we need to control on Froala to make
it look bold?
Apart from writing custom css for it, if there are any options please let me know.
You can check out the said behaviour on one of the demo pages they have: Froala Demo
Thanks in Advance!
PS: Let me know if you guys need code samples from my end, I have not done anything(custom) apart from the samples available on their website.
I am trying to use a text editor (without using an IDE e.g. eclise/IntelliJ) where I can analyse an HTML file e.g. which tags are unevenly used and also format HTML documents in a way that it picks up each tag and organises so that the document is more human-friendly.
I currently have notepad++ and Sumblime Text 2 on my machine. If there is any specific plugin that helps to do the job, could someone please advise?
** REASONING **
I have a messaging service that uses email templates and one of these has a bug somewhere. It's generating a misaligned (i.e. odd) tag which can be visible if I was to put it in some audit trail (gets picked up in a tabular view). I would like to use a text editor to check the buggy tag.
KR,
In notepad++ you can do that if your open and closing tags are below eachother for example
<div>
something here
</div>
but if you have it inline like this
<div>something here</div>
you cannot do much with it.
Is this what you are asking?
Also if you want the vertical tab lines to be visible click on the "show indent guide" in the top toolbar
There are several online tools that can format the HTML for you. Do a quick Google search for "online html formatter" and try a couple out. Some will provide more options than others. Once formatted properly, it'll be human readable and probably be pretty easy to spot the stray tag.
I want arich text editor for embedding in webpage
but it should have tools and textbox seperable, i mean they should not be integrated
Try TinyMCE.
try
ckeditor
or
tinymce
both are good ... but I usually use tinymce because it does not require License :)
alt text http://img693.imageshack.us/img693/1446/20091224044146.png
How cam i find and copy for this ?
Use Firebug in Firefox to see how Yahoo have styled their search box
You could save the page a to the local folder, and that will being across HTML and all suppoprting files (JavaScript, js, etc)
My suspicion is that it'll be some YUI style plugin, but don't quote me on that.