I am using TinyMCE 4.6.0. When I add the table plugin and use it in toolbar, it doesn't show when I add it in the editor, The cursor does go down indicating activity, but nothing shows!
Try This
tinymce.init({
selector: '.textEditor',
plugins: "advlist lists table paste textcolor colorpicker tabfocus link preview",
toolbar: "table fontsizeselect bold italic underline forecolor backcolor bullist numlist link preview code", imagetools_toolbar: "rotateleft rotateright | flipv fliph | editimage",
menubar: false,
toolbar_items_size: 'large',
min_height: 500,
max_height: 800,
convert_newlines_to_brs: false,
statusbar: false,
relative_urls: false,
remove_script_host: false,
language: 'en',
});
Based on your answer to my original comment keep a few things in mind...
When you insert the table does the right HTML get placed in the editor? If you enable the code plugin you should be able to see the HTML source that TinyMCE is trying to render. If the HTML for the table is there then the plugin did its job.
Assuming the HTML is there you need to determine why it is not visible. You have multiple ways to pass CSS into TinyMCE and that CSS will impact how things look in the editor.
Lastly, look at the configuration options for the table plugin itself. There are some that impact how a table is visualized in the editor such as this one: https://www.tiny.cloud/docs-4x/plugins/table/#table_grid.
Related
So on the website I am designing I have created a cms and one of the things I want to allow people to do is edit the code examples on page (it's an educational website that allows teachers to sign up), I am using TinyMCE as the editor. However, when I'm testing it I notice that if I go to change the example to something like:
alert("Hello nstudent ");
document.write("Hello Student");
it will show up on the page with them side by side with a <br/> tag between them. Please see this screenshot showing what I mean
enter image description here.
Is there a way to stop TinyMCE from adding the <br/> tag and just put them on a new line like I'm wanting?
This is how I have set it up:
tinymce.init({
selector: "textarea",
force_br_newlines : false,
force_p_newlines : false,
forced_root_block : '',
invalid_elements:"div",
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"
});
I have spent ages trying to find a solution but nothing seems to be working so any guidance would be greatly appreciated
You likely need to clarify your expectations of the code you want to render to your web site. TinyMCE is an HTML editor so when you ask it to give you content it will give you HTML - it is odd you are using an HTML editor but stating you don't want HTML.
Based on how you have TinyMCE configured (specifically forced_root_block : '') pressing the ENTER key inserts the <br> tag. If you did not have that setting each press of the ENTER key inserts a new block / paragraph (<p></p> by default).
As you are using an HTML editor what are you wanting the editor to do when you press the ENTER key? Moving to a "new line" is either a new block or a line break. What are you wanting TinyMCE to do if not one of these HTML constructs?
I have set TinyMCE to read only as below All I want is the Textarea to be read only
<script>
tinymce.init({
readonly : 1,
selector: "#editor",
plugins: "image lists searchreplace fullscreen hr print preview " +
"anchor code save emoticons directionality spellchecker pagebreak insertdatetime template table",
toolbar:
"| print "
});
</script>
I have even tried to make the textarea readonly but this also did not prevent editing.
The code I posted works but also prevents the print button from working. Any way around this as I want just the print button to work?
TinyMCE's readonly mode works by disabling the Editor itself. For the editor to truly be in a read-only mode, toolbar and menu items would have to be disabled to prevent them from changing the content.
However, it is still possible to trigger TinyMCE's print command programmatically while the Editor itself is in readonly mode.
I've created a Tiny Fiddle demonstrating one way to do this, using Tiny's execCommand API:
http://fiddle.tinymce.com/iOgaab/1
I had the same problem a few days ago, I made a solution using JQuery by doing:
tinymce.init({
readonly : 1, // It will block my buttons :(
// But....
setup: ( function ( editor ) {
// Fired when the editor skin has been loaded.
editor.on('SkinLoaded', function(){
// Change Toolbar styles
$(".tox-toolbar-overlord").first().removeClass('tox-tbtn--disabled');
$(".tox-toolbar-overlord").first().attr( 'aria-disabled', 'false' );
// And activate ALL BUTTONS styles
$(".tox-toolbar__group button").removeClass('tox-tbtn--disabled');
$(".tox-toolbar__group button").attr( 'aria-disabled', 'false' );
})
})
});
NOTE: I just use the full screen button and print,
Sorry 3 years ago I didn't know about this wonderful tool :D
When I copy some text on websites it copies also html tags and after inserting into textarea with tinymce I get the same copy text. For example, If I select a text and copy it with black background I will get it in the textarea too. I've found the function which strip html tags setContent(html, {format: 'raw'});, but I don't know in which place I have to use it. Who can help to fix it?
Use the paste plugin with paste_as_text: true
tinymce.init({
selector: '#mytextarea',
plugins: 'paste',
paste_as_text: true,
});
Example: https://jsfiddle.net/user2314737/bcu1dcsx/
I am using the TinyMCE Deluxe module for Orchard to support additional editing options for a site. One of the things my client needs is the ability to do text alignment, identical to how Word works. I saw TinyMCE has a utility does support these options as part of the "Core" set of controls (see here), but when I try to edit orchard-tinymce.js to support core, I just start getting JS errors and the toolbar doesn't show up.
Any suggestions on how to add in the alignment options?
EDIT
Here is my orchard-tinymce.js file (located in /Modules/TinyMceDeluxe/Scripts):
$(document).ready(function () {
tinyMceDeluxe = new TinyMceDeluxe.Orchard();
// 1st arg is an array of plugin names. See plugin link above for full list of available plugins
// 2nd arg is an options object; also see TinyMce documentation for details on all available options.
tinyMceDeluxe.init(['pagebreak', 'paste', 'table', 'template', 'syntaxhl'], {
theme: "advanced",
mode: "specific_textareas",
editor_selector: "tinymce",
plugins: "fullscreen,autoresize,searchreplace,mediapicker,inlinepopups,-table,-pagebreak,-template,-paste,-syntaxhl",
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
theme_advanced_statusbar_location: "bottom",
theme_advanced_resizing: "true",
//theme_advanced_buttons1: "search,replace,|,cut,copy,paste,|,undo,redo,|,link,unlink,charmap,emoticon,codeblock,|,bold,italic,|,numlist,bullist,formatselect,fontselect,fontsizeselect,|,styleselect,|,forecolor,backcolor",
theme_advanced_buttons1: 'core',
theme_advanced_buttons2: "mediapicker,|,tablecontrols,|,hr,removeformat,visualaid,|,visualchars,template,blockquote,pagebreak,|,alignleft,aligncenter,alignright,alignjustify,|,syntaxhl,code,fullscreen",
theme_advanced_buttons3: "",
convert_urls: false,
template_external_list_url: "/modules/tinymcedeluxe/scripts/samples/tinymce_template_list.js",
// content_css sets the path to your site's main .css file. The styles from this file are imported into a droplist in the TinyMce editor.
// TinyMceDeluxe sets this path automatically to the /Styles/custom.css file in your site's theme, but you can override the path by declaring it here:
//content_css: '/path/to/your/stylesheet.css',
valid_elements: "*[*]",
// shouldn't be needed due to the valid_elements setting, but TinyMCE would strip script.src without it.
extended_valid_elements: "script[type|defer|src|language]"
});
});
I comment out theme_advanced_buttons1 which has a number of specific ones and changed it to just 'core' instead. When I do this, I get an error in tiny_mce.js on line one that says: "Uncaught TypeError: Cannot read propery 'Button' of undefined."
After digging a bit to answer Thariama's question, I found this page on the TinyMCE website. I had been using buttons of "alignleft", "alignright" (and so on) for the alignment controls which I had seen elsewhere on their site, but it turns out the real names were "justifyleft", "justifyright", etc. Changing it to those gave me all the alignment options I needed.
I'm using N2CMS which in turn uses TinyMCE to edit HTML content.
what i need to do is disable the TinyMCE HTML validation completely.
Its stripping out anything out that doesn't adhere to its settings.
If I add a custom attribute <a href="{0}" test="tester1" /> it just removes it the custom attribute!
also, it always add <p> tags around every bit of HTML content.
how can i disable the validation?
any help is very much appreciated.
to resove this, add these into the tinyMCE settings, or init
cleanup_on_startup: false,
trim_span_elements: false,
verify_html: false,
cleanup: false,
convert_urls: false
There are a relatively large number of TinyMCE options related to cleaning up and validating HTML.
The valid_elements or extended_valid_elements option can definitely help you with custom attributes:
extended_valid_elements: "a[href|test]",
That option would specifically allow href and test attributes on anchor tags per your example.
As far as your second question is concerned, could you please clarify? Are you asking how to avoid escaping HTML code that is pasted into the WYSIWYG editor or are you asking how to avoid wrapping text in paragraph or div tags?
another solution,
settings:
verify_html:false,
fix_table_elements:false,
schema:'html4',
invalid_elements:'',
valid_elements:'[]',
valid_children: '[]',
and I'm saving the html content to the hidden field by calling
tinymce.activeEditor.getContent({format: 'raw'})
this helps to prevent any html fixes
This is how I remove all sanitisation:
valid_elements: '*[*]',
plugins: "fullpage"
The valid_elements directive allows all elements and all of their attributes.
The fullpage plugin preserves the <html>,<head> tags etc.
To stop TinyMCE wrapping everything in <p> tags;
force_br_newlines: false,
force_p_newlines: false,
forced_root_block: '',
Those tags are usually paragraphs or divs. They are essential for every rte. Tinymce puts them around every bit of html because it needs to in order to for example be able to style passages of text.