1. Add your own CSS for Editor content.
Content inside the editor will have its inline embedded CSS styling. Once you write any content inside editor it cannot contain any external CSS. If you want to write some content inside the editor and embed your own CSS style sheet to the content, you need to change this code:
content_css: [ '//fonts.googleapis.com/css?family=Lato:300,300i,400,400i', '//www.tinymce.com/css/codepen.min.css'] i.e. remove the css in the editor and add path to your own css ::- content_css: [ 'css/style.css', 'css/bootstrap.css']
2. Create a custom button inside Editor and add functionality for the button.
To create a custom button inside the editor we need to follow these steps:
2.1 Create a custom button plugin.
For Example:
plugins: [ 'advlist autolink lists link image charmap print preview anchor textcolor', 'searchreplace visualblocks code fullscreen', 'insertdatetime media table contextmenu paste code help', ‘myCustomButton’ ],
2.2 Add this button to the toolbar to make it visible in the editor.
For Example:
toolbar: ‘insert | undo redo | styleselect | bold italic backcolor
| alignleft aligncenter alignright | myCustomButton
2.3 Create a function similar to this:
setup: function (editor) {
editor.addButton(‘myCustomButton’, {
text: 'Template',
icon: false,
onclick: function () {
// write functionality perform on onclick
}
});
3. Create an image browse option to upload images inside editor.
When we use TinyMCE plugins in the editor then we can provide URL of the image to add in the editor. But sometimes we need upload image option (browse image).
To add this functionality we need to call this function and use this code:
file_picker_types: 'image',
file_picker_callback: function(cb, value, meta) {
var input = document.createElement('input');
input.setAttribute('type', 'file');
if (meta.filetype == 'image') {
input.setAttribute('accept', '*');
}
input.onchange = function() {
var file = this.files[0];
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function () {
var id = 'blobid' + (new Date()).getTime();
var blobCache = tinymce.activeEditor.editorUpload.blobCache;
var base64 = reader.result.split(',')[1];
var blobInfo = blobCache.create(id, file, base64);
blobCache.add(blobInfo);
// call the callback and populate the Title field with the file name
cb(blobInfo.blobUri(), { title: file.name });
};
};
input.click(); }
4. HTML Save functionality.
We have to call save_onsavecallback function of a TinyMCE editor to add HTML save functionality in the editor. Here is the sample code for getting the data/content from the editor and save it using ajax:
save_onsavecallback: function() {
var ed = tinyMCE.get('ajax_text');
var midata = ed.getContent({format : 'raw'});
var mi = midata.replace(/ /g, " ");
var file = prompt("Save As (Enter file name)", "");
$.ajax({
url: "/TinyEditor/tinydata.php?id="+file,
data: "file="+mi,
dataType: 'html',
async:true,
type:'POST',
beforeSend: function () {
},
complete: function (data) {
},
success: function(result)
{
alert("Success"+result);
},
error:function(data)
{
alert("Error: In saving");
alert(data);
}
});
}