I am building a javascript (Backbone with Coffeescript) app and in this app I am using TinyMCE.
I am adding a new tag with contenteditable set to true but TinyMCE ignores it. How can I allow this attribute?
This is my code:
#App.module "Concerns", (Concerns, App, Backbone, Marionette, $, _) ->
Concerns.FormWysiwyg =
onDomRefresh: ->
tinymce.init
selector: '.wysiwyg'
height: 350
menubar: false
statusbar: false
plugins: [
'advlist autolink lists link image charmap print preview anchor'
'searchreplace visualblocks code fullscreen'
'insertdatetime media table contextmenu paste code'
]
extended_valid_elements: 'span[class|contenteditable]'
toolbar: 'bold italic | alignleft aligncenter alignright | bullist numlist outdent indent | link | editable'
setup: (editor) ->
editor.on 'change', ->
editor.save()
editor.addButton 'editable',
text: 'Editable'
icon: false
onclick: ->
ed = tinyMCE.activeEditor
content = ed.selection.getContent({'format':'html'})
new_selection_content = '<span class="editable yellow" contenteditable="true">' + content + '</span>'
ed.execCommand('insertHTML', false, new_selection_content)
Related
tinymce and using image upload, I have modified my config and added image upload from system.This is working fine and got new tab upload and below is my config :
config: any = {
height: 250,
theme: 'modern',
// powerpaste advcode toc tinymcespellchecker a11ychecker mediaembed linkchecker help
plugins: 'print preview searchreplace autolink directionality visualblocks visualchars fullscreen image imagetools link media template codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists textcolor wordcount contextmenu colorpicker textpattern',
toolbar: 'formatselect | bold italic strikethrough forecolor backcolor | link | alignleft aligncenter alignright alignjustify | numlist bullist outdent indent fontselect fontsizeselect | removeformat',
image_advtab: true,
imagetools_toolbar: 'rotateleft rotateright | flipv fliph | editimage imageoptions',
menubar: true,
statusbar: false,
images_upload_handler: (blobInfo, success, failure) => {
let firmuseracctid;
let loggedInUserData = JSON.parse((sessionStorage.getItem('userDetails')));
if (loggedInUserData && loggedInUserData.useracctid) {
firmuseracctid = loggedInUserData.useracctid
}
var formData;
formData = new FormData();
let s3signatureKey = 'path';
let headerImageName = blobInfo.filename();
let status: any = 0;
formData.append('status', status);
formData.append('signatureKey', s3signatureKey);
formData.append("file", blobInfo.blob(), blobInfo.filename());
//console.log(formData);
this.uploadFile(formData).subscribe(response => {
if (response) {
this.headerImageUrl = 'myURL';
success(this.headerImageUrl);
}
});
},
content_css: [
'//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
'//www.tinymce.com/css/codepen.min.css'
]
};
Now i need to add another tab where i have to load all images from my service side, For this how to add in config, Any help on this.
TinyMCE has no configuration option to create an entire UI for browsing your repository of images. To do this you have a few options.
TinyMCE makes two products that can do this for you:
MoxieManager
TinyDrive
There are 3rd party plugins that can do this for you such as:
Responsive File Manager
Roxy Fileman
Lastly you could choose to create your own file manager and use TinyMCE's APIs to interact with what you create (that is all the above tools do).
I have test website (developing site) works on http and my editor loads without any issue but since i moved my app to main site which runs on https my editor stopped loading and I get this error in console:
ReferenceError: tinymce is not defined
Screenshots
http site
https site
Code
JavaScript
<script>
var editor_config = {
path_absolute : "/",
selector: "textarea.editor", //get class name "editor"
plugins: [
"advlist autolink lists link image charmap print preview hr anchor pagebreak",
"searchreplace wordcount visualblocks visualchars code fullscreen",
"insertdatetime media nonbreaking save table contextmenu directionality",
"emoticons template paste textcolor colorpicker textpattern codesample",
"fullpage toc tinymcespellchecker imagetools help"
],
toolbar: "insertfile undo redo | styleselect | bold italic strikethrough | alignleft aligncenter alignright alignjustify | ltr rtl | bullist numlist outdent indent removeformat formatselect| link image media | emoticons charmap | code codesample | forecolor backcolor",
external_plugins: { "nanospell": "https://www.mysiteurl.com/js/tinymce/plugins/nanospell/plugin.js" },
nanospell_server:"php",
browser_spellcheck: true,
relative_urls: true,
remove_script_host: false,
branding: false,
file_browser_callback : function(field_name, url, type, win) {
var x = window.innerWidth || document.documentElement.clientWidth || document.getElementsByTagName('body')[0].clientWidth;
var y = window.innerHeight|| document.documentElement.clientHeight|| document.getElementsByTagName('body')[0].clientHeight;
var cmsURL = editor_config.path_absolute + 'laravel-filemanager?field_name=' + field_name;
if (type == 'image') {
cmsURL = cmsURL + "&type=Images";
} else {
cmsURL = cmsURL + "&type=Files";
}
tinymce.activeEditor.windowManager.open({
file: '<?= route('elfinder.tinymce4') ?>',// use an absolute path!
title: 'File manager',
width: 900,
height: 450,
resizable: 'yes'
}, {
setUrl: function (url) {
win.document.getElementById(field_name).value = url;
}
});
}
};
tinymce.init(editor_config);
</script>
<script>
{!! \File::get(base_path('vendor/barryvdh/laravel-elfinder/resources/assets/js/standalonepopup.js')) !!}
</script>
Note: error refers to this line tinymce.init(editor_config);
Blade
{{Form::textarea('short_description', null, array('class' => 'form-control editor'))}}
Help would be appreciated!
SOLVED
I download again tinymce and reupload js files, now is loading without issue.
I use jsPanel to have kind of modal windows appearing on my site.
On jsPanel init, I specify content with a textarea, and a callback function.
Once my jsPanel is created, I try to initialise a tinyMCE in the callback. I test tinyMCE instances and my editor is in the listing of instances... but in the jsPanel it displays as a normal textarea, not as a tinyMCE.
Any idea ?
Here is the code :
function oninitjspanel()
{
console.log('before init modal mce');
tinymce.init({
selector: "#email_message",
entity_encoding : "raw",
encoding: "UTF-8",
theme: "modern",
height: "100%",
width: "100%",
plugins: [
"advlist autolink lists link image charmap print preview hr anchor pagebreak",
"searchreplace wordcount visualblocks visualchars code fullscreen",
"insertdatetime media nonbreaking save table contextmenu directionality",
"emoticons template paste textcolor colorpicker textpattern"
],
toolbar1: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image preview media | forecolor backcolor emoticons",
image_advtab: true,
});
console.log('after init modal mce');
for (var i = 0; i < tinymce.editors.length; i++)
{
console.log(i + " Editor id:", tinymce.editors[i].id);
}
}
$('#new_document').click (function () {
var content = '<div id="choix_document"><textarea id="email_message"></textarea></div>';
$.jsPanel({
content: content,
position: "center",
theme: "success",
title: "Nouveau document/email",
size: { width: function(){ return $(window).width()*0.75 },
height: function(){ return $(window).height()*0.75 } },
toolbarFooter: "<div class='email_submit'>Envoyer email</div><div id='email_returnmessage'></div>",
callback: oninitjspanel(),
});
});
The console log :
before init modal mce
after init modal mce
0 Editor id: model_editor
1 Editor id: email_message
EDIT : one more thing, as tinyMCE have focus issues in modals, I apply at my page loading the following to prevent the issue :
$(document).on('focusin', function(e) {
if ($(e.target).closest(".mce-window, .moxman-window").length) {
e.stopImmediatePropagation();
}
});
Just take a look at https://github.com/Flyer53/jsPanel/issues/51
But I guess you're the one asking the same question on GitHub's the jsPanel issues page anyhow?
I have the following script which works perfectly, except after the content is saved, the editor remains open. How can I close the TinyMCE editor in the save_onsavecallback callback?
tinymce.init({
selector: "#document",
inline: true,
plugins: ["advlist lists print preview anchor paste save"],
save_enablewhendirty: true,
save_onsavecallback: function() {
$.post('index.php?cid=stuff2fix',{task:"save",document:$("#document").html(),CSRF:$('#CSRF').val()});
//CLOSE EDITOR NOW
},
toolbar: "undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | save"
});
You need to know which instance of the mce to remove and then call .remove() on the instance. I have modified the code so it will remove tinemce after clicking save.
The site that helped me was http://www.tinymce.com/forum/viewtopic.php?id=9175
tinymce.init({
selector: "#document",
inline: true,
plugins: ["advlist lists print preview anchor paste save"],
save_enablewhendirty: true,
save_onsavecallback: function(inst) {
$.post('index.php?cid=stuff2fix',{task:"save",document:$("#document").html(),CSRF:$('#CSRF').val()});
inst.remove();
},
toolbar: "undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | save"
});
I have the following code to use TinyMCE which all works except for the tablecontrols part.
Can anyone see where I'm going wrong?
tinymce.init({
selector: ".wysiwyg",
plugins: "textcolor,table",
menubar : false,
statusbar: false,
toolbar1: "bold italic underline | numlist bullist outdent indent | alignleft aligncenter alignright alignjustify | link",
toolbar2: "hr | fontselect | fontsizeselect | forecolor backcolor | tablecontrols",
setup: function(editor) {
editor.on('change', function(e) {
$(".wysiwyg").html(editor.getContent());
});
}
});
I think you should replace the comma in the plugins value with a space like
plugins: "textcolor table",
I'm using the following
....
plugins: "link image code paste table",
menubar: false,
toolbar1: "undo redo | bold italic | link image table | code",
....