I'm having a hard time finding a good WYSIWYG editor, tried CKeditor & TinyMCE and found out that they strip out a lot of tags and headers and they ruin the page.
Any recommendations of professional editors? i want it to leave the page as it is but only change the areas that people "touched".
Thanks
TinyMCE and other editors as-default usually do some level of clean up.
For example with TinyMCE there are configuration options such as cleanup and clean up on startup which can be used to control the cleanup actions.
tinyMCE.init({
...
cleanup : false
});
Documentation as taken from TinyMCE wiki:
This option enables or disables the built-in clean up functionality. TinyMCE is equipped with powerful clean up functionality that enables you to specify what elements and attributes are allowed and how HTML contents should be generated.
This option is set to true by default, but if you want to disable it you may set it to false.
Notice: It's not recommended to disable this feature.
It might be worth mentioning that the browser usually messes with the HTML. The clean up not only fixes several problems with the browsers' parsed HTML document, like paths etc., it also makes sure it is a correct XHTML document, with all tags closed, the " at the right places, and things like that.
I haven't seen anything like this before but was thinking of trying to create something like this
Related
I'm running on Wagtail 1.3.1, Django 1.7.11.
I have activated hallohtml and hallojustify plugins and they appear in toolbar (without icons but buttons are here).
The buttons can be used and the modifications are seen in the textarea (I mean that I can center a field for example and I see it).
When I publish the page, the modifications made by either hallojustify or hallohtml are not saved whereas I can still use the bold/italic buttons and save the content. It looks like the html is cleaned up...
I should miss something but...
#hooks.register('insert_editor_js')
def editor_js():
js_files = [
]
js_includes = format_html_join('\n', '',
((settings.STATIC_URL, filename) for filename in js_files)
)
return js_includes + format_html(
"""
<script>
registerHalloPlugin('hallojustify');
registerHalloPlugin('hallohtml');
</script>
"""
)
By design, Wagtail only allows a subset of HTML tags and attributes, and strips out any that are not on its whitelist. This is done for several reasons: it prevents editors from inserting malicious content (such as <script> tags), and encourages site developers to keep content and presentation separate. (You shouldn't really be including formatting information such as left/right/centre alignment inside rich text content - that should be defined inside your template and CSS.)
You can customise the HTML whitelisting rules using the construct_whitelister_element_rules hook - however, I'd encourage you to reconsider whether you really need to overload the rich text editor with so much functionality, or whether there's a more structured way of achieving what you want (such as StreamField).
I need to create a simple rich-text editor that saves its contents to an XML file using arbitrary markup to indicate special text styles (e.g: [b]...[/b] for bold and [i]...[/i] for italic). All the backend PHP stuff seems fairly straightforward, but the front-end WYSIWYG portion of the feature seems a bit more convoluted. I've been reticent to use one of the currently-available JavaScript-based WYSIWYG editors because the rich-text options I want to allow are so limited, and these applications are so fully-featured that it almost seems like more work to stip them down to the functions I need.
So, in setting out to create a bare-bones rich-text editor, I've encountered three approaches:
The first two approaches use the contentEditable or designMode properties to create an editable element, and the execCommand() method to apply new text styles to a selected range.
The first option uses a standard div element, executes all styling commands on that elements contents.
The second option uses the editible body of a window enclosed in an iframe, then passes any styling commands initiated from buttons in the parent document into its contentWindow to alter selected ranges in the contained body. This seems like several extra steps to accomplish the same effect as option one, but I suppose the isolation of the editable content in its own document has its advantages.
The third option uses a textarea overlaying a div, and uses the oninput JS event to update the background div's innerHTML to match the input textarea's value whenever it changes. Obviously, this requires some string finagling to to convert elements like newline characters in the textarea to <br/> in the div, but this would allow me to preserve the integrity of my [/] markup, while relegating the potentially-messy DOM manipulation to front-end display only.
I can see benefits and drawbacks for each method. the contentEditable solutions seem initially the simplest, but support for this features tends to vary across browsers, and each browser that DOES support it seems to manipulate the DOM differently when implementing execCommand(). As mentioned before, the textarea/div solution seems like the best way to preserve my arbitrary styling conventions, but the custom string-manipulation procedure to display rich text in the output div could get pretty hairy.
So, I submit to you my question: Given the development goals I've outlined, which method would you choose, and why? And of course, if there's another method I'm overlooking that might better serve my purpose, please enlighten me!
Thanks in advance!
Have you looked at http://php.net/manual/en/book.bbcode.php? This is your answer. If you are having doubts, then you are doing something wrong. :-)
Then use JS to track keyup event and simple AJAX to print preview of the input. Just like in stackoverflow.
NB It would be far more efficient to generate the preview using plain-js BBcode approach. However, do not overcomplicate stuff unless you necessary need it.
The problem with BBCode, Markdown, ... is that it's not that trivial for genpop. I suggest looking at widgEditor, it is by far the simplest WYSIWYG editor I've seen to date. It was developed some time ago, so I am not sure about compatibility, but it sure is an inspiration.
I would have included this only as a comment, since it does not directly answer your question, but I am fairly new to SA and could not find out how to do that. Sorry.
At the moment I'm using the wysiwyg module for Drupal with tiny_mce. However, it keeps inserting all kinds of superfluous spans and other trash elements in my markup. I want to use wysiwyg mostly for semantic markup with css classes, any inline styles are a problem, because I have to clean up my html by hand - sort of defies the purpose of having a wysiwyg editor altogether. What other wysiwyg editor should I try, which will behave more sensibly?
WYMeditor, available via the WYSIWYG API, is not the fanciest editor, but it does produce XHTML markup.
BUEditor integrated via the BUEditor module, is an easily extensible system that allows you to easily define buttons and associated markup. It is a favorite of a markup-obsessed colleague of mine, so I imagine it does a good job.
In my experience ck editor is a very good solution.
The only problem i have seen it have is drop a instead of leaving a box blank
It has paste plain text and paste from word features that prevent extra markup from being dropped in
When working with a cms i think what is important usually is not how well you can enter markup, as a developer you can usually just use a text area and drop html, but how the editors will enter content.
Ck editor usually produces very clean results, as long as direct pasting from Word does not take place
As people have helped me out in the comments, there are two ways to integrate it with Drupal
WYSIWYG API module, and standalone module cKEditor
I really wanted to go with CKEditor myself but after trying to get rid of that adding breaks and spaces everywhere stuff I had to revert to plain text input.
I am currently considering markitup!, which you may want to investigate as well.
I am hopeful as I have good experiences with it on WP but I didn't get to try it on Drupal just yet.
I would suggest BUEditor, you can configure all buttons and thus control the output
Unfortunately I have yet to find an editor that doesn't try to mess with your code in one way or another. In Drupal, I've tried TinyMCE, FCKEditor, and CKEditor. In non-Drupal projects I've used Ephox EditLive and the YUI 2 Rich Text Editor. All of them try to "fix" or autoformat your code in one way or another, and to that end they are all frustrating. Of that group, Ephox EditLive is the worst offender, and ironically it's the only one that isn't free.
I've resigned myself to plain text editing in Drupal whenever there's a slight chance I may need to control the underlying HTML. My WYSIWYG editor is off by default; I whitelist pages in as needed. It's tedious, but for me it's better than playing tug-of-war with the WYSIWYG for control.
I came across the following http://ckeditor.com/demo , and was wondering if anyone had a basic tutorial how to implement this (or perhaps what key search terms I should use)?
Is this just a heavily modified TextField, or have they somehow managed to create a completely new TextField from scratch?
I tried googling this many times, and I always get pages relating to customizing the built-in TextField with CSS etc.
A good place to start if you want to learn how richtext web editors work is to look into the contenteditable attribute and the document.execCommand method (the best editors use a lot more than this, but these are at the foundation). Over-simplified, an editor consists of a contenteditable block and ways to invoke document.execCommand on the text selection.
But, speaking as a person who has actually developed an editor of this kind, you might be better off using an existing one (CKEditor being a great one, in my opinion).
Edit: Note that contenteditable is a proprietary (Microsoft) property, but most (all?) browsers have implemented it now, and it will be in HTML5.
Edit 2: I want to try to clear up a few misconceptions.
A div or iframe isn't in itself editable, it requires the contenteditable attribute. The use of an iframe is typically a workaround for the fact that older Gecko browsers only supported an alternative editable property (designMode) that could only be applied to a whole document.
While some operations of advanced editors probably do employ innerHtml, this isn't the key to making an editor on the web.
It is not a textbox. It is a DIV that has lots of HTML injected to it with javascript.
The basic idea is that JavaScript uses the innerHtml property of the div and writes HTML to it.
This is a javascript implementation that replaces a input. It basically hides the input and uses it for storing and passing the data via POST.
The advanced textfields I have seen have all been iframe or div. The code behind them is quiet messy and not very accessible.
Proceed with caution!
You may want to consider WYSIWYM instead of WYSIWYG.
I've tried various editors, both desktop applications and web-based RTEs, but have not found anything that works very well. All too often, they mess up code, adding in "tag soup". Even the ones that claim to only produce valid code often produce a total mess of span tags and style attributes.
Here are some of the features I'm looking for:
mainly to use as "content creation" rather than creating whole pages or sites (I normally do the design side by hand)
supports all HTML tags (which includes <small>, <code>, <kbd>, <dl> etc)
can attach classes to the current element - many editors will insert span tags, causing mess like: <p><span style="...">...</span></p>
doesn't change code that I add (I've had editors remove hidden input fields and other stuff)
doesn't add deprecated attributes, eg border and cellspadding often get added on images and tables.
would love it if it could pick up the stylesheet I use for my page and obviously apply the styles I select
if it's a desktop app, being Linux-based is gonna be a big plus
Anyone have any recommendations? Here are some of the ones I've tried: TinyMCE, FCKeditor and various others on the web; Dreamweaver (briefly), Expression Web and KompoZer on the desktop.
Well, I'm not aware of all the existing WYSIWYG editors around, but have you considered the alternative of using a code editor and create the HTML code by hand? I know it may sound crazy at first hand, but believe me, when you start to feel comfortable with it you'll become more productive, the code is cleaner and of course, you get more flexibility.
Personally I don't like dreamweaver, but it's code editor is very good because of the intellisense that helps you remembering the tags and attributes.
I've haven't tried it, but read of it: you could try the Amaya web editor (and if you have any comments on this editor, I'd like to read them).
I expect it's mostly standards-compliant (but, doesn't run javascript).