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
Related
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)
Is there a way to change the defalt behaviour of TimyMCE, so that when you insert a link, it renders something like this:
<span onclick="window.open('http://google.com', '_blank', 'location=yes');"></span>
instead of
Ideally, I would like this to be done by the Link button, but it could be done onSubmit.
ADDED:
The reason for doing this (as I know it seems like bad practice) is to be able to port to PhoneGap (using the InAppBrowser plugin), as is not intended for browser use.
Overlooking that this really isn't a good practice, I will assume you have a valid use case for wanting to do such black magic.
But before, a few things to consider:
I would advise you to keep links as links while working in TinyMCE. That way, your users will be able to insert and edit them as usual. Changing them to span elements inside the editor will practically eliminate the ability to edit them without editing the full source. You should probably convert them to span elements outside the editor.
If you're the stubborn type and don't care about #1 or your users, you should note that the default TinyMCE 4 configuration doesn't allow onclick attributes, so you'll need to update extended_valid_elements, otherwise they will be removed during the cleanup process.
There is probably a better way to do what you're trying to do. As #Vic suggested, an event listener would probably be a better option.
Nevertheless, I will humor you. Below is an overview of the process with a working example.
Overview
If you are developing with TinyMCE 3.x, you'll want to tap into the onSaveContent event. If you are using 4.x, use the saveContent event. In both cases, the concept is the same.
This event gets fired whenever the content of the editor is "saved". This happens automatically if TinyMCE is submitted as part of a form, but you can also use tinymce.triggerSave() to force it on all editors at once.
So, simply setup your callback function to replace all links with the evil span alternative. You can use pure JS or TinyMCE's built-in DOM utilities (probably only a good idea if you're already familiar with them), but for clarity (and sanity) it's much easier with jQuery.
Working Example
TinyMCE Fiddle: http://fiddle.tinymce.com/mAdaab/1
This example uses TinyMCE 4
Open your browser's console to see the output
After TinyMCE loads, press the Save button
The resulting HTML will appear in your console
Do with it what you wish, but remember that there probably is a better way.
What you are proposing is a really bad practice (as in not using anchor tags for links) wouldnt it be easier to actually give your link an id or class and attach event listener with javascript and on click prevent default behavour grab the href attribute and use your window.open?
When using the find/replace plugin for ckeditor it is greyed out on the source view. To enable this I have found that you need to add:
modes: { wysiwyg:1, source:1 }
However, i wont lie, im pretty unsure where this should be placed.
It hopefully can be found in this link http://jsfiddle.net/SBmKz/ as it is 384 lines long.
I have tried researching this and have found a few examples of it in other plugins and also how it is done in the ckeditor.js (n.modes={wysiwyg:1,source:1}) but cant seem to get it to work within this plugin.
Many thanks
Find/replace option is created to work on DOM, not on a plain text. That's why it is disabled in source mode. Actually, it would be a completely new feature the find/replace in source mode - especially if it had to omit tags.
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 want to know the basic principle used for WYSIWYG pages on the web. I started coding it and made it using a text area, but very soon I realized that I cannot add or show images or any HTML in the text area. So I made it using DIV, but I did not understand how I could make it editable.
So, in gist, I want to know how(in principle) to make an editable DIV section on a web page, something similar to Google docs or FCKEditor or TinyMCE.
I would be very grateful for any pointers and info.
Thanks!
There's the contentEditable flag that can be added to any element on a page to make it editable, eg.
<div contentEditable>I am editable!!!!</div>
Should work in all major browsers nowadays, and things like shortcuts keys (cmd/ctrl-b, etc) will Just Work.
Form submission can then be done by pulling innerHTML out of the editable region.
What you see is what you mean is the way - don't follow the WYSIWYG path as it is full of traps.
WYMeditor is the best when it comes to outputting semantic and clean HTML.
TinyMCE is open-source, so you could take a look at how it works under the hood. :)
It appears from the installation directions that an HTML form section (to allow submitting the form to the server for storage) is made with a textarea inside which gets replaced with the TineMCE editor.
The source itself is referenced from the tiny_mce.js file that is referenced in the target HTML file, so that might be a good starting point to see how it works.
Good luck!
Edit:
Although I didn't spend a lot of time, looking at the source for TinyMCE seems to indicate that the editor itself is inside of an iframe, so that may explain how the images can be displayed in an "editable" area.
If you're curious, download the development package, and take a look at the tiny_mce/jscripts/tiny_mce/classes/Editor.js. From around line 400, it appears that they're setting up an iframe and adding it to the DOM of the target HTML.
Use TinyMCE and turn off the toolbars.
Seriously, making a WYSIWYG editor for the web is a lot more complicated than it sounds and there are a million ways you can go wrong. You could spend the next two months battling with different browsers and stuff that breaks for no good reason, or you can trust the people who know more about the subject than you or I do.
TinyMCE is impressively configurable, and you can hide all the toolbars just by using the simplest configuration options:
tinyMCE.init({
mode: 'textareas',
theme: 'advanced',
theme_advanced_buttons1 : '',
theme_advanced_buttons2 : '',
theme_advanced_buttons3 : '',
theme_advanced_statusbar_location : "none",
});
You can also use normal CSS to make the
.mceLayout {
background: none !important;
border: none !important;
}
I'm not sure what you want the WYSIWYG area for, but chances are you'll need to get the contents at some point. You can do this with simple Javascript:
var editor = tinyMCE.get('editorid');
var stuff = editor.getContent();
It's free, easy to use, and proven reliable by lots of users. There's no good reason to reinvent the wheel.