JavaScript HTML Editor for Wiki-like Site? - ckeditor

I have a wiki-like site where users can post and edit. I need a good HTML editor. I've tried CKEditor and it was problematic because people often cut and paste. They take with them styles and javascript that conflict with the surrounding HTML and with what I only want to allow (no changing colors, etc). Maybe there's a way to configure CKEditor to do what I need, but it wasn't obvious how from their documentation. This was over a year ago though..
My requirements are the following:
Only allow a small subset of HTML (simple paragraphs with inline formatting for italics, etc., images that are hosted by us and links internal to our site)
As clean xhtml as possible
Prefer (x)html, but I'm open to alternate markup
Using jQuery, so if the editor relies on jQuery that's preferable
Internationalizable
WYSIWYG is nice, but maybe it helps to avoid copy/paste issues by not having WYSIWYG?
The most important thing is to not allow users to inadvertently or purposely screw things up, usually through copying and pasting other webpages or word documents. markItUp! looks really nice, the lack of WYSIWYG has me on the fence. I love WYMeditor's focus on clean xhtml, but it still does allow craziness when copying and pasting from the demos and there doesn't seem to be much activity for the past 6 months or so.
StackOverflow's editor might be good for us too. Like markItUp!, it's not WYSIWYG, but it is very simple. I understand they took WMD-editor and updated it. The non-html aspect means an easier time on the server side parsing out potentially harmful code...
What do you guys think? What's the best solution out there for a wiki-like site editor?

You should try again CKEditor after enabling forcePasteAsPlainText

Related

Full Image slider

Hi i'm looking for an image slider to sit full background, ideally with a nice fade effect for this site. http://www.markcoffeyphotography.co.uk
I have one in my site at the moment but i'm not so happy with it and i'm looking at recoding the site more efficiently (hey its my first CSS, html site so give me a break).
I'm pretty new to coding so any help breaking what i need to do down to get the result would be really appreciated.
Thanks.
It may serve you well to venture into Wordpress. There are many themes, plugins and lots of community help out there. Additionally, check out Twitter's Bootstrap framework to get you started on clean HTML/CSS/JS.
CodeDrops has a lot of jQuery (and other front-end) tools.
This one looks nice too.
This one has the fade effect you're looking for.

No spaces in Joomla 2.5 Output

I'm in a pickle. I've designed a Joomla 2.5 site, which I have locally installed. I typically equip my installations with JCE editor for my clients, but at design time, operate in HTML mode. When all the content was in, I decided to test WYSIWYG mode to make sure nothing went awry. Unfortunately, something did. Observe the lack of spaces:
Very interesting that the problem occurs ONLY when saving from WYSIWYG view.
At first I thought JCE was malfunctioning (although the editor itself continued to show spaces), so I tried reinstalling. Then I tried other editors -- CKEditor and TinyMCE. The same symptoms manifested with them as well.
Trying to isolate the problem, I checked the database after pasting in clean markup in HTML view, and again after saving in WYSIWYG view. This is the result:
So, based on the database field, it would appear that the process of saving, in either HTML or WYSIWYG view is working properly... But then why is the output being fed to the browser different depending on which method was used to edit?
So far I've checked entity encoding, CSS (although it's obviously not a CSS issue), and tried installing on another local server. No changes in behavior.
I could really use some suggestions.
Thank you in advance for your help.
Z
PS: This is the latest version of Joomla (2.5.6), running on Apache.
When we typed some text continually this issue was occurred. Actually this was not the issue this problem was solved by using correct css style for that division.
<style type="text/css">#divid {width:750px;word-wrap;break-word;"}</style>
You have to use this css style for your division . Surely this ll resolve that problem...

MVC Razor GUI and Coder Working Together

I would really like to use the MVC and Razor technology for my web application. The problem I am running into is that I am the coder and will be working with a HTML GUI designer.
I only see 2 ways for the GUI person to work at this point.
Install Visual Studio and open the whole solution and work like I am working, except he would stick to the CSHTML files.
Use his favorite HTML editor or notepad and edit the CSHTML files manually and then also have something like IIS Express installed with the app configured so that they can refresh the page they are working on.
Neither of these seems productive or intuitive. I would love to see the GUI person able to use a tool like Expression Web or other tools that allow you to see the design and html at the same time. Having tools available for shading and colors and positioning would be good.
Now I understand why it is this way. It is because of the processing that Razor does to render the pages. This is most true by the fact that most of the cshtml pages themselves are not complete pages. They are meant to live inside of a _layout page.
Isn't there something, though, that can at least show the basic rendering during editor?
What are other people doing?
You have a few options. AFAIK there is no WYSIWYG HTML editor that understands Razor. So, either your designer must work in straight html, or...
1) The designer works in pure HTML files. They give you those files, and you adapt them to Razor. If they need to make changes, you can track those changes with a diff tool (from the previous version) or use a version control system to compare versions of the raw html. Then you apply those changes to your Razor files.
2) Your designer works in .aspx files, which Expression Web understands. You could convert the WebForm syntax to Razor syntax. Again, you are spent doing lot of work, but probably less work than the pure HTML way of doing things, because the designer will have designed the code for master pages. These can be relatively easily adapted to Layouts.
It would be nice if the next version of Expression understands Razor.

Asp.Net MVC 3 Free Text Editor with File Upload

I spent all day yesterday looking for a text editor for my Asp.Net MVC 3 application without any joy. What I am looking for is a text editor that I will use to allow a user to add a news story. Therefore, it would be nice if when using the editor the user, as well obviously adding text, could embed an image by hitting an image icon and browsing to their local drive. And also to highlight text, ie 'Further Info', and be able to link to a document which they can also upload.
I know you might think reading this that there are loads of tutorials etc on the Web that already explain that, but after a full day of researching yesterday I have not been able to find any. Either the documentation is for asp.net Web Forms, or PHP etc, but I can find hardly any info on how to implement this for MVC.
I know that the likes of CKEditor and TINYMCE are availble, but I can find no information on how to implement these to my requirements stated above.
If anyone knows of any tutorials or even any alternatives that I could use it would be very much appreciated.
This might be what you are looking for. A solution for tinymce: http://www.xdevsoftware.com/blog/post/TinyMCE-Image-Upload-Plugin-for-ASPNET.aspx

Webpage hosted HTML editor that graphically shows tag nesting in WYSIWYG view

I once found a webpage hosted HTML editor that optionally included the tags, as highlighted colour coded elements with the tag type, in the (almost) WYSIWYG view, but now cannot find the project anywhere.
I thought it an excellent compromise between WYSIWYG ease of use an markup flexibility.
Does anyone know which editor this was? Or maybe there is more then one editor with this feature?
Here is one that looks promising.
http://koivi.com/WYSIWYG-Editor/
This appears to match your request.
I found one such, and only one. Unfortunately it isn't the one I had seen before and so I'm still looking. They are called What You See Is What You Mean editors - WYSIWYM.
WYMeditor
Also see - http://en.wikipedia.org/wiki/WYSIWYM

Resources