I have an tiny mce editor like image bellow:
and I want to put Code Sample Plugin of tinymce editor in phpfox like:
Please tell me what should I do.
In case you don't have codesample installed, you can download entire bundle from tinymce.com and include plugin.min.js from directory js/tinymce/plugins/codesample/
Download prism.js and prism.css from prismjs.com and include in your HTML page
Modify your tinymce_setup.js and add codesample to your tinymce_setup.js
My tinymce_setup.js looks like
tinymce.init({
selector: 'textarea',
height: 500,
plugins: [
'advlist autolink lists link image charmap print preview anchor',
'searchreplace visualblocks code fullscreen',
'insertdatetime media table contextmenu paste code codesample'
],
toolbar: ("insertfile undo redo | styleselect | bold italic | " +
"alignleft aligncenter alignright alignjustify | " +
"bullist numlist outdent indent | link image table | " +
"code fullscreen codesample"),
});
Related
I have installed TinyMCE Version: 5.10.3 (2022-02-09)
this is the code:
tinymce.init({
selector: 'textarea.redactor-editor',
plugins: 'preview paste searchreplace autolink autosave save directionality code visualblocks visualchars fullscreen image link media codesample table charmap hr pagebreak nonbreaking toc insertdatetime advlist lists wordcount imagetools textpattern noneditable help charmap quickbars emoticons',
menubar: 'file edit view insert format tools table help',
toolbar: 'undo redo | bold italic underline strikethrough | fontselect fontsizeselect formatselect | alignleft aligncenter alignright alignjustify | outdent indent | numlist bullist | forecolor backcolor removeformat | pagebreak | charmap emoticons | fullscreen preview | image media template link codesample',
image_advtab: true,
height: 500,
extended_valid_elements: "pre[*],script[*],style[*]",
valid_children: "+body[style|script],pre[script|div|p|br|span|img|style|h1|h2|h3|h4|h5],*[*]",
valid_elements : "*[*]",
quickbars_insert_toolbar: '',
quickbars_selection_toolbar: '',
image_caption: true,
quickbars_selection_toolbar: 'bold italic | quicklink h2 h3 blockquote quickimage quicktable',
noneditable_noneditable_class: 'mceNonEditable',
toolbar_mode: 'sliding'
});
and when I am landing to my page everytime it is showing this warning message:
The following deprecated features are currently enabled, these will be removed in TinyMCE 6.0. See https://www.tiny.cloud/docs/release-notes/6.0-upcoming-changes/ for more information. Plugins: - imagetools (moving to premium) - toc (moving to premium)
How can I turn off this message?
add deprecation_warnings: false, to you're init
I have a php page with multiple tinymce editors (textarea) with same classname and seperate id. My issue is the image upload icon is showing only on the last editor but not in the above editors. I am using tinymce version 4.7.2.
This is the image upload button i need to show:
Here is the full image of my php page
Please help me to solve this issue.
Why not just add the responsivefilemanager to the toolbar then you dont need the image
TinymceModule.withConfig({
plugins: ['link image code responsivefilemanager'],
toolbar: 'responsivefilemanager',
menubar: false,
external_filemanager_path: '.../filemanager/',
filemanager_title: 'Content Server',
filemanager_crossdomain: true,
external_plugins: {"filemanager": ".../filemanager/plugin.min.js" }
})
file_picker_callback will solve the above issue. for ref refer this link http://www.responsivefilemanager.com/demo.php
tinymce.init({
selector: "textarea#content, textarea#details",theme: "modern",width: 500,height: 200,
plugins: [
"advlist autolink link image lists charmap print preview hr anchor pagebreak",
"searchreplace wordcount visualblocks visualchars insertdatetime media nonbreaking",
"table contextmenu directionality emoticons paste textcolor responsivefilemanager code"
],
toolbar1: "undo redo | bold italic underline | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | styleselect",
toolbar2: "| responsivefilemanager | link unlink anchor | image media | forecolor backcolor | print preview code ",
image_advtab: true ,
file_picker_types:'file image media',
file_picker_callback:function(cb,value,meta){var width=window.innerWidth-30;var height=window.innerHeight-60;if(width>1800)width=1800;if(height>1200)height=1200;if(width>600){var width_reduce=(width-20)%138;width=width-width_reduce+10;}var urltype=2;if(meta.filetype=='image'){urltype=1;}if(meta.filetype=='media'){urltype=3;}var title="RESPONSIVE FileManager";if(typeof this.settings.filemanager_title!=="undefined"&&this.settings.filemanager_title){title=this.settings.filemanager_title;}var akey="key";if(typeof this.settings.filemanager_access_key!=="undefined"&&this.settings.filemanager_access_key){akey=this.settings.filemanager_access_key;}var sort_by="";if(typeof this.settings.filemanager_sort_by!=="undefined"&&this.settings.filemanager_sort_by){sort_by="&sort_by="+this.settings.filemanager_sort_by;}var descending="false";if(typeof this.settings.filemanager_descending!=="undefined"&&this.settings.filemanager_descending){descending=this.settings.filemanager_descending;}var fldr="";if(typeof this.settings.filemanager_subfolder!=="undefined"&&this.settings.filemanager_subfolder){fldr="&fldr="+this.settings.filemanager_subfolder;}var crossdomain="";if(typeof this.settings.filemanager_crossdomain!=="undefined"&&this.settings.filemanager_crossdomain){crossdomain="&crossdomain=1";if(window.addEventListener){window.addEventListener('message',filemanager_onMessage,false);}else{window.attachEvent('onmessage',filemanager_onMessage);}}tinymce.activeEditor.windowManager.open({title:title,file:this.settings.external_filemanager_path+'dialog.php?type='+urltype+'&descending='+descending+sort_by+fldr+crossdomain+'&lang='+this.settings.language+'&akey='+akey,width:width,height:height,resizable:true,maximizable:true,inline:1},{setUrl:function(url){cb(url);}});},
external_filemanager_path:"filemanager/",
filemanager_title:"Responsive Filemanager" ,
object_resizing : false,
external_plugins: { "filemanager" : "../../../filemanager/plugin.min.js"}
});
I use Tinymce, I have two dots at the beginning of the url when I insert an image file, how can this be removed.Beacause
The project has been seamlessly integrated into the target file,
I register the HTML result in the database
I am undoing the record but there is a double dot in the image source
I need to remove double
how do I make that change
img src="../Content/Images/Upload" > img src="/Content/Images/Upload"
tinymce.init({
selector: '#HTML',
height: 500,
menubar: false,
plugins: [
'advlist autolink lists link image charmap print preview anchor textcolor',
'searchreplace visualblocks code fullscreen',
'insertdatetime media table contextmenu paste code help'
],
toolbar: 'insert | undo redo | formatselect fontsizeselect | fontselect bold italic backcolor forecolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help | link image code',
font_formats: "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;" +
"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",
fontsize_formats: '8pt 10pt 12pt 14pt 18pt 24pt 36pt 72pt',
content_css: [
'//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
'//www.tinymce.com/css/codepen.min.css'],
paste_data_images: true,
images_upload_url: '/UploadImage',
images_upload_base_path: '/Upload',
language: 'tr',
});
TinyMCE has a variety of configuration options to deal with URLs and how they are processed. Take a look at the following:
https://www.tinymce.com/docs/configure/url-handling/
...and specifically the following on that page:
https://www.tinymce.com/docs/configure/url-handling/#convert_urls
https://www.tinymce.com/docs/configure/url-handling/#relative_urls
https://www.tinymce.com/docs/configure/url-handling/#urlconverter_callback
The last of those (urlconverter_callback) allows you to implement your own logic if TinyMCE's built in options don't solve your issue.
When I click on the insert image button to upload an image I get this pop up error
<script>tinymce.init({
selector: 'textarea',
height: 400,
menubar: false,
plugins: [
'advlist autolink lists link image charmap print preview
anchor', 'searchreplace visualblocks code fullscreen',
'insertdatetime media table contextmenu paste code '
],
filemanager_crossdomain: true,
external_filemanager_path:"responsive_filemanager/filemanager/",
external_plugins: { "filemanager" :
"/responsive_filemanager/filemanager/plugin.min.js"},
toolbar1: "undo redo | bold italic underline | alignleft
aligncenter alignright alignjustify | bullist numlist outdent
indent | styleselect",
toolbar2: "| responsivefilemanager | link unlink anchor | image
media | forecolor backcolor | print preview code ",
image_advtab: true ,
filemanager_title:"Responsive Filemanager" ,
});</script>
Here is my script for the filemanager/TinyMCE, I havent touched the config.php file either. All I have done is downloaded the files and directed to my script to the correct path and it pulls the buttons for the filemanager in okay on TinyMCE but when I go to upload an image I get that error pop up.
Open lfm.php. This is in the config folder if you're using Laravel. Change:
'base_directory' => 'public',
to the directory the filemanager is in. For example:
'base_directory' => '../another_directory',
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.