How do I setup a debounce/delay to prevent Blazor updating model on every keystroke?
I have looked through TinyMCE docs but that feature seems to be deprecated. Somehow it seems deprecating something this important is unlikely, what's more likely is that I can't find it.
My current TinyMCE config
new Dictionary<string, object>{
{"menubar", false },
{"toolbar", "undo redo styleselect forecolor bold italic alignleft aligncenter alignright alignjustify outdent indent" },
{"toolbar_location", "top" },
{"toolbar_mode", "scrolling" },
{"statusbar",false },
{"placeholder", "Type here..."},
{ "content_style", "body { margin: 0px 3px 0px 13px; line-height:0.9; } "},
{ "height", "110"}
}
Editor call
<TinyMCE.Blazor.Editor #bind-Value=Value ScriptSrc="/js/tinymce/tinymce.min.js" Conf="#config" Inline="#Inline" />
Related
I have a configuration (I didn't want it to be wrapped in a paragraph) where I expect newlines in the editor to be submitted as
var richtexteditorConfig = {
selector: 'textarea.tinymce',
forced_root_block: "",
menubar: false,
inline: false,
remove_linebreaks: false,
force_br_newlines: true,
force_p_newlines: false,
convert_newlines_to_brs: true,
branding: false,
plugins: [
'link'
],
toolbar: [
'undo redo | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | numlist bullist | forecolor backcolor casechange permanentpen formatpainter removeformat link' ],
valid_elements: 'p[style],strong,em,span[style],a[href],ul,ol,li',
valid_styles: {
'*': 'font-size,font-family,color,text-decoration,text-align'
}
};
tinymce.init(richtexteditorConfig);
However when I submit the form using a frame it strips out those newlines. It keeps some stuff like bolding and colors but I always lose the newlines. Is there somemething magical I need to do, it needs to be submitted with teh rest of the elements and right now I am just doing:
dojo.require('dojo.io.iframe');
dojo.io.iframe.send({
url: 'MyUrl',
handleAs: "text",
method: 'POST',
form: dojo.byId(formid),
load: function(response, ioArgs){
eval(response);
return response;
},
error: function(response, ioArgs){
console.log('error sending ' + response);
return response;
}
});
seems like it is the
forced_root_block: ""
causing all the problems.
I am trying to reset the content inside tinymce editor to default on a button click.
Here is my current tinymce initialization code and I also have initialized to set default content when the editor loads up. On button click I want to run setDefaultContent() function, which is used in tinymce.init
tinymce.init({
// General options
selector: "textarea",
editor_selector : "mceEditor",
branding: false,
**init_instance_callback: "setDefaultContent",**
height : "300px",
width : "1000",
plugins: [
"advlist autolink lists link image charmap print preview anchor",
"searchreplace visualblocks code fullscreen",
"insertdatetime media table contextmenu paste"
],
toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
formats: {
alignleft: {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'myleft'},
aligncenter: {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'mycenter'},
alignright: {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'myright'},
alignfull: {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'myfull'}
},
content_style: '.myleft { text-align:left; } .mycenter { text-align:center; } .myright { text-align:right; } .myfull { text-align:justify; }',
forced_root_block: false
});
If you just want to clear the content use:
tinyMCE.activeEditor.setContent('');
Is it possible to change the back ground color of TinyMCE (I am not talking about editor). I am talking about this:
Do I need to overwrite the css from TinyMCE i.e. 'skin.min.css'? Or there is some other way as well.
That's how I am using TinyMCE right now:
tinymce.init({
theme: "modern",
selector: "#contentpage_0_content_0_txtAreaDetails",
plugins: [
"advlist autolink lists link image charmap print preview anchor",
"searchreplace visualblocks code fullscreen",
"insertdatetime media table contextmenu paste"
],
toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
editor_css: "/css/TinyMCE/mycontent.css",
paste_data_images: true,
content_css: "/css/TinyMCE/mycontent.css",
width: 665,
height: 330
}); // Tinymce END
I also tried to add
.mce-panel {
background-color: red; // just an example
}
in mycontent.css but it now working.
Yes, you need to overwrite skin.min.css.
You could optionaly create your own theme (just copy the default theme and apply your changes).
you can add this in your css file:
.tox.tox-tinymce * {background: red;}
Note: change red to any color you want, obviously.
When you copy and paste from a word document in to the tinyMCE editor sometimes there are unwanted <p> tags:
<p> </p>
<div class="starpasspro-example-question">
<p><strong>Example: Levels of strategy</strong></p>
<p>Microsoft is one of the world’s largest organisations, providing corporate solutions to businesses throughout the world to help them realise their fullest potential. At Microsoft, there are three levels of strategy as follows:</p>
</div>
<p> </p>
Here the code that generates I want to remove the <p> tags any way to do that ?
Add these Lines in your tinymce.init({ });
Example:
tinymce.init({
forced_root_block : "",
force_br_newlines : true,
force_p_newlines : false,
});
it will be helpful.
Add into your tinymce.yml file
forced_root_block : ""
force_br_newlines : true
force_p_newlines : false
Yes, this is possible. There is a secure way to remove all that html elements you want to removed (you may define what to keep). It is by using the tinymce config params paste_preprocess and a custom function strip_tags. Check it out here.
Add this to your functions.php file and the standard p-tags
tags will be removed by adding some parameters to the tiny_mce_before_init hook. If you want to see how it works, you can read further on this page: https://codex.wordpress.org/TinyMCE
////////////////////////////////////////////////////////////////////////
//////////REMOVE STANDARD <P> FROM TINYMCE EDITOR/////////////////////////
///////////////////////////////////////////////////////////////////////
function my_format_TinyMCE( $in ) {
$in['forced_root_block'] = "";
$in['force_br_newlines'] = TRUE;
$in['force_p_newlines'] = FALSE;
return $in;
}
add_filter( 'tiny_mce_before_init', 'my_format_TinyMCE' );
USE HtmlEncode="false" in BoundField
<asp:BoundField DataField="PostContent" HtmlEncode="false" />
Thanks to Prahalad Gaggar!
I had the same problem and I solved it by reading this topic: https://stackoverflow.com/a/22397116/14491024
here is my code with each time adding <p<br/<br/</p so annoying)
function HTMLeditor( parameters) {
$('#exampleModalCenter').modal('show');
tinymce.init({
height: 500,
selector: ".modal-body",
theme: 'modern',
plugins: [
'advlist autolink lists link image charmap print preview hr anchor pagebreak',
'searchreplace wordcount visualblocks visualchars code fullscreen',
'insertdatetime media nonbreaking save table contextmenu directionality',
'emoticons template paste textcolor colorpicker textpattern imagetools'
],
toolbar1: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
toolbar2: 'print preview media | forecolor backcolor emoticons ',
image_advtab: true,
setup: function (editor) {
editor.on('init', function (e) {
editor.setContent(parameters);
});
}
});
}
And here is with problem SOLVED:
function HTMLeditor( parameters) {
$('#exampleModalCenter').modal('show');
tinymce.init({
height: 500,
selector: ".modal-body",
theme: 'modern',
plugins: [
'advlist autolink lists link image charmap print preview hr anchor pagebreak',
'searchreplace wordcount visualblocks visualchars code fullscreen',
'insertdatetime media nonbreaking save table contextmenu directionality',
'emoticons template paste textcolor colorpicker textpattern imagetools'
],
toolbar1: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
toolbar2: 'print preview media | forecolor backcolor emoticons ',
image_advtab: true,
//remove <p><br /><br /></p>
forced_root_block: "" ,
force_br_newlines: true,
force_p_newlines: false,
setup: function (editor) {
editor.on('init', function (e) {
editor.setContent(parameters);
});
}
});
}
I tried a several methods to set the width of the tinymce textarea.
My 1st attempt:
height: '200px',
width: '220px' // inside tinyMCE.init({
In the 2nd attempt:
<textarea name="editorial" cols="40" rows="20" id="editorial" style="width: 40em; height: 20em"><?=$row['editorial']?></textarea>
But still, I am not able to get the width as per my requirement.
Any ideas please?
I think the problem may be with the toolbars in your TinyMCE init function.
Try this example, and let me know if it works for you?
in your HTML:
<textarea name="editorial" class="test" cols="40" rows="20" id="editorial" > editorial</textarea>
then use this tinyMCE.init in your JavaScript:
tinyMCE.init({
// General options
mode: "textareas",
theme: "advanced",
width: "300",
height: "200",
// Theme options
theme_advanced_buttons1: "bold,italic,underline,|,justifyleft,justifycenter,justifyright,justifyfull",
theme_advanced_buttons2: "",
theme_advanced_buttons3: "",
theme_advanced_buttons4: "",
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
theme_advanced_resizing: false,
// Selector
editor_selector: "test",
});
Does this work for you?
You can use this way..
tinymce.init({
selector: "textarea",
plugins: [
"advlist autolink autosave link image lists charmap print preview hr anchor pagebreak spellchecker",
"searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
"table contextmenu directionality emoticons template textcolor paste fullpage textcolor"
],
toolbar1: "bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | styleselect formatselect fontselect fontsizeselect",
toolbar2: "cut copy paste | bullist numlist | outdent indent blockquote | undo redo | anchor | forecolor backcolor",
menubar: false,
toolbar_items_size: 'small',
height: "100",
width:500,
});
If you want to set width then just add width:300
Note: Do not use the single or double qoutes like width:'300' or width:"300"
The funny thing is width and heigth are getting set in the style property of the iframe.
What i do to set my width according to my init setting is to modify the style property of the iframe:
// ed is the editor instance
var frameid = frameid ? frameid : ed.id+'_ifr';
// get iframe
var current_iframe = document.getElementById(frameid);
if (current_iframe && !window.opera){
styles = current_iframe.getAttribute('style').split(';'); //width and heigth
for (var i=0; i<styles.length; i++) {
// case width setting is found - remove it
if ( styles[i].search('width:') == 1 ){
styles.splice(i,1);
break;
}
current_iframe.setAttribute('style', styles.join(';')); // write styles back to the iframe
current_iframe.width = ed.getParam('width'); // set the width i already set in the configuration
}