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);
},
Related
i use javascript made a function that every time i click button "add one more" button, html page will add another group of html elements, which i need to includes tinymce text area, but I cannot manage to do it.
here is part of my code,
<script>
$(document).ready(function (e) {
var html = '<textarea class="tinymce" name="CCV_product_full_description[]" id="childccv-product-full-description" />';
...
I defined tinymce in another js file and included in this html file, but it not works some how, i need some help :)
in another js file
tinymce.init({
selector:"textarea.tinymce"
});
here is the function for add another group of html elements
$("#add").click(function (e) {
$("#container").append(html);
});
It looks like you are trying to initialize the editor on DOM elements that don't yet exist.
Also, if you are trying to dynamically add several instances of TinyMCE, you need to remove TinyMCE first before you can call it again.
$("#add").on('click', function (e) {
e.preventDefault()
$("#container").append(html);
tinymce.remove()
tinymce.init({
selector:".yourSelectorName"
});
});
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
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.
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
}
i'm using nicedit js which is is a WYSIWYG editor in my textarea to view html doc, but it still editable, how to set this nicedit to readonly mode, i try to search from its doc but unable to find it, do any one have experience using nicedit,
thanks in advance
Here is a helpful jQuery solution that I use with nicEdit:
jQuery('.nicEdit-main').attr('contenteditable','false');
jQuery('.nicEdit-panel').hide();
You can simply change it back to 'true' to make it editable again.
Note: I would consider toggling the div background-color along with this solution.
finally the solution is
var myNicEditor = new nicEditor();
myNicEditor.addInstance('templateContent');
nicEditors.findEditor("templateContent").disable();
With the statement
nicEditors.findEditor("TextArea").disable(); niceditor is non editable
But
nicEditors.findEditor("TextArea").attr("contentEditable","true");
does not make it editable again
for me only this worked:
document.getElementsByClassName('nicEdit-main')[0].removeAttribute('contentEditable');
I'm going to guess it is a WYSIWYG editor.
Try this...
document.getElementById('nicedit').removeAttribute('contentEditable');
function edit(){
a = new nicEditor({fullPanel : true}).panelInstance('area5',{hasPanel : true});
}
function no_edit(){
a.removeInstance('area5');
}
nicEditors.findEditor("TextArea").disable();
above statement will disable the TextArea.
For enabling the TextArea, update the nicEdit.js (see below what to update)
search for disable: function () { this.elm.setAttribute("contentEditable", "false"); }
next to this code add the below code
, enable: function () { this.elm.setAttribute("contentEditable", "true"); }
and in your JavaScript call nicEditors.findEditor("TextArea").enable();