I'm developing an application that requires very specific WYSIWYG functionality. I need a way to generate HTML consistently and around elements that my application generates. The container used must be a DIV element, there must be a way to block/strip formatting when pasting, and the tags used in the HTML must be consistent between browsers. Also, it is important to have hooks for the backspace key, so that any special elements that I insert into the DIV from my application can be handled appropriately. Anyone have any suggestions? Maybe a good starting point?
Have you looked at tinyMCE?
Related
So basically I am creating a mail editor.. (Just want it as a div with contenteditable where i can switch HTML/Clear Text and I've already created a Word style editor (decorations/color/font/size etc)
I DO NOT WANT TO USE A PLUGIN
Problem im having is the div is inherting styles from the page =/ This is not good at all, how can I prevent it?
Example is using H1's.
A "bad" but working solution is to only style classes instead of example H1's.. But is there any good way?
Example pic:
The best solution is, to move the content to an iFrame. All major HTML editors do this trick to avoid interferences from the main style to the editable content
Take a look at the answer from a CKEditor devloper to my question too. Also I wouldn't suggest developing you own editor, it only looks simple in the beginning, but you end up building a lot of workarounds for browser incompatibilities!
You can take a look at YUI CSS Reset. Include or copy their CSS Contextual Reset and add to your editable DIV:
<div class="yui3-cssreset"></div>
If you don't care much about backward compatibility, you can use Shadow DOM. Setting applyAuthorStyles=false and resetStyleInheritance=true on the ShadowRoot prevents CSS of the parent document from affecting the Shadow DOM.
ShadowRoot can be created by calling createShadowRoot() on the div element. Alternatively, you can create a web component for your editor using one of the convenience libraries - Polymer or X-Tag.
There are certainly simpler (and more portable) solutions to your problem, but this one may give you additional benefits in terms of making your editor more reusable and encapsulated.
If you are using it as a html email editor, you shouldn't be using semantic tags like <h1> anyway. Html email doesn't play nice with modern web standards.
I'd suggest converting all the WYSIWYG text into <font> or <span> tags with inline CSS.
Because html email uses different element types (tables vs divs), it is easy to separate the CSS targeting between your page and editable content, providing you are formatting the user input.
I am using CKEditor asp.net page for allowing client to easily edit/format text. Also i am using tabs option within CKEditor as shown in the fig. attached. But tabs are not working at all. Initially i have created tabs withJS. I thought it’s the JS that not working with CKEditor so i have chosen alternative solution using css3. But tabs are still not working in CKEditor. I have searched on CKEditor forum but unable to get good resource or help.
For css3 I am using checkbox hidden through opacity 0; but checkboxes are not working in CKEditor. What comes finally in my mind is CKEditor doesn’t run html. Is there any solution for this?
CKEditor secures JavaScript code so it's not executed to prevent unexpected editor behavior. Also mouse/keyboard events from form elements are captured for robust editing, making regular manipulation impossible. The conclusion is: editor is for creating rich content, not for rendering layouts.
The simplest advice I have is to put the editor one level down. Namely:
Create tabs.
Make each tab title an inline editor (it must be a block element).
Put an inline instance of CKEditor into each single tab contents.
Serialize your tabs when saving. It's easy.
Bonus: With a little help from ACF (since 4.1) you can prevent the layout from being destroyed by thoughtless users. Basically restrict which plugins are loaded for every editor to manipulate the result of the editing.
I'm using TinyMCE plug in to create a text editor. The thing is, I want my users to control the positioning, weight, and list/no list of their document, but not font, font-color, or font-size. I'm looking for a TinyMCE property which will stop the program from adding those tags to the css. Also, I need to implement this on the server side. I'm using django, so is there any function that will do that as well?
One may specify exactly which HTML tags and related attributes are allowed using 'valid_elements' configuration setting:
http://www.tinymce.com/wiki.php/Configuration:valid_elements
I believe that as long as you don't provide the buttons for font-related stuff (using the theme_advanced_buttons_1/2/3 parameters), and also don't give them the HTML button, the users won't be able to change fonts/color/etc.
But if they were to paste in some text created elsewhere, which happens to be HTML, they might still do it. To get rid of that, you'd probably have to filter what the server receives - I have no insight into any ready-made way to do that.
I'm working on an ASP.NET MVC project which uses the MarkdownDeep Editor to add a rich editor on top of a basic markdown input textbox (very similar to the Stackoverflow editor window).
Generally it works great. However, in certain scenarios, I would like to disable the preview window. This is automatically generated below the textarea by MDD. Can this be disabled?
Just to be clear, I know I can use CSS to hide the preview. But on some devices it's slow and makes typing painful. I want to entirely turn off that feature. I don't see anything in the docs other than how to customize the preview.
Any ideas?
In the docs it specifically mentions that it is recommended that you have the div preview already in your document because it will be created if it isn't found and consequently, could could a visible page refresh if any re-layout has to occur.
Note: the associated divs are all optional and if missing, the plugin will create them. However... you might experience the page jumping around during load if you do this. ie: it's recommended to explicitly include them.
Thus from the sounds of this, and that there doesn't appear to be any option to turn it off in the API page I would say no, it's not possible.
I am a little confused here: if you don't want the preview, use a regular text area instead of mdd_editor... So, under the scenarios where you don't need the previews, instantiate a plain vanilla editor. What am I missing here?
I know this is old, but I was looking for something else on mdd. I recently had this same requirement.
Just comment out the code
// Update the DOM
if (this.m_divHtml)
this.m_divHtml.innerHTML=output;
in MarkdownDeepEditor.js
Is there a way to create your own HTML element? I want to make a specially designed check box.
I imagine such a thing would be done in JavaScript. Something akin to document.createHTMLElement but the ability to design your own element (and tag).
No, there isn't.
The HTML elements are limited to what the browser will handle. That is to say, if you created a custom firefox plugin, and then had it handle your special tag, then you "could" do it, for varying interpretations of "doing it". A list of all elements for a particular version of HTML may be found here: http://www.w3.org/TR/html4/index/elements.html
Probably, however, you don't actually want to. If you want to "combine" several existing elements in such a way as they operate together, then you can do that very JavaScript. For example, if you'd like a checkbox to, when clicked, show a dropdown list somewhere, populated with various things, you may do that.
Perhaps you may like to elaborate on what you actually want to achieve, and we can help further.
Yes, you can create your own tags. You have to create a Schema and import it on your page, and write a JavaScript layer to convert your new tags into existing HTML tags.
An example is fbml (Facebook Markup Language), which includes a schema and a JavaScript layer that Facebook wrote. See this: Open Graph protocol.
Using it you can make a like button really easily:
<fb:like href="http://developers.facebook.com/" width="450" height="80"/>
The easiest way would be probably to write a plugin say in Jquery (or Dojo, MooTools, pick one).
In case of jQuery you can find some plugins here http://plugins.jquery.com/ and use them as a sample.
You need to write own doctype or/and use own namespace to do this.
http://msdn.microsoft.com/en-us/magazine/cc301515.aspx
No, there is not. Moreover it is not allowed in HTML5.
Take a look at Ample SDK JavaScript GUI library that enables any custom elements or event namespaces client-side (this way XUL for example was implemented there) without interferring with the rules of HTML5.
Take a look into for example how XUL scale element implemented: http://github.com/clientside/amplesdk/blob/master/ample/languages/xul/elements/scale.js and its default stylesheet: http://github.com/clientside/amplesdk/blob/master/ample/languages/xul/themes/default/input.css
It's a valid question, but I think the name of the game from the UI side is progressive markup. Build out valid w3 compliant tags and then style them appropriately with javascript (in my case Jquery or Dojo) and CSS. A well-written block of CSS can be reused over and over (my favorite case is Jquery UI with themeroller) and style nearly any element on the page with just a one or two-word addition to the class declaration.
Here's some good Jquery/Javascript/CSS solutions that are relatively simple:
http://www.filamentgroup.com/examples/customInput/
http://aaronweyenberg.com/90/pretty-checkboxes-with-jquery
http://www.protofunc.com/scripts/jquery/checkbox-radiobutton/
Here's the spec for the upcoming (and promising) JqueryUI update for form elements:http://wiki.jqueryui.com/Checkbox
If you needed to validate input, this is an easy way to get inline validation with a single class or id tag: http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/
Ok, so my solution isn't a 10 character, one line solution. However, Jquery Code aside, each individual tag wouldn't be much more than:
<input type="checkbox" id="theid">
So, while there would be a medium chunk of Jquery code, the individual elements would be very small, which is important if you're repeating it 250 times (programmatically) as my last project required. It's easy to code, degrades well, validates well, and because progressive markup would be on the user's end, have virtually no cost on the server end.
My current project is in Symfony--not my choice--which uses complex, bulky server-side tags to render form elements, validate, do javascript onclick, style, etc. This seems like what you were asking for at first....and let me tell you, it's CLUNKY. One tag to call a link can be 10 lines of code long! After being forced to do it, I'm not a fan.
Hm. The first thought is that you could create your own element and do a transformation with XSLT to the valid HTML then.
With the emergence of the emerging W3 Web Components standard, specifically the Custom Elements spec, you can now create your own custom HTML elements and register them with the parser with the document.register() DOM method.
X-Tag is a helpful sugar library, developed by Mozilla, that makes it even easier to work with Web Components, have a look: X-Tags.org