I have been looking into why WYSIWYG editors are bad for content creation. The most common reason given is that they output incorrect html. But what if I use editors with reduced functionality?
My requirements are only the ability to italicize, make text bold, create ordered/unordered lists and (maybe at a later date) add inline images.
My users will hopefully be 'persistent' users (small numbers of laypersons using the app frequently)
In this context how do I choose between Markdown (WMD editor) & a stripped down WYSIWYG editor. How would page performance be affected with each? I consider fidelity & reproduciblity of data to be important.
You choose by considering your audience. Wiki markup and markdown is for geeks. Your customers sound like they're probably not geeks so I would suggest CKEditor or Twiki-style editor (good, simple Wysiwyg UI) for non-geek users.
Basic concern: Why force lay-people to learn a markup language when solid alternatives exist?
See the Custom Toolbar editor in this CKEditor demo. Or check out TinyMCE.
OK, I tested both.
Even for my basic formatting requirements, CKEditor generated quite ghastly html
Now this is the input
This actually appears to be better
I hope users understand what we are doing
Lets see
But in the meantime
CKEditor Output
<p> This actually appears to be better</p>
<p> I hope users understand what we are doing</p>
<p> Lets see</p>
<p> </p>
<p> But in the meantime</p>
And Markdown Output
<p>This actually appears to be better <br>
I hope users understand what we are doing <br>
Lets see</p>
<p>But in the meantime</p>
Now if this is the difference between these two for the most basic formatting (linebreaks and paragraphs), what will it be like in a 200 word submission. I think most users will need to know only this
For line breaks, two SPACES and hit ENTER.
For new paragraphs, hit ENTER twice
The rest of the stuff could be learnt incrementally
Is it that hard to engineer a 'basic' WYSIWYG editor?
EDIT
After adding these to config.js above problem is solved
config.enterMode = CKEDITOR.ENTER_BR;
config.shiftEnterMode = CKEDITOR.ENTER_P;
Related
My editors want to have an ability to edit raw html within editor.
For example, we can have simple list markup:
<ul>
<li>Some text<li>
</ul>
Or with custom classes and event tags:
<ul>
<li class="my_class">Some text
<span class="special">Some additional info</span>
<li>
</ul>
And so on.
I know that built-in Draftail doesnt support html editing.
But using third-party editor comes with problem:
Losing integration with system. For example, i cant just put image like with draftail. Or, preview mode cant handle all functionality of third-party editor.
So, maybe someone has working solution for this situation.
I thought about using special StreamField panels, but it seems to be overhead of blocks. Dont like this idea of having lots of blocks with little differences
Wagtail does not support raw HTML editing within the page editor out of the box intentionally. The philosophy (zen) of Wagtail is to help editors and developers 'wear the right hat' when working in Wagtail.
HTML editing is usually best provided to developers, where there is an expected knowledge of what is required for things like accessibility, security and the benefit of tooling (like git).
However, if HTML editing is a must, you will probably need to build your own editor field for that purpose or find a suitable package that works with HTML markup such as django-markupfield. Adding image/snippet/page chooser functionality however will have to be built for whatever you end up using. You may also want to look at the Wagtail markdown package either as an alternative to HTML or a starting point, it allows for a syntax of linking to pages/images.
Wagtail lets you use any kind of Django field or widget with the FieldPanel.
Please ensure you consider all the risks when implementing this feature, such as accessible HTML (e.g. heading levels), security (disallow some tags such as script tags), malformed HTML leaking into the rendered template and of course the end user experience.
At the end i made my own solution
Simple rewrite some methods in wagtail`s Html DbWhiteLister and HtmlConverter.
This gives me an opportunity to allow any tags with any attributes.
https://github.com/Chenger1/wagtailtinymce.-Full-Rich-Text-Editor
I am trying to include, in email, a simple text alternative for non html email readers.
I can not use MIME (service I am using doesn't support it, only HTML only or Text only).
I figure most people (95%) have simple html support, so I'll avoid css.
But for the text-only folks I want to include a text-only version.
I have tried hiding it with
<div class="TEXT ONLY" style="width:0; overflow:hidden;float:left; display:none">
<--! text here -->
And wrapping the second around the first.
That works in Gmail and in Yahoo, outlook ,etc ](per testing here)(http://info.contactology.com/email-view) and testing in my own gmail account and an ancient 10 year old Goldmine client).
But I'm looking for problems with the above or a better solution. Maybe just using the second option '<--!' (since, if it is displayed it's fewer confusing HTML tags for the user to ignore)
Both of them will make the text invisible,
But,
<div class="TEXT ONLY" style="width:0; overflow:hidden;float:left; display:none">
will be accessible via the DOM.
where as,
<--! text here -->
will not be accessible via the DOM.
So ultimately the choice is yours, depending on your requirements. If just hiding the element is your only concern then I would rather prefer the <--! text here -->. This can hide anything including entire html contents too (unless it includes -->), where as, the DIV way may cause problems with the DOM in certain cases.
You can use the following technique that I employ to emulate "email preview text". Quick background (in case you're interested): Most email clients grab alt text and link text to generate preview text, but my company includes multiple images and a "click to view in browser" link before any informative content, so the generated preview text is garbage.
I add the following code right after the opening body tag:
<!--email preview text-->
<div style="display:none;font-size:1px;line-height:1px;max-height:0;max-width:0;opacity:0;overflow:hidden;">
Here is my preview text. You should have roughly 90 characters and include a call-to-action. Read on to find out more.
</div><!--/email preview text-->
Adapted from Litmus.com.
I am thinking of converting my forum input textarea exclusively to TinyMCE HTML editor. I already have both options but it is a pain maintaining both and inserting images in textarea needs preview etc...
This is more of a general question. Do you think it is safe to include HTML editor (with all the safety measures like paste only text, filter for html not allowed etc...) as the only kind of editor on a forum? It's 2011 and machines are generally fast, connection are better.
What are the downsides of using HTMl editor instead of text field? I can not imagine a blog CMS to have "normal" textarea for input.
But for some reason on forums I do not see many html editors... Even the TinyMCE site has a textarea for their editor. So is there really something to watch out for and a no go...?
I know it is more of a phylosophical question, but I guess you have experience with forums, blogs, etc...
My site is about cooking and beeing able to insert pictures (and upload them) the easy way seems to be a big plus for our home cooks ;-)
If you don't consider security (you'll need to filter the HTML input on the server side so it won't contain anything dangerous), there's only the user experience left for consideration. On a forum you write text most of the time. There's seldom any use for more functionality than bold, italics and images. The solution used here on Stack Overflow addresses this by having a very limited set of functions, and applying it in the textarea with a sane markup language.
Other forums either use old software or didn't think the improved user experience was worth the effort. The textarea-only solution fits most forums well enough since most of the input is text-only anyway.
I do think you would benefit from HTML input. Make sure that only allowed HTML can be sent though, since the user can circumvent everything on the client side.
TinyMCE uses Javascript to add functionality to an existing textarea. If Javascript is disabled, then the user will be presented with a normal textarea anyway.
I would say it's relatively safe, as long as all input from the user is validated on the server before it's used for anything.
I've currently got TinyMCE incorporated into the backend editor of a simple blogging/page-editing app, but I'm extremely unhappy with the HTML code it creates. It does all sorts of messy things like:
Adding inline style information to span tags that you can't ever find to get rid of without editing the HTML directly.
Nesting tags in nonsense ways (e.g. <p><strong><p><span>some text</span></p><strong></p> just to make something bold.)
Adding empty <p> </p> lines where they don't belong and I'm not trying to create blank lines.
EDIT: I've looked at lists of the other editors out there (including on SO), but I want to know if people firsthand have had better luck getting clean code out of their wysiwyg editors.
Any recommendations for one that outputs better code behind the scenes?
How about a rather drastic alternative, and using a WYMIWYG (What You Mean is What You Get) editor rather that another WYSIWYG editor. That way the author is in full control of the schematic markup as well as the content he/she is entering.
Unfortunately I haven't found one that is as feature rich and usable as tinyMCE, but it seems to have come a long way - see http://www.wymeditor.org/demo/
Use HTML purifier before saving the content into the database.
HTML Purifier
I found JoomlaFCK to be a very good alternative to Tiny MCE.
Hope you like it.
bye
BTW I know it is an old thread but someone might use it. ;)
i am building a webapp that will have notes fields all over the place, but i dont know what kind of markup i should use.
these are my requirements
User must be able to change the text style (bold, italic, underlined)
User must be able to create bullet lists
User must be able to create numbered lists
User must be able to change the font-size or use pre-definded headings
User must be able to add links
User must have a WYSIWYG - Editor that hides the actual markup
the last one is the most important requirement, my target users struggle even with word, so using markup style input like here on stackoverflow is not an option.
so what kind`s of markup do you know that fits ans has some fancy WYSIWYG - Editor?
if you think that i missed a important requirement please feel free to suggest it.
tia
You'll need to check out tinyMCE.
It's the best javascript-based WYSIWYG editor I've found.