Adding TinyMCE on the fly - javascript

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');

Related

TinyMce - it is possible to disable Rich Text?

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

Summernote content coming with html tags

I am new to summernote text editor. I am trying to get the proper content from the summernote textarea, which infact coming with html tags.
I tried
<textarea class="summernote" id="summernote" ng-model="blog.content" ></textarea>
in my html page and getting the textarea content with,
$("#summernote").code();
it is fetching the content in
html tags. I want the content to be displayed without the html tags.
Thank you for the advice.
Use val() to get all what entered in textarea or text, So :
var content = $("#summernote").val()
in laravel, simple use
{!! $product->small_description !!}
instread of
{{! $product->small_description !}}
in blade file where you want to fetch the data
Use $().text() method to get plain text.
$("<div />").html($("#summernote").code()).text();
After a long time of searching , thought instead of trying that in getting summernote text editor value with plain text, why not try with the angular filter. So searched and got the filter which exactly does what I needed.
Here is the link which did my job.
angularjs to output plain text instead of html
I had the same problem, "fixed" it by using version 0.6.16 instead of the current stable version 0.7. HTML is rendering fine now without extra js code.

set Content of a TinyMCE textarea via HTML

To set a content of a TinyMCE textarea we use this code in JavaScript :
tinymce.activeEditor.selection.setContent('<strong>Some contents</strong>');
but how can I set the content via html, without JavaScript ?? I tried to use
<textarea>Some Contents</textarea>
but this is not working. Thanks
If you define TinyMCE like that:
tinymce.init({selector:'textarea'});
that code should do what you need:
<textarea>Some Contents</textarea>
Example here: http://jsfiddle.net/n9djp4u2/

jQuery Autosize plugin on dynamically added textarea elements

Hi :) I'm using jQuery Autosize plugin to resize some of my textarea elements dynamically. Everything is good but the problem is that when I add some textarea elements to the DOM dynamically, the autosize thing no longer works.
I initialize the plugin like so:
$(document).ready(function () {
$('textarea').autosize();
});
I tried to enable the plugin for my dynamically added textareas like:
myDynamicallyAddedTextarea.autosize();
Unfortunately, nothing happened. Can anybody help me with this?
sorry I can't comment yet, where are you adding this textarea at? can you post some of the code around the dynamic generation so that I can see when this stuff is getting called?
according to the docs, all you have to do is something like this for dynamically added elements...
function addTextArea() {
$(body).append($('<textarea class="test" />'));
$('.test').autosize();
});
//somewhere in code, but must be after the autosize plugin js has loaded
addTextArea();

Jquery Textarea Not Updating

I have a textarea that outputs HTML code. I am having difficulty getting my jsfiddle to work on my project.
It works perfectly in the JSfiddle but when I use it on my page it keeps outputting the original textarea value and not the updated one.
Should I be using a keypress to make it work or might there be a conflict with other JS code that I have?
http://jsfiddle.net/YPLeB/7/
I am using the same code on my page, but no luck.
<div id="update">
<textarea id="example">I cannot get the alert to show the new value</textarea>
<button id="btn">update</button>
</div>
Script:
$("#btn").click(function() {
alert($('#example').val());
});
I found out what the issue was. I was using nicEdit text editor that was not playing well with textareas. I switched editors and now it works using .val().
Thank you all for your help!

Categories