TinyMCE Toolbar Not Showing Up
Question
Hey guys I have been on this for a few hours an im stumped. I set up a distract-free editor on my website, but cant get the toolbar to show up when I click on text.
I appreciate any help, im not sure what it is that im doing wrong and have done extensive research trying to figure this out. So thank you for your time!
Here is my HTML:
<form method="post">
<div class='demo-dfree'>
<h2 class="dfree-header mce-content-body" contenteditable="true" style="position: relative;" spellcheck="false">
Header
</h2>
<br/>
<div class="dfree-body mce-content-body" contenteditable="true" style="position: relative;" spellcheck="false">
<p>
Body
</p>
</div>
</div>
</form>
Here is my script placed in my header:
<script src="https://cdn.tiny.cloud/1/79eqkg3mxj7h6alrcmz1yxjsp6fxm1qhdvkrrfy9uxdxwjrf/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
<script>tinymce.init({selector:'textarea'});</script>
<script >
var dfreeHeaderConfig = {
selector: '.dfree-header',
menubar: false,
inline: true,
toolbar: false,
plugins: [ 'quickbars' ],
quickbars_insert_toolbar: 'undo redo',
quickbars_selection_toolbar: 'italic underline'
};
var dfreeBodyConfig = {
selector: '.dfree-body',
menubar: false,
inline: true,
plugins: [
'autolink',
'codesample',
'link',
'lists',
'media',
'powerpaste',
'table',
'image',
'quickbars'
],
toolbar: false,
quickbars_insert_toolbar: 'quicktable image',
quickbars_selection_toolbar: 'bold italic | h2 h3 | blockquote quicklink',
contextmenu: 'inserttable | cell row column deletetable',
powerpaste_word_import: 'clean',
powerpaste_html_import: 'clean'
};
tinymce.init(dfreeHeaderConfig);
tinymce.init(dfreeBodyConfig);
</script>
2 answers
solution1
0 2019-09-16 09:23:17
I might be wrong, but I guess what you want to use is the "Inline Editor" instead of the "Distraction free" one?
Have a look at the official example: https://www.tiny.cloud/docs/demo/inline/
EDIT: Your selectors are wrong. In JS you call for '.tinymce-heading' and '.tinymce-body'. But in your HTML you named them '.dfree-header' and '.dfree-body'.
Change them to fit and after double-clicking your content your toolbar should show up.
solution2
0 2019-09-17 00:27:31
事实证明，我的脚本需要在其页面的顶部具有<!DOCTYPE html> ，一切都可以正常工作。
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.