I need a Javascipt text editor which can be used to write posts by portal users. It should provide at least some text formatting and image stored on other sites insertion. Moreover, really important things is a solution to filter text on server side to get rid of security issues. I'm using the ASP.NET platform.
There is lots of options if you are not needing to use the control in an update panel:
FreeTextBox (Seems to be the most ASP.NET friendly, haven't used)
TinyMCE
AJAX Toolkit HTML Editor
CKEditor
The situation where you run into problems when using these with ASP.NET is when they are wrapped within update panels. There are many annoyances setting the hooks in place to trigger the controls to update upon the async postback and refresh themselves when the request ends. I have spent many hours attempting to get these to work with update panels with much frustration.
Related Question...
If you like the editor on SO, you could use it: WMD and MarkdownSharp.
Try TinyMCE http://tinymce.moxiecode.com/
There's a crossover here with this question (assuming you want to use jQuery of course):
https://stackoverflow.com/questions/1141073/whats-the-best-wysiwyg-editor-for-use-with-jquery
Related
Hi I had come across a question how to achieve suggestions in the input field while typing for example (in browser url bar while we typing first 3 to 4 letters it give suggestion if the url is correct we go with it else with single delete key press remove the suggested content). This need to be done with input field. Is this scenario is possible? Thanks.
There's a big range of possibilities here.
If the contents of the list are static or easily generated via code, you can use a native HTML <datalist> element.
If you are wanting autocomplete in the form using the user's previously-provided data, you can just enable via the <input autocomplete> attribute
If you're wanting far more customization, it's going to have to be some JavaScript that does the dirty work for you. Stack Overflow is not a good forum for getting library suggestions, but you should survey what's available in your current development stack.
This is absolutely achievable, have a look at - typehead.js
It's a javascript project for doing exactly what you're asking, I believe it's compatible with boostrap too.
Autocomplete suggestions are a very common Web Component. If you are using jQuery, you might want to try this component published by Materialize. If you are using, say, Polymer, you might want to try paper-autocomplete. If you are using vanilla javascript, you could try typeahead, or something like this autocomplete library. Most other modern web frameworks will have some alternative. I wouldn't really recommend making one from scratch.
i am designing a website where user can enter text in a formatted way, i have worked in asp.net where i have used AJAX toolkit and used HTML text editor control. i require similar kind of feature but i don't know how to achieve this feature in jsp.
As you will be answering this question you will be doing some formatting below, i just want to implement the similar kind of feature.
I couldn't show my work as this problem is what i have to solve first. Please let me know how can i do this. !
but i am talking of the answer box of stack overflow or similar
thanx...
If you want a free version then use TinyMCE. It is fast and uses jquery and setting it up is really easy and you can buy it to activate other features too.
But if you want to pay for it then you can use Cute Editor, from my experience you need to buy licence per domain.
javascript editor
jHtmlArea http://jhtmlarea.codeplex.com/
ckeditor http://ckeditor.com/
tinymce http://www.tinymce.com/
http://medleyweb.com/resources/10-best-free-javascript-or-jquery-wysiwyg-html-editors/
I've run into an issue where I'm developing pages on a CMS which is out of my control, and I'm editing increasingly complex pages with nothing more than a textarea.
Initially I'm creating the pages in my code editor, then copying the HTML into the textarea. Keeping the local and CMS code in sync by hand.
This workflow sucks.
I'd like to have code highlighting, etc while I work within the CMS. Is there any way I can add a code editor like Ace or CodeMirror to the textarea via bookmarklet or console command? I've tried using the Ace Bookmarket Builder but I don't know if it's been designed to work on any page, or just github.
Edit:
I don't think I was clear enough above. I'm just an end user on this CMS, I have no ability to change how it functions on the backend. I literally just need a bookmarklet that finds the textarea and applies a code editor to it.
both tinymce and syntaxhighlighter are packages that are not tied to a CMS, so if yours is custom then you will want to try to use these together, I have heard of some success in this adventure in the Drupal (there is actually a project for it currently) arena but you may be looking at a bit of work to do so custom. there is chatter about this http://www.tinymce.com/forum/viewtopic.php?id=22901 <-here with even a plugin to tinymce :) hope this gets the ideas going!
Okay i know that it's important for your website to work fine with javascript disabled.
In my opinion one way to start thinking about how to design such websites is to detect javascript at the homepage and if it's not enabled redirect to another version of website that does not javascript code and works with pure html (like gmail)
Another method that i have in mind is that for example think of a X (close button) on a dialog box on a webpage. What if pressing the X without any javascript interference lead to sending a request to the server and in the server side we hide that dialog next time we are rendering the page, And also we bind a javascript function to onclick of the link and in case of the javascript enabled it will hide the dialog instantly.
What do you think of this? How would you design a website to support both?
One way to deal with this is to :
First, create the site, without any javascript
Then, when every works, add javascript enhancements where suitable
This way, if JS is disabled, the "first" version of the site still works.
You can do exactly the same with CSS, naturally -- there is even one "CSS Naked Day" each day, showing what websites look like without CSS ^^
One example ?
You have a standard HTML form, that POSTs data to your server when submitted, and the re-creation of the page by the server displays a message like "thanks for subscriving"
You then add some JS + Ajax stuff : instead of reloading the whole page while submitting the form, you do an Ajax request, that only send the data ; and, in return, it displays "thanks for subscribing" without reloading the page
In this case, if javascript is disabled, the first "standard" way of doing things still works.
This is (part of) what is called Progressive enhancement
The usual method is what's called progressive enhancement.
Basically you take a simple HTML website, with regular forms.
The next enhancement is CSS - you make it look good.
Then you can enhance it further with Javascript - you can add or remove elements, add effects and so on.
The basic HTML is always there for old browsers (or those with script blockers, for example).
For example a form to post a comment might look like this:
<form action="post-comment.php" method="post" id="myForm">
<input type="text" name="comment">
</form>
Then you can enhance it with javascript to make it AJAXy
$('#myForm').submit(...);
Ideally the AJAX callback should use the same code as post-comment.php - either by calling the same file or via include, then you don't have to duplicate code.
In terms, it is not important to make your site work with JavaScript disabled. People who disable JavaScript are people who want to hack bugs into your site, they don't deserve to navigate it correctly. Don't waste your efforts with them. Everybody know the Web is unsurfable without JavaScript.
The only thing you have to be careful is about your forms: Don't ever trust filters in JavaScript, Always filter it again on server-side, ALWAYS!
Use Progressive Enhancement, study jquery to understand it. It takes some time till you get your head around it. For example your idea:
to detect javascript at the homepage
and if it's not enabled redirect to
another version of website that does
not javascript code and works with
pure html
how would you detect if javascript is disabled? not with javascript, obivously...
you're thinking the wrong way round: the most basic version has to be the default version, and then, if you detect more advanced capabilities, you can use them.
Try to avoid separate versions for different bowsers/capabilities for as long as you can. It's so much work to keep all versions in sync and up-do-date.
Some good ressources to get you started:
Understanding Progressive Enhancement
Progressive Enhancement with JavaScript
Test-Driven Progressive Enhancement
The best way is to design a page that works adequately without JS. Then add a <script> block at the bottom of the <body> section with code like this:
window.onload = function() {
// Do DOM manipulations to add JS functionality here. For instance...
document.getElementById('someInputField').onchange = function() {
// Do stuff here that you can't do in HTML, like on-the-fly validation
}
}
Study the jQuery examples. They show lots of things like this. This is called "unobtrusive JavaScript". Google for that to find more examples.
EDIT: The jQuery version of the above is:
$(document).ready(function() {
// Do DOM manipulations to add JS functionality here. For instance...
$('#someInputField').change(function() {
// Do stuff here that you can't do in HTML, like on-the-fly validation
});
});
I added this just to show the lower verbosity of jQuery vs. standard DOM manipulation. There is a minor difference between window.onload and document.ready, discussed in the jQuery docs and tutorials.
What you're aiming for is progressive enhancement. I'd go about this by first designing the site without the JavaScript and, once it works, start adding your JavaScript events via a library such as jQuery so that the behaviour of the site is completely separate from the presentation. This way you can provide a higher level of functionality and polish for those who have JavaScript enabled in their browsers and those who don't.
I really don't know how to describe it, but if you understood it and had experience on that field, may be you can help me with something 'Open Source' and 'Ready-made'.
I want to create something like a box 'or widget', where you can change its content by hitting some buttons on the top of the box. (Hey the box is on a web page and this should use Ajax and Javascript).
I have tried some ready scritps, but I found them limited and they drive me crazy, JS frameworks also don't seems to offer such solution.
Any body have any idea on that field?
Just because the box is on a Web page doesn't mean it should use AJAX, Omar. Have you thought about using a third-party solution like ClearSpring or WidgetBox? If you need to put your widget onto Myspace, you'll want one of these.
That said, I've taken a couple of JavaScript-only runs at this problem; see Twitterati and Put Your Digg In A Box for examples, and my Global Widget Summit presentation for explanations.
Have you tried Jquery?
Visit www.jquery.com
Some example can be found at
http://www.openjs.com/scripts/events/keyboard_shortcuts/
Also please check the In-place editing example at
http://www.appelsiini.net/projects/jeditable
http://docs.jquery.com/Tutorials:Edit_in_Place_with_Ajax