I previously posted this question JWYSIWYG or jHtmlArea within a Jquery Ui Tab about getting jHtmlArea to work inside jQuery Ui tabs.
I am now trying to get this same html editor to work inside the jQuery formtowizard plugin.
I am not sure if this is exactly the same problem or not. No errors are being thrown and the editor appears to load all buttons and its height and width correctly but the user is unable to type any text in the textarea.
I am generating the jHtmlArea like this...
$(function(){
$(".text-detail").htmlarea({ css: "/css/jHtmlAreaCustom.css",});
});
and then
$(document).ready(function() {
$("#addFaci").formToWizard({ submitButton: 'AddFaciSubmit' });
}):
Do I need to load the jHTMLArea from within a callback from the formToWizard script? I've tried for several hours and definetely need some guidance.
Thanks for your help.
Tim
The problem turned out to be jHtmlArea needed to be loaded in $(document).ready(function() { after the formtoWizard call.
Then jHtmlArea collapses onitself because it can't dynamically set it's height and width properties within a hidden container. Set these with jQuery CSS calls and your good to go!
Hope this helps someone else.
Related
I am trying to contenteditable attribute of summernote html editor pluging making false on page loading , but it doesnt affect.
Here My JS Code:
<script>
$(function(){
$('div#son_durum').children('.note-editor')
.children('.note-editing-area')
.children('.note-editable')
.attr('contenteditable',false);
});
</script>
What Can I Do Achive This?
Thanks
Why did you try to set contenteditable as false? Just leave it and don't initiate summernote on div#son_durum when your page is loading.
Or, do you want to toggle enable/disable state of summernote? A similar issue was already reported. See https://github.com/summernote/summernote/issues/1109
Using v0.8.2.
Here's my solution, though it's not perfect, especially if the developers change the html and or class names, but it works for what I need.
My MVC application has many summernote controls being dynamically added to a page, and each has an ID assigned to it. Some controls only display the image (upload) button, while others only display the text style buttons. For my image-only summernote controls I don't want the user to have the ability to type text, so I have to only disable the text-entry/image panel, not the whole control. This way I still allow the buttons to be used.
Here is my solution, and this works! Make sure this fires after the summernote control initialization.
var container = $('#summernote2').nextAll('div.note-editor:first').find('.panel-body');
if ($(container).length)
{
$(container).prop('contenteditable', 'false');
}
What's Happening?
Within my specific summernote control (id = summernote2), I locate the first div immediately below it with the specific class ('note-editor'). All of these are added dynamically to the page when the control is initialized. See the image below:
Then, using FIND, continue to work down the tree looking for the class 'panel-body', which is where the text is actually placed, highlighted in the image above.
Assuming I find it, then I change the contenteditable property to false. BAM!
There is probably more chaining that could be done, and perhaps more efficient methods but this works pretty neatly.
Why this way?
Because I have multiple controls on the page, and nothing directly linking my ID'd summernote DIV to all those other DIVs that are created as part of the initialization, I thought this was a good solution. Otherwise, how could I guarantee getting the correct panel-body class?
Good luck and let me know what you think! If this answers your question sufficiently, remember to check it as answered!
In a perfect world you'd think the developers would have made it easier. This should be all it takes, but no it doesn't work...:
$('#summernote2').summernote('contenteditable','false');
I'm making a web app using the CkEditor for some neat wysiwyg editors. On page load the page gets a couple of strings from a database using AJAX. How do I insert the strings into the div that is editable? I don't want to use a textarea because the inline editor looks much better with divs and require less work then.
I've tried the following scripts without success:
The first one tries to add the data to the div that becomes editable.
$('#awayList').append(data.boxOneCont);
And the second one I found here on stack overflow but that doesn't work either.
CKEDITOR.instances["awayList"].setData("Hej");
The connection with the db works perfectly, so the problem lies somewhere else.
Thanks in advance!
I solved it with this:
CKEDITOR.instances.editor1.setData( '<p>Some other editor data.</p>', {
callback: function() {
this.checkDirty(); // true
}
} );
I have a div that when clicked uses the jeditable jQuery plugin to do some sort of HTML replace which changes the div into a form that contains a textarea.
I want to attach the tinyMCE JS to all textareas on my site. The problem I have is that the textarea is created dynamically AFTER the tinymce has been applied to textareas.
Can anyone think how to attach some very simple wysiyyg text editor (preferable tinymce) to the textarea control once it is created by jEditable?
I'm using the latest jQuery library in a PHP app.
Cheers,
Billy
What you want seems not possible at first. The reason for this is the following:
Tinymce creates on initialization a content-editable iframe (NOT a textarea!) which will be used to edit html content. There are editor actions (i.e. save) which will write the Iframes content back to the initial html element (can be a div, textarea or anything else).
The problem I have is that the textarea is created dynamically AFTER the tinymce has been >applied to textareas.
But you can initialize the tinymce whenever you like (you need to use the mode 'modal' for this) - even AFTER the textarea is created dynamically.
Using the TinyMCE jQuery Plugin, I think you could do this:
$(function() {
$('div.editable_textarea')
.editable({ ... })
.click(function() {
$(this).find('textarea').tinymce();
});
});
I based that selector off the jEditable live demo.
I've got the following... http://jsfiddle.net/yUVF4/3/ Basically it's just a form which when the button is pressed a loading screen should appear using the javascript there and the resource I've added jquery.loader.js. However, It's not working and I can't seem to grasp why. Anyone got any ideas?
Just add div wrapper in the content parameter of the plugin, it works
content:'<div>Loading...</div>'
See jsfiddle
i write some html with JS into a div.
like this
$("#picdiv").html("<a rel='lightbox' href='pic.jpg'><img src='htumb.jpg'></a>");
it is just an example.
So, i have in $(document).ready Funcktion this code.
$('a[rel=lightbox]').fancybox();
but if i click on the link, a get to the page with picture... i know the Problem must be, i write the html with js, but i have no other option. So haw can I make fancybox works?
This is due to how jQuery works. The fancybox function will only work for current elements on the page and not ones dynamically added by javascript.
A quick fix might be to be modify the code as follows:
$("#picdiv").append($("<a rel='lightbox' href='pic.jpg'><img src='htumb.jpg'></a>").fancybox());
Not sure if the above will work, but the general idea is to ensure that any new elements created have the plugin applied.
solution
$('.picture_display').find('a[rel=lightbox]').fancybox();