Want to allow certain tags & properties while pasting from Word/WebPage to TinyMCE4 Editor. I tried to set the configuration as below :
oEvent.getParameters().configuration.valid_elements="em,a[href|target=_blank],strong/b,div[align],br,p[align]";
Now I am able to paste only paragraph,bold & link not text with em tag.
Any idea why its not working ?
I want to allow only certains tags like Paragraph,Stong,StrikeThrough,Bullets.
Any help will be highly appreciated. Thank you.
I don't see any issue with using that valid_elements setting. Please see this TinyMCE fiddle:
http://fiddle.tinymce.com/Dmgaab
One editor allows EM and the other does not ... and TinyMCE works as I would expect.
Pasting content from word is quite a complicated problem - you'll likely be able to make some functions carry over nicely on your own / with the free version, but tinymce has an extensive paid plugin to handle pastes if that's what you want.
For now, I would try adding span to your list of valid_elements. It would depend on your text source, but I know that tinymce handles italics internally through <span> elements.
valid_elements: "span,em,a[href|target=_blank],strong/b,div[align],br,p[align]"
Related
editor.insertContent(" sign up ");
this is code line my simple pluging for TinyMCE editor.
it work but with some problem.
The problem with this is that it removes ng-click="signup()" from like. in other words this produce following content
sign up
Intead of
sign up
I will be thanks full if some help me in this case. I just want to create a small plugin for tinymce insert just above code line in correct way
You need to set ng-click as valid tinymce attribute of a-Tags. Try this setting:
// The valid_elements option defines which elements will remain in the edited text when the editor saves.
valid_elements: "#[id|class|title|style]," +
"a[name|href|target|title|alt|ng-click]," +
"#p,blockquote,-ol,-ul,-li,br,img[src|height|width],-sub,-sup,-b,-i,-u," +
"-span,hr",
I wanted to share my solution too. Might not be suitable for all the use cases as it leaves you vulnerable to XSS. For my closed environment its fine thou.
I also wanted to allow using any other angular attributes, so listing them all isn't very feasible.
I simply added following:
valid_elements: '*[*]'
This allows using any elements with any attributes.
I'm trying to make a twitter-like rich-text editor wherein the characters that go over the character limit are highlighted. I saw this question and tried editing it.
I used Kendo UI's Editor and also Tim Down's rangy library. Using Kendo's inline editor, the rangy library works great.
<div contenteditable="true" class="rte"></div>
Although I need it to work when attached to a textarea.
<textarea class="rte" maxlength="50"></textarea>
The rangy library doesn't work on the textarea quite like the inline editor maybe because Kendo uses an iframe for this. The characters that go over the limit are highlighted but the cursor goes back to the start of the content.
Does anyone know how to fix this? Here's a sample I've been working on: http://jsfiddle.net/G4jn7/12/
This is easily fixed: you just need to pass in editor into the rangy.getSelection() call to tell it to get the selection from the iframe's rather than the main document.
Demo: http://jsfiddle.net/G4jn7/13/
In rangy.getSelection(x), x can be any of several things to identify the document to use: a Window, Document, an <iframe> element or a non-iframe element within the document.
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
I am a beginner in HTML5, CSS3, and JavaScript. I reached my limit for the use of the trial version of Microsoft's OneNote. I like the program so much, I want to make an equivalent of it as an html version so I won't have to empty my pockets for the paid version.
The part I need help with is the part where you type in your notes. I don't know how to make a text edit field in html. Is it possible to do something like that? I would be satisfied if it could only do the same functions as note pad. Just so long as I am able to do the simple type and edit functions. Can someone show me how to code this or lead me to a site that teaches something like this?
Thanks! Tony.
There are plenty of solutions out there. Nicedit, CKEditor, etc. These all have a Rich text interface, and are javascript managed.
The simplest solution would be to just use a <textarea> which would allow for plain text input only.
The simplest way is to use the <textarea> tag in HTML. See this link too.
You can also use HTML5 Data caching to save your notes locally through your browser after implementing your textarea tags.
Here's a neat little plugin that should be relatively minor to install/use.
https://github.com/ekdevdes/storage.js
Here is the demo:
http://www.kevinroth.com/rte/demo.htm
when I use firebugs to inspect the source code, I see that it is iFrame only, but how can the iFrame have a text area behavior?? Any ideas on how to implement this? Thank in
As I'm doing this for my job right now, I've done a small amount of of research. From what I have figured out, there are two ways to accomplish this:
document.designMode
Using document.designMode in JavaScript which sets the whole HTML document to be editable. As the whole HTML document is editable, presumably an iframe is needed to encapsulate the editing, so that the user can't edit any part of the page you don't want editing.
From what I can tell, the demo you linked and TinyMCE uses this method.
contenteditable
The contenteditable HTML attribute is similar but doesn't require an iframe to be used. You add the attribute to a tag and all of the HTML within it becomes editable with a blinking cursor.
Here is a demo of it: http://html5demos.com/contenteditable
Notes
Personally I'll be looking at contenteditable for my task. Here is good overview and details on the topic: http://blog.whatwg.org/the-road-to-html-5-contenteditable
As I say I have done limited research on this, so please help me correct any errors :)
In that frame you can see a full HTML source that builds up something that looks like a text area + toolbar + stuff. A complicated Javascript is doing all the trick behind. E.g. if you select some text and make it bold with the toolbar than the script places <strong> tags around your text and so on..
Use http://www.tinymce.com/ It is the best rich editor out there. Works great with any browser and it has many many options. It's very easy to use. Just look at the examples and docs. It's included with many popular blogs and CMS.