Related
I'm trying to create an application. Where I'm using tinymce as editor. In the file panel, I don;t want to show new document. Corrently it's rendering:
But I just want to render it with thse two options:
Can anyone help me with it?
Here is my related config:
plugins: 'print preview ...',
menubar: 'file edit ...',
thanks.
Per the documentation if you want to control what you see on each discrete menu you have to provide those choices explicitly:
https://www.tiny.cloud/docs/configure/editor-appearance/#menu
The defaults are:
menu: {
file: { title: 'File', items: 'newdocument restoredraft | preview | print ' },
edit: { title: 'Edit', items: 'undo redo | cut copy paste | selectall | searchreplace' },
view: { title: 'View', items: 'code | visualaid visualchars visualblocks | spellchecker | preview fullscreen' },
insert: { title: 'Insert', items: 'image link media template codesample inserttable | charmap emoticons hr | pagebreak nonbreaking anchor toc | insertdatetime' },
format: { title: 'Format', items: 'bold italic underline strikethrough superscript subscript codeformat | formats blockformats fontformats fontsizes align lineheight | forecolor backcolor | removeformat' },
tools: { title: 'Tools', items: 'spellchecker spellcheckerlanguage | code wordcount' },
table: { title: 'Table', items: 'inserttable | cell row column | tableprops deletetable' },
help: { title: 'Help', items: 'help' }
}
So if you only want 2 items on the file menu you would have to state that explicitly within the broader menu option:
file: { title: 'File', items: 'preview | print ' },
Here is a TinyMCE Fiddle showing this in action: https://fiddle.tiny.cloud/hYhaab
I search a solution to add automatically a "rel-attribute" to every image which is added in the TinyMCE 5 editor. So the html tag should look like:
<img class="imageborder" src="https://xy.jpg" rel="lightbox" width="500" height="333" />
I've tried it like that, but it doesn't get added. This is the JSFiddle.
tinyMCE.init({
selector: '#myTextarea',
plugins: 'code image autolink link lists charmap print preview textcolor',
toolbar: 'code image link | undo redo | insert | ',
menubar: false,
min_height: 300,
image_class_list: [
{ title: 'imageborder', value: 'imageborder' },
],
image_rel_list: [
{ title: 'lightbox', value: 'lightbox' },
],
setup: function (ed) {
ed.on("keyup", function () {
$('#preview').html(tinymce.activeEditor.getContent());
});
}
});
You can get the img element on NodeChange event.
Doc: https://www.tiny.cloud/docs-4x/advanced/events/#nodechange
Jsfiddle: https://jsfiddle.net/aswinkumar863/L48jdqzs/
tinyMCE.init({
...
setup: function(ed) {
ed.on("keyup", function() {
$('#preview').html(tinymce.activeEditor.getContent());
});
ed.on('NodeChange', function(e) {
e.element.parentNode.querySelectorAll('img:not([rel=lightbox])').forEach(img => {
img.setAttribute('rel', 'lightbox');
});
});
}
});
You could add the rel to the link instead of the image like this:
tinyMCE.init({
selector: '#myTextarea',
plugins: 'code image autolink link lists charmap print preview textcolor',
toolbar: 'code image link | undo redo | insert | ',
menubar: false,
min_height: 300,
image_class_list: [
{ title: 'imageborder', value: 'imageborder' },
],
rel_list: [
{title: 'lightbox', value: 'lightbox'},
{title: 'Other rel', value: 'otherrel'}
],
setup: function (ed) {
ed.on("keyup", function () {
$('#preview').html(tinymce.activeEditor.getContent());
});
}
});
It´s in the documentation here: https://www.tiny.cloud/docs/plugins/opensource/link/#exampleusingrel_list
Then use the a rel as the lightbox link, instead of the image.
My application can edit certain word but not all, using contenteditable HTML attribute I can do that. Now The problem is I want to move <?php echo $konten;?> inside textarea with id post_content witch is make textarea become TinyMCE text editor. But my javascript function become not working. I already using init_instance_callback but it still not work. This is my code :
<style>
*[contenteditable="true"] {
background-color: rgba(217, 245, 255,0.5);
}
</style>
<?php
// $konten = $template['konten'];
$konten = "<p>Hai this is the content.</br> My name is : {{name}}</br></p><p></br><table border ='1'><tr><td>This is table</td></tr><tr><td>{{loop_table_one}}</td></tr></table></br><ol><li>{{loop_list_one}}</li></ol></p>";
preg_match_all('/{{(.*?)}}/', $konten, $variable);
$a = array_unique($variable[0]);
foreach($a as $item) {
$b = preg_replace('/{{(.*?)}}/is', "$1", $item);
if (strtolower(substr($b, 0, 9)) == 'loop_list') {
$konten = str_ireplace($item, '<span class="input-list input-'.$b.'" name="'.$b.'">'.$item.'</span>', $konten);
} else if (strtolower(substr($b, 0, 10)) == 'loop_table') {
$konten = str_ireplace($item, '<span class="input-table input-'.$b.'" name="'.$b.'">'.$item.'</span>', $konten);
} else {
$konten = str_ireplace($item, '<span class="input-variable input-'.$b.'" name="'.$b.'" contentEditable="true">'.$item.'</span>', $konten);
}
}
?>
<textarea id="post_content">
<?php echo $konten;?>
</textarea>
<script>
$(document).ready(function(){
$(".input-variable").on('DOMSubtreeModified',function(e){
e.stopPropagation();
let cls = $(this).prop('class');
// remove string inputt
let id = cls.replace("input-variable ", "");
let val = $(this).html();
$('.'+id).each(function () {
if ($(this).html() != val) {
$(this).html(val);
}
})
e.stopPropagation();
});
$( ".input-list" ).closest('ol').add($( ".input-list" ).closest('ul')).prop("contentEditable", "true");
$( ".input-table" ).closest('table').prop("contentEditable", "true");
});
function myCustomInitInstance(inst) {
// i already move my function here but still now working
}
tinymce.init({
init_instance_callback : "myCustomInitInstance",
table_class_list: [
{title: 'None', value: ''},
{title: 'Editable Table', value: 'editablecontent'}
],
readonly:1,
content_style: "body { font-family: Cambria; }",
selector: "#post_content",
toolbar: '#mytoolbar',
lineheight_formats: "8pt 9pt 10pt 11pt 12pt 14pt 16pt 18pt 20pt 22pt 24pt 26pt 36pt",
// ukuran A4 Potrait
width : "742",
height : "842",
plugins: 'textcolor table paste',
font_formats:
"Cambria=cambria;Calibri=calibri;Andale Mono=andale mono,times; Arial=arial,helvetica,sans-serif; Arial Black=arial black,avant garde; Book Antiqua=book antiqua,palatino; Comic Sans MS=comic sans ms,sans-serif; Courier New=courier new,courier; Georgia=georgia,palatino; Helvetica=helvetica; Impact=impact,chicago; Oswald=oswald; Symbol=symbol; Tahoma=tahoma,arial,helvetica,sans-serif; Terminal=terminal,monaco; Times New Roman=times new roman,times; Trebuchet MS=trebuchet ms,geneva; Verdana=verdana,geneva; Webdings=webdings; Wingdings=wingdings,zapf dingbats",
plugins: [
"advlist autolink lists link image charmap print preview hr anchor pagebreak",
"searchreplace wordcount visualblocks visualchars code fullscreen",
"insertdatetime nonbreaking save table contextmenu directionality",
"emoticons template paste textcolor colorpicker textpattern"
],
style_formats: [
{
title: 'Line height',
items: [
{
title: 'Default',
inline: 'span',
styles: { 'line-height': 'normal', display: 'inline-block' }
},
{
title: '1',
inline: 'span',
styles: {'line-height': '1', display: 'inline-block'}
},
{
title: '1.1',
inline: 'span',
styles: {'line-height': '1.1', display: 'inline-block'}
},
{
title: '1.2',
inline: 'span',
styles: {'line-height': '1.2', display: 'inline-block'}
},
{
title: '1.3',
inline: 'span',
styles: {'line-height': '1.3', display: 'inline-block'}
},
{
title: '1.4',
inline: 'span',
styles: {'line-height': '1.4', display: 'inline-block'}
},
{
title: '1.5',
inline: 'span',
styles: {'line-height': '1.5', display: 'inline-block'}
},
{
title: '2 (Double)',
inline: 'span',
styles: {'line-height': '2', display: 'inline-block'}
}
]
},
{title : 'Table row 1', selector : 'tr', classes : 'tablerow1'}
],
toolbar: "insertfile undo redo | styleselect | bold italic underline | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image responsivefilemanager | formatselect | strikethrough | forecolor backcolor fontselect fontsizeselect | pastetext |",
convert_fonts_to_spans: true,
paste_word_valid_elements: "b,strong,i,em,h1,h2,u,p,ol,ul,li,a[href],span,color,font-size,font-color,font-family,mark,table,tr,td",
paste_retain_style_properties: "all",
automatic_uploads: true,
image_advtab: true,
images_upload_url: "<?php echo base_url("template/tinymce_upload")?>",
file_picker_types: 'image',
paste_data_images:true,
relative_urls: false,
remove_script_host: false,
file_picker_callback: function(cb, value, meta) {
var input = document.createElement('input');
input.setAttribute('type', 'file');
input.setAttribute('accept', 'image/*');
input.onchange = function() {
var file = this.files[0];
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function () {
var id = 'post-image-' + (new Date()).getTime();
var blobCache = tinymce.activeEditor.editorUpload.blobCache;
var blobInfo = blobCache.create(id, file, reader.result);
blobCache.add(blobInfo);
cb(blobInfo.blobUri(), { title: file.name });
};
};
input.click();
}
});
</script>
If you are trying to use init_instance_callback you have to pass it a function. In your code example you have:
init_instance_callback : "myCustomInitInstance",
...so you are passing a string to a configuration option that expects a function. Here is a TinyMCE Fiddle that shows how to pass a function to the init_instance_callback configuration option:
https://fiddle.tiny.cloud/18haab
Using TinyMCE, I want to be able to add a custom class to some of the anchor tags in my editor. I found visual_anchor_class which I can't get to work. I've created a class called .anchorBtn and added contextmenu to my init.
When I right-click over my anchor (where it says "DONATE"), I see an empty white box.
tinymce.init({
selector: selector,
menubar: false,
height: 300,
plugins: [
"link anchor lists code paste image contextmenu"
],
statusbar: false,
toolbar: 'undo redo | bold italic underline | bullist numlist | buttons link image | code',
content_css : "css/tinyMCE.css",
link_list:"cgi/linkList.exe?token="+tkn,
force_br_newlines : false,
force_p_newlines : false,
forced_root_block : '',
body_class: "mceBackColor",
oninit : "setPlainText("+selector+")",
visual_anchor_class: 'anchorBtn',
contextmenu: "anchorBtn",
paste_as_text: true,
file_browser_callback: function(field_name, url, type, win) {
var tkn=getToken();
$("#PDFuform").attr("action", "cgi/pdfUpload.exe");
$("#pdfToken").val(tkn);
$("#pdfField").val(field_name);
$('#PDFuform input').click();
},
setup: function (editor) {
editor.addButton('buttons', {
type: 'menubutton',
text: 'Custom Buttons',
icon: false,
menu: [
{
image : '../img/tourBtn.jpg',
title : "SCHEDULE A TOUR",
text: "SCHEDULE A TOUR",
icon: false,
onclick: function () {
editor.insertContent("<div class='bbtn bSAT'>SCHEDULE A TOUR</div>");
}
}
]
})
}
});
What am I doing wrong?
I am developing a discussion panel in ASP.NET in which my TinyMCE code is the following:
<!-- TinyMCE -->
<script type="text/javascript" src="tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
// General options
mode: "textareas",
theme: "advanced",
editor_selector : "mceEditor",
element: "abc",
plugins: "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,wordcount,advlist,autosave",
setup: function (ed) {
ed.onKeyPress.add(
function (ed, evt) {
}
);
},
// Theme options
theme_advanced_buttons1: "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",
theme_advanced_buttons2: "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
theme_advanced_buttons3: "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
theme_advanced_buttons4: "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak,restoredraft",
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
theme_advanced_statusbar_location: "bottom",
theme_advanced_resizing: true,
// Example content CSS (should be your site CSS)
content_css: "css/content.css",
// Drop lists for link/image/media/template dialogs
template_external_list_url: "lists/template_list.js",
external_link_list_url: "lists/link_list.js",
external_image_list_url: "lists/image_list.js",
media_external_list_url: "lists/media_list.js",
// Style formats
style_formats: [
{ title: 'Bold text', inline: 'b' },
{ title: 'Red text', inline: 'span', styles: { color: '#ff0000'} },
{ title: 'Red header', block: 'h1', styles: { color: '#ff0000'} },
{ title: 'Example 1', inline: 'span', classes: 'example1' },
{ title: 'Example 2', inline: 'span', classes: 'example2' },
{ title: 'Table styles' },
{ title: 'Table row 1', selector: 'tr', classes: 'tablerow1' }
],
// Replace values for the template plugin
template_replace_values: {
username: "Some User",
staffid: "991234"
}
});
</script>
<!-- /TinyMCE -->
I want to apply the TinyMCE editor on the text area and in my HTML I am giving the text area with the class name:
<% using (Html.BeginForm("PostProblem", "Discussion", FormMethod.Post))
{ %>
<textarea id = "abc" class = "mceEditor" rows = "100" cols = "100" ></textarea>
<% } %>
The textarea is not working. It is showing a simple textarea, not a TinyMCE text area :(
Make sure the path for tiny_mce.js is correct. Better choose it (tinymce/jscripts/tiny_mce/tiny_mce.js).
Verify also if your textarea looks fine without <% ...%> sections, and also remove class property for the moment, just to identify which one is the cause...