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
Related
I am trying to copy text to clipboard on click of button.
I am using below library for this but the only things lacking with that library is that it is not shown how to display tooltip when content is copied:
https://www.npmjs.com/package/angular-clipboard
I have tried answers from below questions but those answer doesn't seems to work so i ended up using this above library:
AngularJS copy to clipboard
how to get clipboard data in angular JS
I want to show my tooltip exactly the way as shown on this below question answer:
Tooltips + Highlight Animation With Clipboard.js Click
So I kinda got it working.
Unfortunately we have to use some js to do it if you resort to using bootstrap tooltips.
Here is a plunkr that solves the problm.
Basically, boils down to these few lines of code:
var myEl = angular.element( document.querySelector( '#copyButton' ) );
myEl.attr('title', 'Copied!')
.tooltip('fixTitle')
.tooltip('show');
myEl.attr('title',"Copied");
myEl.on('hidden.bs.tooltip', function () {
// do something…
myEl.attr('title', $scope.copyButtonToolTip)
.tooltip('fixTitle');
});
Also, you should be using bootstrap version 3 instead of v4.
Updated Plunkr
How can I work with TinyMCE in source code only? TinyMCE converts any data to HTML and shows it. I need to use BBCode without converting, source code only. I couldn't find any info about it in Google.
I suppose you want to use TinyMCE like phpBB post form. i.e. click on Bold and it shows [b]text[/b] and not the formatted text in bold.
As far as I know, you can't do this with TinyMCE through settings. You will need to write your own functions.
tinyMCE.init({
theme_advanced_buttons1 : "mybold",
setup : function(ed) {
ed.addButton('mybold', {
title : 'bold',
image : 'img/example.gif',
onclick : function() {
// Add you own code to execute something on click
ed.focus();
ed.selection.setContent("[b]" + ed.selection.getContent() + '[/b]');
}
});
}
});
Cool for two or three codes. A pain in the ass and long code if you are going to do it for every bbcode.
If you are not going to use none of TinyMCE advantages, you are better off writing your own code to manipulate <textarea> and avoid loading TinyMCE JS. It would be lighter.
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.
I am using the TinyMCE editor. I have a div element. When an edit link is clicked, I would like to replace it with a TinyMCE editor. I added the mceEditor class in the javascript file that will get executed when the edit link is clicked.But it is not working. TinyMCE editor works when I have a textarea during page load. Can someone please tell me how to do it. Thanks.
<textarea id='answer' rows='25' cols='100' class='span-15 mceEditor'></textarea><br />
I added it using tinyMCE.execCommand('mceAddControl',false,'elementId') and removed it using tinyMCE.execCommand('mceRemoveControl',false,'elementId')
Version 4 of tinymce now uses tinymce.execCommand('mceAddEditor', false, 'elementId'); and tinymce.execCommand('mceRemoveEditor', false, 'elementId');
I've implemented the YUI Editor and would like to apply a CSS to change the look of the text the user is working on inside the rich text editor.
I'm working with the yui_editor plugin for ruby on rails, but that doesn't mean that a generic answer wouldn't be welcome. It's even OK if you could just point me to the correct API section and/or an example on how to do this.
Thanks a lot!
In the meantime, I've found the answer myself: This is possible by using the css Configuration Attribute (YUI API).
To implement this with the yui_editor plugin on rails, I had to insert the css-attribute as seen on the following code snippet in config/yui_editor.yml:
editor_config_javascript: "
{
handleSubmit: true,
autoHeight: false,
css: 'YADA { FOO: BAR; }',
collapse: true,
toolbar: ...
}
That's it, works like a charm.