I have this tinyMCE init:
tinymce.init({
selector: "textarea",
theme: "modern",
readonly:1,
plugins: [
"advlist autolink lists link image charmap print preview hr anchor pagebreak",
"emoticons template paste textcolor colorpicker textpattern"
],
toolbar: "print",
readonly:1,
height : 500
});
but with readonly:1 but all the menubar is disabled and I would like to have
the print option activated.
It's no difficult to have print option active in menu and, otherwise, not allowed to edit the textarea.
Just add the plugin "noneditable" in the lists of your plugins.
Add also these two statements in your tinymice.init:
content_css : "css/noneditable.css",
noneditable_regexp: /\[\]/g,
Delete the readonly statement.
With the definition of regexp all text inside "[]" is not editable. You can use any character instead of [].
If you want to put into noneditable all the textarea, use :
$foo="<div class='mceNonEditable'>[". $foo."]</div>";
Related
I am using v5 of TinyMCE. By default, the style selected is 'Paragraph', as shown in this image :
[tinyMCE toolbar, as the user sees before he mades any format configuration]
But I know my users will all prefer to use 'Div' style. So I would like 'Div' to be selected by default. The toolbar should therefore appear like in this image :
[tinyMCE toolbar, as I want it to be configured by default]
Is it possible ?
I haven't find my answer in tinyMCE documentation.
Same question if you want for instead "bold" button to be selected by default, etc.
Thank you !
To replace the default <p> blocks with <div>, use forced_root_block: https://www.tiny.cloud/docs-3x/reference/Configuration3x/Configuration3x#forced_root_block/
tinymce.init({
// ...
forced_root_block : 'div'
});
To select the bold button by default, you could use execCommand: https://www.tiny.cloud/docs/api/tinymce/tinymce.editor/#execcommand
tinymce.init({
// ...
setup: function(editor) {
editor.on('init', function() {
this.execCommand('Bold');
});
}
});
Example fiddle combining both: https://fiddle.tiny.cloud/YShaab/1
I have a site, that when it loads, it initializes the tinyMCE, then, when you click a button, it opens a modal and while in that process, it brings some HTML into the modal.
then inside that modal, there is another button that should let you edit the content of the modal. and inside the DIV that holds the loaded HTML, there are divs with a class to make them editable by the tinyMCE.
the thing is, when you build the content of the modal and you save. everything is fine and it stores it with the format, because when you refresh the site, and load the content, everything is still with the correct format (bold,colors,etc). but then when you want to update the content, and you click the button to edit, I have an option to initialize again the tinyMCE and the contents editable zones loses their format.
now I suppose that the problem is when I initialize again the tinyMCE that causes the problem but how can I enable and disable the edition inside the modal when I click the button to make the edits?
I saw that there is an .on() and .off() functions, but I don´t understand well how to use them, is not clear enough in the documentation.
this is a sample of what I have.
<script>
var pathBotones = "<?=$pathBotones?>";
var modalEditor = {
mode: 'exact',
selector: '.zonaEditable',
menubar: false,
inline: true,
plugins: [
'link',
'autolink',
'lists',
'save'
],
toolbar: [
'undo redo | bold italic underline | fontselect fontsizeselect | link',
'forecolor backcolor | alignleft aligncenter alignright alignfull | numlist bullist'
],
valid_elements: 'strong,em,span[style],a[href]',
valid_styles: {
'*': 'font-size,font-family,color,text-decoration,text-align'
},
powerpaste_word_import: 'clean',
powerpaste_html_import: 'clean',
content_css: [
'//fonts.googleapis.com/css?family=Lato:300,300i,400,400i'
]
};
tinymce.init(modalEditor);
$(".edit-content").click(function(e) {
e.preventDefault();
//console.log($('.editOptions').css('display'))
if ($('.editOptions').css('display') === 'none') {
//this is supossed to enable the edition
tinymce.init(modalEditor);
} else {
console.log('NOOO se ve')
}
//this is supossed to disable the edition
$(".editOptions").slideToggle();
$(".deleteRowInfoBox").fadeToggle();;
});
</script>
You can use TinyMCE's APIs to set the mode on the editor to readonly.
https://www.tiny.cloud/docs/api/tinymce/tinymce.editormode/#set
The code would look something like:
tinymce.activeEditor.setMode('readonly');
...or...
tinymce.get('theEditor').setMode('readonly');
I am using summernote in my project and i want customize style button with "magic pen" icon. In this button you can set h1-h6 or quotes, code(pre tag)....
There is my summernote toolbar settings:
toolbar: [
['style', ['style']],
['style', ['bold', 'italic', 'underline', 'clear']],
['view', ['fullscreen', 'codeview']],
['help', ['help']]
]
first style setting is for "magic pen" button (first from left on toolbar), second style is for bold italic... button group (second from left on toolbar).
So is there some possibility customize first style button with "magic pen" icon?
I need remove some options from there... h1, h5, quotes, code...
On internet i was find some solutions which not work:
StyleTags options (not toolbar):
styleTags:
['p', 'blockquote', 'pre']
Or specify first 'style':
toolbar: [
['style', ['blockquote', 'pre']],
but without success can anybody help?
Not sure if you got sorted with this but had this issue today, Summernote documentation wouldn't be the best but this worked for me and might help someone else out in the future.
$(document).ready(function() {
$('textarea[data-content~=summernote-content]').summernote({
height: 400,
toolbar: [
['style', ['style']],
['font', ['bold', 'italic', 'underline', 'clear']],
['help', ['help']]
],
styleTags: ['p', 'h1', 'h2', 'h3', 'h4', 'h5'],
});
});
So you just define the style as normal in the toolbar tags but then below it you specify the actual attributes you wish to show.
I use custom format presets to apply bold / italic via the inline styles:
formats: {
bold: {inline: 'span', selector: 'span,a,sub,sup', styles: {fontWeight: 'bold'}},
italic: {inline: 'span', selector: 'span,a,sub,sup', styles: {fontStyle: 'italic'}},
}
After both of the formats are applied to the selected text, there's no possibility to turn off them: if a user clicks on the 'Bold' or 'Italic' button, it doesn't become 'unpressed' and the corresponding format is not removed. This problem occurs only when more than one word is selected.
Maybe there are some options to fine-tune TinyMce behavior when removing format?
(UPD):
TinyMCE Fiddle: http://fiddle.tinymce.com/BVfaab
Tested in Chrome 59.0.3071.104 for Linux.
On a form, I work with TinyMCE for editing textarea's.
Now I just want to offer the options "bold", "italic" and "underline" in TinyMCE.
Which settings should I do in the tinymce.init();?
See the tinymce fiddle here.
Here is the code:
tinymce.init({
selector: "textarea", // change textareas into tinymce editors
plugins: [], // no additional plugins needed
toolbar: "bold italic underline", // only those three buttons
menubar: false // no display of the top menubar
});