I have a tinymce editor on a textarea of my page. I am initializing it in READONLY mode by setting readonly attribute as true. Please refer init below:
tinyMCE.init({
mode : "exact",
elements : "p_desc",
debug : false,
nowrap : false,
cleanup_on_startup : true,
fix_nesting : true,
readonly : true,
force_br_newlines : true,
force_p_newlines : false,
gecko_spellcheck : true,
forced_root_block : '' ,
...
setup : function(ed) {
ed.onKeyUp.add(function(ed) {
textCounter('p_desc','Charcount',4000);
});}
});
Now depending upon the value of a hidden input field on the same page, i am enabling edit using tinyMCE.get('p_desc').getBody().setAttribute('contenteditable', true);
The editor starts working in editable mode but the onKeyUp event defined in setup is still not working.
Someone please help.
You could try
tinyMCE.init({
readonly : true,
...
setup : function(ed) {
if (!ed.getParam('readonly')) ed.onKeyUp.add(function(ed) {
textCounter('p_desc','Charcount',4000);
});}
});
Related
I have this
tinyMCE.init({
// General options
selector: 'textarea',
forced_root_block: "",
theme: "silver",
paste_text_sticky: true,
paste_text_sticky_default: true,
plugins: "paste,autolink,contextmenu,fullscreen,nonbreaking,template",
//plugins: "wordcount,paste,autolink,advlink,fullscreen,nonbreaking,template,inlinepopups,style",
// Theme options
//theme_advanced_buttons1: "bold,italic,underline,strikethrough,|,undo,redo,|,justifyleft,justifycenter,justifyfull,|,link,unlink,|,fullscreen",
//theme_advanced_buttons2: "cut,copy,paste,|,cleanup,removeformat,|,bullist,numlist,outdent,indent,hr,charmap",
//theme_advanced_buttons1: "cut,copy,paste,removeformat,|,undo,redo,|,bullist,numlist,outdent,indent,|,formatselect,bold,italic,underline,forecolor,backcolor,|,justifyleft,justifycenter,justifyfull,|,link,unlink,|,fullscreen",
theme_advanced_buttons1: "cut,copy,paste,removeformat,|,undo,redo,|,bullist,numlist,outdent,indent,|,bold,italic,underline,|,fullscreen",
//theme_advanced_blockformats: 'p,h1,h2,h4,h4,h5,h6',
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
//theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing: true,
theme_advanced_path: false,
// Example content CSS (should be your site CSS)
selector: "textarea",
content_css: "/css/admin.css",
setup : function (ed) {
ed.on('click', function () {
new_value = tinymce.activeEditor.getContent()
alert(new_value);
new_value = new_value.replace(/,/g, "☀");
alert(tinymce.DOM.getAttrib(ed,"data-hidden"));
hidden_Field = tinymce.DOM.getAttrib(ed,"data-hidden");
$("#" + hidden_Field).val(new_value);
});
},
});
How do I get the value of the data-hidden attribute of the textarea that was filled in. tinymce.DOM.getAttrib(ed,"data-hidden"); isn't find anything as hidden_Field is, set when I do the alert. I am guessing Tinymce is ignoring it but how do I stop it from ignoring the attributeo
Thanks
Trying to remove html elements when I copy paste in Tinymce. This code below removes html from web browsers, but it doesn't work when I copy paste text from PDF files. How do I remove junk from PDF files?
<script>
tinymce.init({
plugins : 'paste',
paste_as_text: true,
paste_remove_styles_if_webkit: true,
paste_enable_default_filters : true,
paste_block_drop : false,
paste_retain_style_properties : "none",
paste_strip_class_attributes : "all",
paste_remove_spans : true,
cleanup_on_startup : true,
fix_list_elements : false,
fix_nesting : false,
fix_table_elements : false,
paste_use_dialog : true,
enter code here` paste_auto_cleanup_on_paste : true,
paste_preprocess : function(pl, o) {
// Content string containing the HTML from the clipboard
var str = o.content;
var ta = document.createElement("textarea");
ta.innerHTML = str.replace(/</g,"<").replace(/>/g,">");
o.content = CleanWordHTML(ta.value);
},
paste_postprocess : function(pl, o) {
}
});
</script>
Fancybox 1.3.4 JS came with my Wordpress theme, Gridlocked. Everything works properly, but the lightbox popup is too big for the screen. I'd like the image to shrink if needed to always fit on screen.
Looking at the Fancybox site instructions, it seems I want to set "autoscale:true" to fix this, either in PHP or in the JS file itself. The javascript file that came with the theme already has this set to true, but it's not working. I don't know where in all the theme php files I should try to include the argument. Any suggestions?
The initialization of fancybox is done in jquery.custom.js.
You can find following lines there:
function tz_fancybox() {
if(jQuery().fancybox) {
jQuery("a.lightbox").fancybox({
'transitionIn' : 'fade',
'transitionOut' : 'fade',
'speedIn' : 300,
'speedOut' : 300,
'overlayShow' : true,
'autoScale' : false,
'titleShow' : false,
'margin' : 10,
});
}
}
tz_fancybox();
Change to:
function tz_fancybox() {
if(jQuery().fancybox) {
jQuery("a.lightbox").fancybox({
'transitionIn' : 'fade',
'transitionOut' : 'fade',
'speedIn' : 300,
'speedOut' : 300,
'overlayShow' : true,
'autoScale' : true,
'titleShow' : false,
'margin' : 10,
});
}
}
tz_fancybox();
Has anyone successfully used both libraries together? I can't seem to place the code in the properly sequence to get them to work together.
According to your comment, you are doing this :
jQuery.noConflict(
$(document).ready(function () {
$('.fancybox-media').fancybox({
openEffect : 'none',
closeEffect : 'none',
helpers : {
media : {}
}
});
$(".fancybox").fancybox({
openEffect : 'none',
closeEffect : 'none'
});
});
);
... try this instead :
jQuery.noConflict();
jQuery(document).ready(function($) {
$('.fancybox-media').fancybox({
openEffect : 'none',
closeEffect : 'none',
helpers : {
media : {}
}
}); // first fancybox
$(".fancybox").fancybox({
openEffect : 'none',
closeEffect : 'none'
}); // second fancybox
}); // ready
Have you tried using jquery's noConflict() ? Since you are using two different libraries, it might be causing error. Using jQuery.noConflict() function might help.
I have initialised TinyMCE as follows. I want to force line breaks when user presses enter and not the paragraphs. I'm trying following, but not working. I'm using TinyMCE version 3_3_8.
tinyMCE.init({
mode: "exact",
theme: "advanced",
elements: "textAreaId",
cleanup: false,
theme_advanced_toolbar_location: "",
theme_advanced_buttons1: "",
theme_advanced_buttons2: "",
theme_advanced_buttons3: "",
height: 200,
width: 300,
forced_root_block : false,
force_br_newlines : true,
force_p_newlines : false,
oninit: InitPosition
}); //init ends
I tried to define forced_root_block : "", but still it is not working.
What am I doing wrong?
Simply add forced_root_block : false
Or if you want a wrapper: forced_root_block : 'div',
Works like a charm!
Instead try:
force_p_newlines : false,
force_br_newlines : true,
convert_newlines_to_brs : false,
remove_linebreaks : true,
I faced the same situation with TinyMCE 4. All my "Enter" (keyboard) resulted in a new <p> </p> injected.
I didn't want to use forced_root_block : false so I figured something out in the tinymce.init function (each empty paragraph will be cleaned directly):
setup : function(editor) {
editor.on('PostProcess', function(ed) {
// we are cleaning empty paragraphs
ed.content = ed.content.replace(/(<p> <\/p>)/gi,'<br />');
});
}
https://www.tinymce.com/docs/configure/integration-and-setup/#setup
https://www.tinymce.com/docs/api/class/tinymce.editor/#postprocess
What worked for me was:
tinymce.init({
...
force_br_newlines : true,
force_p_newlines : false,
forced_root_block : ''
});
Each linebreak is producing br tag with these settings.
SOURCE: http://www.tinymce.com/wiki.php/Configuration3x:force_br_newlines
The "forced_root_block : false" option works fine for TinyMCE 4.0.
Insert in theme functions.php the following code:
add_filter( 'tiny_mce_before_init', 'my_switch_tinymce_p_br' );
function my_switch_tinymce_p_br( $settings ) {
$settings['forced_root_block'] = 'br';
return $settings;
}
TinyMCE On Mozilla Firefox adds <div> instead <br> or <p>.
I found the solution:
Open Mozilla Firefox and put in the address:
about:config
Search the option and turn false:
editor.use_div_for_default_newlines
in tinyMCE 5 I needed to add 1 extra parameter
tinymce.init({
...
valid_elements: 'br',
force_br_newlines : true,
force_p_newlines : false,
forced_root_block : ''
});
Just add
force_br_newlines : true,
force_p_newlines : false,
forced_root_block : false,
anywhere in tinymce.init