We Keep Coding

I want to show the body text in another div in CKEditor

I want to show the body text in another div in CKEditor. I used the following code.
$(document).ready(function(){
setInterval(function(){
$('#rerg').empty();
$("body#contentfsf").clone().appendTo("#rerg");
},1000);
});
and
config.bodyId = 'contentfsf';
Preview should be in,
<div id="rerg">
</div>
It does not work.
Please provide me with a solution or with any other methods.

Am not too used to jquery, but with javascript this should do :
document.getElementById("rerg").innerHTML = valueToWrite;

$("body").on("keyup", "#contentfsf", function () {
$("#rerg).html($(this).val());
});
This will copy the content from the editor to the div.
You dont need:
setInterval function;
*not tested

Add text to Froala text editor

I'm trying to programatically input html into Froala text editor. Based on their documentation this should work:
$(function(){
$('#editor').editable("setHTML", "<p>My custom paragraph.</p>", false);
});
But when I reload page I only get empty space, no errors. This is binded to textarea with id #editor. If I use this code:
$(function(){
$('#editor').editable({inlineMode : false});
});
... then everything is ok.
Does anyone knows how to programatically input html into this editor.

You should try this :
$('#editor').froalaEditor('html.set', 'My custom paragraph.');
See the detail about froala method at this reference:
https://www.froala.com/wysiwyg-editor/docs/methods#html.set

For the users you are looking for v3 answers, You can add text in v3 by:
var editor = new FroalaEditor('.selector', {}, function () {
// Call the method inside the initialized event.
editor.html.insert('<p>My custom paragraph.</p>');
})
Also for if you want to replace the whole content then you can use set method
var editor = new FroalaEditor('.selector', {}, function () {
// Call the method inside the initialized event.
editor.html.set('<p>My custom paragraph.</p>');
})

Use both. First you have to create the editor, then you can set the HTML
$(function(){
$('#editor').editable({inlineMode : false});
$('#editor').editable("setHTML", "<p>My custom paragraph.</p>", false);
});

With the latest version of Froala this works fine
$("#froalaEditor")[0]["data-froala.editor"].html.set('This should work fine');

To append a text use html.insert
$("#editor").froalaEditor('html.insert','<p>new text to append</p>');

After inserting the HTML use "Sync"
$("#editor").editable("insertHTML", "123456", true);
$("#editor").editable("sync");

Just for note.
in HTML
<div id="froala-editor">
<p>something</p>
</div>
and in javascript
$(function() {
$('div#froala-editor').froalaEditor({
pastePlain: true
})
});

Try this:
$('#editor').froalaEditor('html.set', 'My custom paragraph.');
$('#editor').froalaEditor('undo.saveStep', 'My custom paragraph.');
Reference: https://github.com/froala/wysiwyg-editor/issues/1578

If you are using it with React js, here is how i did it... FroalaEditorComponent has an event object in it which has initialized as an event. here is the code example:
initialized: function () {
this.html.set(formik?.values?.body); // not working for me
this.html.set(`<h1>Hello!</h1>`); // working fine
console.log(this);
},

TinyMCE textarea can't edit

Here is the problem. In my php submission page, I have a form with multiple fields including a textarea which is currently using TinyMCE and I also have an option for duplicating existing form. The thing is I can't edit the 2nd editor that was duplicated but the editor appear in textarea place. However I can edit and save 1st editor. I am not sure if its a bug or just me doing something wrong? I tried to update TinyMCE as well but didn't work.. any idea?
function initTinyMCE() {
tinyMCE.init({
mode : "textareas", //mode : "exact", elements : "mytextarea"
theme : "simple"
});
}
initTinyMCE();
$(document).ready( function(){
$('a#addmore').live('click', function(){
//*clone the existing form and inserting form here*
initTinyMCE();
});
$('a#toSubmit').live( 'click', function() {
tinyMCE.triggerSave();
$('.editwork-form').submit();
});
});

I can't seem to get .clone() to work, nothing in the debug console either. However, my working solution is as follows, maybe this helps?
initTinyMCE();
$("#append").live("click", function() {
var ta_count = $("textarea").length;
var elem = document.createElement("textarea");
$(elem).attr("id", ta_count.toString());
$(elem).appendTo("#ta_container");
initTinyMCE();
});
function initTinyMCE() {
tinyMCE.init({
mode: "textareas",
theme: "simple",
theme_advanced_path: false
});
}​
Instead of .clone()ing the element, I'm just creating a new textarea and appending it to the container (using the count of all textareas on the page as it's ID to make it unique), then re-calling the tinyMCE initialiser.
Example jsFiddle

Make sure your textareas have different ids, otherwise there won't be a second editor instance! This is a crucial thing when creating tinymce editor instances.

Programmatically activating a custom TinyMCE button

I've got a lot of custom buttons on my TinyMCE toolbar, most of which open a dialog box with some further options in when you click them. This all works fine.
Here is an example of something in my tinyMCE_setup() function:
ed.addButton('link2', {
title: '{!link!}',
image: '../style/common/images/link_20x20.png',
onclick: function() {
replyBoxDialog('link', ed);
}
});
However, I want to be able to call these programatically, and faking a .click() on the button with jQuery won't cut it.
I've tried calling the function directly
replyBoxDialog('link',tinyMCE);
But no matter what I try as the second argument, I can't get the right object (so it fails when it's time to insert something into the editor, as it doesn't know what the editor is).
I've also had a try with various execCommand() calls, but I've no idea what to put in there.
Any clues?

All you have to do is to use a real editor object as paramter
var editor_instance = tinymce.activeEditor; // in case you just use one editor
var editor_instance = tinymce.get('my_special_editor_id'); // in case you have more than one editor
replyBoxDialog('link', editor_instance);

I've managed to make it work by creating a variable 'globalEd' at the top of the script and adding globalEd = ed; to tinyMCE_setup(), then I can call replyBoxDialog('dragndrop', globalEd);. This seems like a properly hacky way of doing things though, so I'd welcome any further advice.

jquery live data is not responsding to the DOM

I am using this jquery plugin for called tokeninput it's for autosuggestion when typing:
the code here generates the autosuggestion for the input box:
$("#input-auto").tokenInput("topicGet.php", {
theme: "facebook"
});
but when I try to append the input which uses the #input-auto it does not do the autosuggestion but it works when it's loaded on the page:
the code is here:
$('.topicEdit').live('click', function() {
$('#Qtopics').html('<input type="text" id="input-auto" />');
I'm trying to solve the problem, but I can't find anything, I also tried to put the live click on the .topicEdit, but it's still not working. :)) thanks

Looks like you're probably initializing the autosuggestion BEFORE you add the input into the DOM. You have to remember that jQuery is stupid, and only does things in the order that you tell it. When you initially 'generate' the autosuggestion, if it can't find it in the DOM at that moment, it won't do anything! So, to solve your problem, you'll want to do the generation of the autosuggest after you insert it into the DOM:
$('.topicEdit').live('click', function() {
$('#Qtopics').html('<input type="text" id="input-auto" />');
$("#input-auto").tokenInput("topicGet.php", {
theme: "facebook"
});
});
yay?

Calling tokenInput on page load when input-auto doesn't yet exist is your problem.
$('.topicEdit').live('click', function() {
$('#Qtopics').html('<input type="text" id="input-auto" />');
$("#input-auto").tokenInput("topicGet.php", {
theme: "facebook"
});
});

I'm not exactly sure what the problem is, but try using livequery plugin. You don't need to specify an event to it, just a function which will run for all current and future elements that match the selector.
Example:
$(".something").livequery(function () {
// do something with the element
}