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
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>
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);
});}
});
I'm using TinyMCE and wanting to display it in Spanish (es)
The TinyMCE version info is as follows
majorVersion : '3',
minorVersion : '3.9.2',
releaseDate : '2010-09-29'
The documentation says to download the language pack from here and copy the files to the appropriate
folders:
/tinymce/jscripts/tiny_mce/langs/
/tinymce/jscripts/tiny_mce/themes/advanced/langs/
/tinymce/jscripts/tiny_mce/plugins/<pluginname>/langs/
and also set
tinyMCE.init({
// General options
language: 'es',
mode: "textareas",
theme: "advanced",
relative_urls : false,
file_browser_callback : ekmUpload,
plugins: "safari,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,imagemanager,filemanager",
// Theme options
theme_advanced_buttons1: "newdocument,save,print,|,code,preview,fullscreen,|,bold,italic,underline,strikethrough,forecolor,backcolor,|,justifyleft,justifycenter,justifyright,justifyfull,|,formatselect,fontselect,fontsizeselect",
theme_advanced_buttons2: "image,template,|,cut,copy,paste,pastetext,pasteword,|,search,|,bullist,numlist,|,sub,sup,|,undo,redo,|,link,unlink,anchor,|,hr,removeformat,",
theme_advanced_buttons3: "",
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
theme_advanced_statusbar_location: "bottom",
theme_advanced_resizing: false,
content_css : " ",
editor_selector: "HTMLEditor",
height : '500',
width : '100%',
convert_urls : false,
inline_styles : true,
save_enablewhendirty: true,
save_onsavecallback: "SaveDocuments",
This answer here also gives the same advice.
But the language pack (zip file) only contains lang/es.js
Having does this, nothing appears in Spanish, the "format", "font-family" and "font-size" drop downs don't appear in Spanish.
What am i missing?
What you donwloaded is the language file for tinymce 4, you need the language pack for tinymce 3. You will get it here: http://www.tinymce.com/i18n3x/index.php?ctrl=lang&act=download&pr_id=1
See: http://www.tinymce.com/wiki.php/Configuration:language
example...
tinymce.init({
...
language: "sv_SE"
...
});
You have: language: 'es',
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();