I tried TinyMCE (documentation) and CKEditor and they both require this kind of code for initialization:
tinyMCE.init({
selector: '.some-div-with-text-inside',
inline: true,
fixed_toolbar_container: '.toolbar',
valid_elements: '*[*]',
setup: function(editor) {
// something that happens on setup
}
});
So, basically some selector is required and all DIVs with .some-div-with-text-inside class will become TinyMCE's editable areas. The editor will appear in .toolbar container.
==========================
What I would ideally like to achieve is an editor that is not attached to any DIV or TEXTAREA and whose functions (like "bold text", "create a link") would work on any content editable area in the document as long as there is some selection made. With Rangy exactly this is possible. See demo: http://rangy.googlecode.com/svn/trunk/demos/cssclassapplier.html
In TinyMCE v3 something like this was available:
$(function(){
tinyMCE.init({ mode: "none", theme: "simple" });
tinymce.execCommand("mceAddControl", false, "myEditableDIV");
});
But mode: "none" no longer exists in v4 and the second line became tinyMCE.execCommand("mceAddEditor", false, "myEditableDIV"); now but when there are multiple editable DIVs added this way then editor appears multiple times inside .toolbar. I'm wondering if there's any way to prevent that?
I just need 1 editor for all current and future DIVs with contenteditable. Some DIVs may be added or removed from the document. I went through every option in their documentation and I couldn't make it work.
I think that you can't edit DIV or Textarea without attaching tinyMCE, but here is one trick that you can make - you can HIDE the editor toolbars and show them only when you focus the current DIV or textarea. To achieve this you can use this function:
editor.on('focus', function(e) {
and here show the toolbars
});
Related
The crux of the issue is that I have a contentEditable div. I execute the following JS:
document.execCommand('enableAbsolutePositionEditor', false, null);
document.execCommand('enableObjectResizing', false, null);
document.execCommand('insertHTML', false, "<div class='inner1' style='position:absolute;left:100px;right:100px;'>innerDiv</div>");
Goal is to enable entry of some div inside and make it moveable and resizeable. This is the basic to start. I would then like to make that div itself contentEditable, if possible so that blocks of text can be moved around or resized (using the first two commands). I also want to do so in such a way that the contentEditable's undo/redo button has control over it.
The div gets inserted but it is neither draggable nor resizeable. There are other issues (edit inside overwrites and does not move existing content) but I need to get around the basic two objectives first. Do I need to install some jQuery plugin for this?
In my app I have TinyMce plugin. Now I need to at any time switch with richtext to plaintext. In this example I suspect that it can be done.
The only question is how? I saw a solution with the addition selectbox and js functions. Is there no mechanism built-in TinyMCE?
All you have to do is shutdown tinymce and show the tinymce route element (the div for which you have created the tinymce editor). The textarea is editable and shows the full HTML-Contents of the Editor.
To shut down your tinymce use
tinymce.get('your_editor_id').remove();
To make the underlying textarea visisble:
document.getElementById('your_editor_id').setAttribute('style', visibility:visible; display:block;);
or using jQuery
$('#your_editor_id').css('visibility', 'visible').css('display', 'block');
Update:
This works with Tinymce 4. Use the setup parameter
setup: function(ed)
{
ed.on('click', function(e){
tinymce.execCommand('mceToggleEditor', false, 'your editor_id');
});
}
Here is a working tinymce fiddle: http://fiddle.tinymce.com/Fnfaab
You can use the tinymce API and call the Formatter class like this:
tinymce.activeEditor.formatter.remove(); // no format name==all formats
I am using Tiny MCE editor version : 3.5.7
I am using multiple instances of text editor on same page with unique IDs and I have wrapped these editors in a div to show and hide these editors. Everything was working fine. Now I want to clear the contents of the editor when user hide it (so that when it is displayed again the previous contents are removed). I tried to do it using tinyMCE.get('editorId').setContent(''), it works fine only once.... I mean once I have used the above function than I am unable to set or even get the contents of that editor instance. The structure that I have used is as follows:
<div id="parentDIV">
<div id="1_editor">
</div>
</div>
tinyMCE.init({
mode: "exact",
max_char: "2000",
elements: "1_editor",
// Setting up ToolBar
theme: "advanced",
theme_advanced_layout_manager: "SimpleLayout",
theme_advanced_buttons1: "bold,italic,underline, strikethrough, separator,justifyleft, justifycenter,justifyright, justifyfull, separator,bullist,numlist,separator,fontselect ,fontsizeselect",
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
});
To show and hide the editor I doing something like this:
$('#parentDIV').hide();
$('#parentDIV').show();
Can anyone help please?
I am not totally sure why this happens. One option is if an editor gets moved around the dom. For you it might be a better way to shut down your editors explicitly then to just hide them.
To shut down an edtor instance use:
tinymce.execCommand('mceRemoveControl',true,'editor_id');
To reinitialize use
tinymce.execCommand('mceAddControl',true,'editor_id');
I hava an textarea and I am using tinyMCE on that textarea.
What I am doing actually is that when the page is opened, I am populating the textarea with some text, and after that I am initializing the tinyMCE.
The problem is when I am trying to change the value of the textarea after tinyMCE initializing, then nothing happens.
Here is an example.
Creating the textarea:
<textarea style="width: 95%;" name="title" id="title"></textarea>
Populating the textarea:
$('#title').html("someText");
Initializing tinyMCE
tinyMCE.init({
// General options
mode : "specific_textareas",
theme : "advanced",
width: "100%",
plugins : "pagebreak,paste,fullscreen,visualchars",
// Theme options
theme_advanced_buttons1 : "code,|,bold,italic,underline,|,sub,sup,|,charmap,|,fullscreen,|,bullist,numlist,|,pasteword",
theme_advanced_buttons2 :"",
theme_advanced_buttons3 :"",
theme_advanced_buttons4 :"",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
valid_elements : "i,sub,sup",
invalid_elements : "p, script",
editor_deselector : "mceOthers"
});
I would like to change the content of the textview (but it is not working)
I have tryed to use the same as before init the tinyMCE
$('#title').html("someModifiedText"); // does not work
I have also tryed to remove tinyMCE:
if(tinyMCE.getInstanceById('title'))
removeTinyMCE("title");
With
function removeTinyMCE (dialogName) {
tinyMCE.execCommand('mceFocus', false, dialogName);
tinyMCE.execCommand('mceRemoveControl', false, dialogName);
}
And thet to reuse:
$('#title').html("someModifiedText"); // does not work
I am out of ideas... Thank you very much for your help....
Problem here is you won't see anything if you enter text or html into your textarea.
Your textarea gets hidden when tinymce gets initialized. What you see then is a content editable iframe, which is used to edit and style content. There are several events which will cause tinymce to write its content to the html source element of the editor (in your case your textarea).
If you want to set the content of the editor (which is visible) you will need to call something like
tinymce.get('title').setContent('<p>This is my new content!</p>');
You may also acces the dom elements directly using the following
tinymce.get('title').getBody().innerHTML = '<p>This is my new content!</p>';
or using jQuery
$(tinymce.get('title').getBody()).html('<p>This is my new content!</p>');
You can use the tinyMCE.activeEditor.setContent('<span>some</span> html');
Check this Answer
Simply this works for me
$("#description").val(content);
<textarea id="content" name="content">{{html_entity_decode($yourstringdata)}}</textarea>
This is work for me, Decode your html data and place it between start and closing textarea tags.
I had the same problem solved by making sure the setContent was done after the document is ready, so first;
script(type="text/javascript").
tinymce.init({
selector: '#title',
height: 350,
menubar: false
});
then
script(type='text/javascript').
$(document).ready(function(){
tinymce.get('title').setContent('<span>someText</span> is html');
})
Above is code for pug, but the key is -as mentioned- to load it on document ready.
once call this
tinymce.triggerSave();
then value of tinymce will be transferred to the original textarea value. So so can get that as you get from normal textarea.
It works for me. Just place it inside your html code instead of going tinymce
<textarea> html CONTENT</textarea>
I have a TinyMCE textarea inside of #container
When I use $('#container').hide() and then $('#container').show(), tinyMCE throws:
Cannot read property 'selection' of undefined
I'm using the jquery plugin, so this is how I set it up:
$('#container textarea').tinymce({ /* options */ });
What should I be doing differently?
The correct command to use here is
// editor_id is the id of your textarea and
// tinymce will use this id to uniquely identify this editor instance
editor_id = $("#container textarea").attr('id');
tinymce.get(editor_id).hide();
to make it visible again use
tinymce.get(editor_id).show();
This question is about hiding and showing tinymce editor but if anyone came here about removing and re-adding tinymce editor without error then my solution can work for them.
To remove existing tinymce editor and add new needs clearance of tinymce.EditorManager.editors array. This solution works in both cases : 1. If you have only one editor and you want to remove and add it again. 2. If you have multiple editors and you want to remove some special editor and add it again.
console.log(tinymce.EditorManager.editors);
This will give you a view of the array and exact index of you desired editor which you want to remove. For example one sample output of above console can be:
Array[2]
0:B
1:B
length:2
textarea-1:B
textarea-2:B
_proto_Array[0]
This is the output of the console when i have two tinymce editors on textareas : #textarea-1 and #textarea-2 Lets suppose I want to delete #textarea-2 and re-add it then it can be done as follows:
tinymce.EditorManager.editors.splice(1, 1);//removing second element in array.
delete tinymce.EditorManager.editors['textarea-2'];//deleting respective textarea id from array
Then you can add it again simply using init:
tinymce.init({
selector:'#ts-textarea-2'
});
If you have only one textarea associated with tinymce editor lets say : #textarea-1 and you want to remove and re-initialize it then you can just empty tinymce.EditorManager.editors by :
tinymce.EditorManager.editors = [];
And then you can add using init command as explained above. Worked for me without any error.
I hope it helps
Instead of hiding it, try sending it off screen - something like:
$('#container').css('left', '-1000px');
EDIT/UPDATE:
You could also try removing TinyMCE from the textarea before you hide() the container, and then bring it back after you show(). But you'll need to give your textarea an #ID:
//To Enable
tinyMCE.execCommand('mceAddControl', false, $("#container textarea").attr('id'));
//To Disable
tinyMCE.execCommand('mceRemoveControl', false, $("#container textarea").attr('id'));
Apparently it was the animation. if I show()/hide() I'm fine, but when I try to animate in tinyMCE has an issue after I finish animating, possibly trying to set options once the textarea's display isn't none.