TinyMCE has an option that lets you make items in the editor not editable but I cannot find anything similar for CKEditor. Is there a way to make elements in the editor not editable?
You can change the configuration like this:
config.readOnly = true;
Or
You can use disabled attribute in textarea.
See the documentation here Read Only Mode
You can set contenteditable='false' on the element and CKEditor will handle it correctly as read only.
Works in 3.4+, 4 also definitely works, 5 probably does as well.
Reference:
This link has information on it [slightly out of date, but still applicable for the core concept]:
(https://docs-old.ckeditor.com/CKeditor_3.x/Users_Guide/NonEditable_Contents)
Related
I want to make some TinyMCE text editors on a page temporarily readonly.
I understand this technically possible using:
tinymce.get('id').getBody().setAttribute('contenteditable', false);
then we can re-enable them with:
tinymce.get('id').getBody().setAttribute('contenteditable', true);
However, I've found that using:
tinymce.get('id').setMode('readonly');
suits the needs of my project better when disabling as it makes the the whole textarea appear and become disabled.
My problem is that I can't then remove the setMode('readonly'), or find out what I should "re-set" the mode to.
I've tried:
tinymce.get('id').setMode('readonly', 0);
for example. But nothing seems to work.
TIA.
When you use the setMode() API you can pass one of two string values to switch the mode:
readonly
design
For example: tinymce.get('content').setMode('design');. Here is a running example of toggling between the modes:
http://fiddle.tinymce.com/Gdhaab
The documentation for this can be found here: https://www.tiny.cloud/docs/api/tinymce/tinymce.editormode/#set
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]"
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 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
How do I expand/collapse an html field in Firefox? I incorporated a few JavaScript examples from the web, but they only worked in IE. (I'm limited to HTML and JS)
Suggestions are appreciated.
Thanks.
Yes, I would like to show/hide divs and such.
If your input field has an ID attribute, you can use CSS to style it as needed. I recommend using a library like jQuery, but I have provided an example without as well:
// hiding without jQuery
document.getElementById('myInput').style.display = 'none'
// showing without jQuery
document.getElementById('myInput').style.display = 'block'
// hiding with jQuery
$('#myInput').hide()
// showing with jQuery
$('#myInput').show()
jQuery: http://jquery.com
What you probably want to do is change css property display of the element to "none" to hide the element and change it back to "block" or "inline" to show it again. It can be done with javascript.
If you want a fancy animation, you could use some kind of javascript library which offers different effects (you may want to check out toggle) or components (for example Accordion).
I'm afraid I don't understand your question entirely.
First off, what do you mean by 'html field'? Do you mean as in form fields (text boxes, radio controls, etc?). If so, do you mean how do you dynamically resize them? ('Expand/collapse' to me is ambiguous).
If you mean you want to show/hide divs and such, that's much easier using css and javascript. See this example.