I am using tinymce-react, it works fine in editor mode, but when I use readonly mode with disabled = {true}, the video I inserted turns unclickable. (My test site.)
I have tried copy YouTube embed code to my source code and insertion via Tinymce editor, none of them work while in readonly mode.
<Editor
disabled={true}
readonly={true}
init={{
readonly: 1,
selector: "#editor",
plugins:
media preview paste autolink autosave save directionality code visualblocks visualchars fullscreen image link media template codesample table charmap hr pagebreak nonbreaking anchor toc insertdatetime advlist lists wordcount imagetools textpattern noneditable help charmap emoticons autoresize",
toolbar: false,
menubar: false,
media_live_embeds: true,
}}
></Editor>
Solved but I don't know why.
I changed editor plugins like so:
<div id="editor">
<Editor
disabled={true}
readonly={true}
init={{
readonly: 1,
selector: "#editor",
plugins: [
"advlist autolink lists link image charmap print preview anchor",
"searchreplace visualblocks code fullscreen",
"insertdatetime media table contextmenu paste youtube",
"autoresize","code","visualblocks","codesample","table",
],
toolbar: false,
menubar: false,
extended_valid_elements:
"+iframe[src|width|height|name|align|class]",
}}
></Editor>
It is weird that it won't work if I split plugins string to array by space, nor pass a complete string to it.
Related
I'm using Tiny Cloud on my website to bring up a TinyMCE editor. I want to skin it, because the dark mode looks ugly on my dark website. I've been able to initiate it properly, and get the standard oxide-dark skin to work.
<script>
tinymce.init({
selector: '#mytextarea',
plugins: 'lists link image autolink autosave autoresize save searchreplace wordcount',
toolbar: 'undo redo copy cut paste | blocks | bold italic underline forecolor | alignleft aligncenter alignright | removeformat',
menubar: '',
skin: 'oxide-dark',
content_css: 'dark'
});
</script>
... and later...
<textarea id="mytextarea">Hello, World!</textarea>
I then used the skin editor at http://skin.tiny.cloud/t5/ (which I know is v5, but that's what v6 pointed to). I downloaded the result which gave me a ZIP file. I saved the "skins" folder that was in that ZIP file into the root HTML folder of my website. I then update the initiation of tinymce as follows;
<script>
tinymce.init({
selector: '#mytextarea',
plugins: 'lists link image autolink autosave autoresize save searchreplace wordcount',
toolbar: 'undo redo copy cut paste | blocks | bold italic underline forecolor | alignleft aligncenter alignright | removeformat',
menubar: '',
skin: 'Opus',
content_css: 'skins/content/Opus/content.css',
});
</script>
On my site, it doesn't bring up any textbox at all (usually when I screwed something up it would at least bring up an old-school html textbox, but this isn't even showing that). It looks like it's supposed to, and even gives it space on the page, but nothing is visible. What step did I miss in getting this to work?
I've been trying to force TinyMCE to not delete my a tags with every setting that is available and have had no luck (also looked at 20+ posts here - most being over a decade old and no working solutions). I'm just going to post what I try to put into the editor and what it removes (along with every setting I've tried).
What the markup should look like:
<a href="#" class="hearmorelink" onclick="window.open('/Mini-Lots-audio.html', 'Voice Over', 'width=320,height=1,toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,copyhistory=no,resizable=no');return false;">
<div>Want to hear more?<span style="margin-top: 60px;">CLICK HERE</span></div>
</a>
what tinyMCE does to it:
<div>Want to hear more?<span style="margin-top: 60px;">CLICK HERE</span></div>
Maybe not the prettiest HTML ever, but why does it disallow wrapping anything inside an A tag when it's perfectly acceptable HTML5 as per the RFC?
apply_source_formatting: false,
verify_html: false,
trim_span_elements: false,
cleanup: false,
convert_urls: false,
cleanup_on_startup: false,
force_br_newlines: true,
force_p_newlines: false,
allow_script_urls: true,
forced_root_block: false,
valid_elements: '+*[*]',
plugins: [
"advlist autolink autoresize directionality lists link image charmap preview anchor",
"searchreplace visualblocks code fullscreen textcolor",
"insertdatetime media table contextmenu paste"
],
All the settings seem to be working, but this problem still persists. Because this is needed for 50 or so pages and the HTML is stored and retrieved from a database, I can't hard-code anything in (also - non-HTML people/admins need to use this too).
I am not sure how I can make this work (and, yes, it MUST be a popup so the audio can play while people visit from page to page). Would a plugin help here?
okay - after doing a few more tweaks, I've found that TinyMCE is stuck in HTML4 (which does not allow block elements inside A tags). HTML5 supports DIV tags inside A tags.
I'll just change the markup and tweak the span tag to display like a block with CSS.
I am using Tinymce for a textarea. I also have a input type file on the same page. On a mobile device Tinymce hides the input type="file". Is there any way to tell Tinymce not to hide the input?
I can do a workaround by using the label, wrapping it around an image for the user to click to browse, but then it doesn't display the selected file name as it normally would. Unless there is a way to show the selected filename. Otherwise the user clicks and selects the file and nowhere does it actually show the user that a file was selected. I would prefer just having the normal "choose file" display for type="file".
<script src="js/jquery-3.3.1.min.js"></script>
<script src="https://cloud.tinymce.com/5/tinymce.min.js"></script>
<form>
<textarea id="something" rows="3"></textarea>
<input type="file" id="thefile" accept="image/*">
<button type="submit" id="submitbutton">Save</button>
</form>
<script>
tinymce.init({
selector: 'textarea',
height: 400,
menubar: false,
plugins: [
'advlist autolink lists link charmap print preview anchor',
'searchreplace visualblocks code fullscreen',
'insertdatetime table paste code help wordcount'
],
toolbar: 'undo redo | formatselect | bold italic backcolor | alignleft
aligncenter alignright alignjustify | bullist numlist outdent indent |
removeformat | help',
content_css: [
'//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
'//www.tiny.cloud/css/codepen.min.css'
]
});
</script>
Browsing around I saw someone opened an issue on Github about this bug (still shipped within the Version: 5.0.15 (2019-09-02)), which is caused by the mobile CSS: skins\ui\oxide-dark\skin.mobile.min.css.
By overriding the property webkit "visibility" for input file in your own CSS, it is working:
input[type="file"]::-webkit-file-upload-button {
display: block;
}
It's better to do this in your own CSS, in order to leave TinyMCE CSS as is, in case of future update.
Hope this helps you.
I am initializing tinymce editor along with the jbimages plugin. My configuration is as follows:
tinymce.init({
selector: "textarea#abstract",
plugins: [
"advlist autolink lists link image charmap print preview anchor",
"searchreplace visualblocks code fullscreen",
"insertdatetime media table contextmenu paste jbimages"
],
toolbar: "insertfile undo redo | styleselect | bold italic underline | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link jbimages",
relative_urls:false
});
When I try to upload an image all its showing "The upload destination folder does not appear to be writable."
I have given 777 to all the folders in my project and to the project itself.
Not sure how to find the path where it is uploading image.
I'm using TinyMCE with the jbimages plugin for uploading images. I also have the autoresize plugin active so the editor automatically expands and shrinks when content is being added/removed.
This all works fine except when I upload images that are larger than the editor viewport. The editor will not expand in that case.
My code to init tinyMCE is as follows:
tinyMCE.init({
menubar: false,
statusbar: false,
selector: "textarea",
plugins: [
"advlist autolink autoresize lists link image charmap print preview anchor",
"searchreplace visualblocks code fullscreen",
"insertdatetime media table contextmenu paste jbimages textcolor"
],
toolbar: "jbimages",
relative_urls: false
});
My markup looks like:
<div class="control-group" id="cgroup-order[message]">
<label class="control-label required" id="label-order[message]" for="order[message]">Message to send:</label>
<div class="controls" id="controls-order[message]">
<textarea name="order[message]" class="pull-left span3 message" id="order[message]"></textarea>
</div>
It seems like the mceAutoResize command isn't being executed when an image is inserted by jbimages. I've already tried adding something like this to the init parameters:
setup: function(editor) {
editor.on('SetContent', function(e) {
editor.execCommand('mceAutoResize');
});
}
But it doesn't help much. Any ideas how to make this work properly?
Edit:
When I press a key after inserting an image or press a mouse button the editor will be resized, but it doesn't happen automatically.
Edit 2:
Okay, so I know the reason for this behavior now at least. What happens is that the autoresize plugin responds to the editor's SetContent event. At that point when a large image is inserted the browser may or may not be done rendering the image. If it's not done rendering the image the new height that autoresize calculates is still the old height for obvious reasons.
I've tried many different things like catching the load event of mce's iframe, but that only triggers when the page loads initially.
I ended up solving it in a really dirty way, using a 1 second timeout to give the browser more time to render the image. Of course this is a duct tape solution at best, because it may not work on slower clients. If anyone has a better solution please let me know.
My code now looks like this:
tinyMCE.init({
menubar: false,
statusbar: false,
selector: "textarea",
plugins: [
"advlist autolink autoresize lists link image charmap print preview anchor",
"searchreplace visualblocks code fullscreen",
"insertdatetime media table contextmenu paste jbimages textcolor"
],
//toolbar: "insertfile undo redo | styleselect | forecolor | bold italic | alignleft aligncenter alignright alignjustify | link | jbimages",
toolbar: "jbimages",
relative_urls: false,
autoresize_min_height: 200,
//autoresize_max_height: 800,
setup: function(editor) {
editor.on('SetContent', function(e) {
if (e.content.indexOf('<img ') == 0)
{
setTimeout(function(){ tinymce.activeEditor.execCommand('mceAutoResize'); }, 1000);
}
})
}
});
I have an idea but My problem didn't have this, but it has already solved many image problem.
ini_set("memory_limit","120M");
It has to be placed in jbimages\ci\system\libraries\Upload.php file
Above this line:
#copy($this->file_temp, $this->upload_path.$this->file_name);
It may solve your problem.