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.
Related
I need to have the raw/text format from an tinyMCE editor.
tinyMCE.activeEditor.getContent({format: 'raw'})
will do the job, but I have 2 editors in the same page (with different ids of course).
I need to count characters on window.onload, but at this moment i have no editor focused.
tinyMCE.get('my_editor').getContent()
can do the job but it doesn't take any parameters to format the output, it only returns html.
How can I get the raw content of a tinyMCE editor by id?
There are likely two issues at play here...
TinyMCE is likely not fully initialized when the window's onload event fires.
Trying to use TinyMCE APIs before the editor is initialized simply won't work. Here is a TinyMCE fiddle that shows how to fire code as soon as the editor is loaded using TinyMCE's init callback:
http://fiddle.tinymce.com/5pgaab/2
If you fire code at the correct time, TinyMCE's get() API uses the ID of the textarea to identify a specific editor instance. What is even easier is the init callback in the demo fiddle automatically gets access to the editor instance via a variable TinyMCE passes in to the function so that editor instance can be used to call getContent() without the need to first locate the editor.
EDIT: If you just want the text characters (no HTML tags) you can use a different format parameter in the getContent() call:
editor.getContent({format: 'text'})
Here is an updated example: http://fiddle.tinymce.com/5pgaab/3
On the website I have form which is generated from ipresso. I'd like to style agreement to hide this content and after click I'd like to show it. But where I can find names of classes, id etc.? I'd like to add button "hide/show" which will hide or show content inside form.]
You can solve the problem using jQuery toggle class just add jquery to your website if not present
$("#button").click(function(){
$("#target_div").toggle();
});
based on your requirement set the initial css for the div to display:none if it is to be hidden initially.
In browser on the page generated by ipresso right-click on an element that you would like to change and select option Inspect-Element/Inspect. In the source code your form should have an id/class which you then would use in jQuery as selectors, in a way that I describe below.
$("#toggle-button").click(function(){
$("your-form").toggle();
});
OR
$("#hide-button").click(function(){
$("your-form").hide();
});
$("#show-button").click(function(){
$("your-form").show();
});
If the elements are always generated with different ids/classes on every refresh (I highly doubt that) another thing to do is to use more descriptive css selectors which rely on the structure of the html tags staying consistent. Again, you will be able to find them using the Inspect/Inspect-element found in most browsers. It is a workaround, but not something I would recommend doing since if the structure changes, you will have to edit in more than one place.
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 have an web application which displays data in text boxes/textareas (tonnes of them).
Changing this web application to use <div>s is really out of the question as it would cost more than the gain of implementing ACE.
I have tried to create an example which would load the ACE editor inside a FancyBox when clicking on the textarea/text box.
My example is here: http://jsfiddle.net/espenfjo/tHqGd/5/
The problem is however that it doesn't seem like the ACE javascript can find the new this.content.
edit: Of course.. other solutions to how to make fancy text boxes/textares with ACE would also be very welcome.
I went by using $(".fancybox-inner")[0] instead of using an own <div> for this.
Like this: http://jsfiddle.net/espenfjo/tHqGd/8/
Now I can click a textarea (or whatever really), and get a fancybox with the ACE editor updating the textarea.
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.