I have a TinyMCE widget that is limited to only <p> tags and non-block-level elements. Thus, the user is unable to insert tags like <div> or <table>. Which is the desired behavior.
However, the user can copy any content from any web page and paste it to TinyMCE. Is there a way to prevent pasting there, or better yet, limit paste to only a set of tags?
Have a look at the paste plugin shipped with TinyMCE.
I know that in Drupal, if you use TinyMCE provided in the wysywig module, you get the choice of allowing filtered html, full html, or php code inputted into the editor.
Related
When you select some elements on the webpage by mouse and then paste it in new email (for example in gmail) you still see html elements. But when I add html code to clipboard from js I still see html code after pasting. Is there any way to add some html code from js and see generated elements after pasting?
That is not possible because of the way gmail handles this (the right way). Just imagine if you were able to send javascript tags to anyone with codes that would send cookie info back to you. This is called escaping html and google (and everyone else who does it does it right). Cheers
I've got 2 CKEditor instances. One editor (A) supporting a number of widgets, another editor B has an Advanced Content Filter with these settings to make sure only <p>, <br>, <em> and <strong> tags are allowed in the second editor:
config.allowedContent = 'p br em strong';
My widget contains an image and some other tags and this filter setting:
config.allowedContent = 'img div figure figcaption';
When text containing this kind of widget from editor A is pasted into editor B, I would like the editor to strip out the widget but it doesn't. This makes sense because the allowedContent setting of the widget makes sure that the image is not removed.
However, my second editor does not know anything about this widget and I would like to configure the filter to strip out all widgets pasted in.
I've tried adding the Disallowed Content setting to editor B:
config.disallowedContent = 'img div span figure figcaption';
But without succes, I keep getting the widget div's in editor B.
Same goes for pasting the widget into editor 4 of the sample editors provided by CKEditor. The widget is inserted even if the ACF does not allow it.
Is there another filter option to prevent widgets from sneaking into the body?
Unfortunately there's no easy way to filter pasted events with the ACF at the moment - see http://dev.ckeditor.com/ticket/11115. It has the 4.5.0 milestone assigned, but I don't feel that we'll manage to make this change in this version. There are architectural limitations which make this ticket very complex.
What you could try to do is to intercept pasted content on the editor#paste, parse the content and filter pasted widgets manually. The hard thing (the actual #11115 blocker) is that in the pasted content you'll find upcasted versions of widgets, with all wrappers, all internal attributes etc. ACF cannot be applied to this content directly because ACF is supposed to filter downcasted versions of widgets. Therefore you need to filter this more manually or with a special CKEDITOR.filter instance.
You can find this question useful - Apply CKEditor Advanced Content Filter to a string.
All I know is that it uses a IFRAME tag as it's presentation layer, how does it store the data, how does it switch between WYSIWYG mode and source mode?
Most in-browser WYSIWYG editors (Google Docs is a notable exception) use the contenteditable attribute to make an element editable.
The data doesn't need to be stored in any special way, it's just the HTML content of the editable node.
Switch to source mode by dumping the innerHTML of your editable element into a textarea, showing the textarea, and hiding the editable element.
You can find lots of information and tutorials by googling contenteditable.
I'd use one of the many free ones:
http://akzhan.github.com/jwysiwyg/
example: http://akzhan.github.com/jwysiwyg/help/examples/03-ajax.html
Can I get an explanation on how to make a wysiwyg editor using a textarea? All I need it to be able to do is parse basic html tags like bold, italics, underline, etc. It doesn't need to have any buttons that inserts it, I just want to have a default text inside the textarea tags that parse the html.
Example:
<textarea cols="20" rows="20" name="ok">
<b>wat</b>
</textarea>
This will print out <b>wat</b> instead of wat inside the textarea.
Edit: jQuery is preferred
Look into the contenteditable attribute. It's supported in many modern browsers. Just add it to an element and edit away...
document.getElementById('something').contentEditable = true;
Of course it doesn't work on textareas. You'd need to swap the textarea out with a div and make that editable. You'd also need to make sure the textarea has the contents (e.g. innerHTML) of the div as its value when the form is submitted.
A textarea cannot parse HTML -- period. (Anyone can feel free to correct me on this)
The WYSIWYG editors that you see are not in a textarea, at least not in the same way. I suggest using a prebuilt editor such as TinyMCE or FCK Editor.
A textarea will not parse HTML, but by using a WYSIWYG plugin, an editor will replace the textarea and give the user the ability to view and modify the content. With some editors, such as TinyMCE, you are able to set it to Simple mode, and allow only the basics of formatting (bold, italic, underline, bullets, etc) like you are interested in. This helps keeps the editor from being cluttered with unnecessary tools.
I suggest checking out TinyMCE or CKEditor
I was wondering how online rich text editors maintain the formatting when you paste text from a webpage or document. A standard textarea box only takes text while these WYSIWYG editors seem to use a DIV. How does it work?
Online rich text editors use contentEditable or designMode to take advantage of the browser's native support for HTML editing. When you paste into a contentEditable or designMode element, the browser puts HTML directely into the element. Try it yourself by pasting into Midas Demo and then using Firebug's inspect element to look at the HTML you pasted.
JavaScript applications can use the execCommand method to format the user's selection in a rich text editor.
WYSIWYG Editors actually build on top of basic HTML Editing functionality that the browsers already have built in. In Firefox, the technology is called Midas. In IE, contentEditable.
By using existing browser capabilities (IE - ContentEditable). This allows the developer to let the user edit html directly. They usually use an iFrame to separate the editable section from the rest of the page, but this is not required.
Then the developer can simply read the html source of the iframe (or whatever) and they're done.