Bootstrap 的 TinyMCE 未在编辑器中显示

Question

安装干净的 TinyMCE 5 并且 bootstrap 编辑器不会在您编辑时显示 bootstrap 样式。

有人知道如何解决这个问题吗？

这是我当前的设置：

var useDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;

tinymce.init({
  selector: 'textarea#mytextarea',
  plugins: 'print preview paste importcss searchreplace 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 quickbars emoticons',
  imagetools_cors_hosts: ['ewiadmin.s3.amazonaws.com'],
  menubar: 'file edit view insert format tools table help',
  toolbar: 'undo redo | bold italic underline strikethrough | fontsizeselect formatselect | alignleft aligncenter alignright alignjustify | outdent indent |  numlist bullist | forecolor backcolor removeformat | pagebreak | charmap emoticons | fullscreen  preview save print | insertfile image media template link anchor codesample | ltr rtl',
  toolbar_sticky: true,
  autosave_ask_before_unload: true,
  autosave_interval: '30s',
  autosave_prefix: '{path}{query}-{id}-',
  autosave_restore_when_empty: false,
  autosave_retention: '2m',
  image_advtab: true,
  link_list: [
    { title: 'MVN', value: 'Removed for stack'}
  ],
  image_list: [
    { title: 'NVM', value: 'removed for stack' }
  ],
  image_class_list: [
    { title: 'None', value: '' },
    { title: 'Some class', value: 'class-name' }
  ],
  importcss_append: true,
  file_picker_callback: function (callback, value, meta) {
    /* Provide file and text for the link dialog */
    if (meta.filetype === 'file') {
      callback('https://www.google.com/logos/google.jpg', { text: 'My text' });
    }

    /* Provide image and alt text for the image dialog */
    if (meta.filetype === 'image') {
      callback('https://www.google.com/logos/google.jpg', { alt: 'My alt text' });
    }

    /* Provide alternative source and posted for the media dialog */
    if (meta.filetype === 'media') {
      callback('movie.mp4', { source2: 'alt.ogg', poster: 'https://www.google.com/logos/google.jpg' });
    }
  },
  templates: [
    { title: 'Responsive Columns (2)', description: 'Creates columns that will automatically turn into a single column when viewed on smaller devices like phones.', content: '<div class="row"><div class="col-md-6">Column 1</div><div class="col-md-6">Column 2</div></div>' },
    { title: 'Starting my story', description: 'A cure for writers block', content: 'Once upon a time...' },
    { title: 'New list with dates', description: 'New List with dates', content: '<div class="mceTmpl"><span class="cdate">cdate</span><br /><span class="mdate">mdate</span><h2>My List</h2><ul><li></li><li></li></ul></div>' }
  ],
  template_cdate_format: '[Date Created (CDATE): %m/%d/%Y : %H:%M:%S]',
  template_mdate_format: '[Date Modified (MDATE): %m/%d/%Y : %H:%M:%S]',
  height: 600,
  image_caption: true,
  quickbars_selection_toolbar: 'bold italic | quicklink h2 h3 blockquote quickimage quicktable',
  noneditable_noneditable_class: 'mceNonEditable',
  toolbar_mode: 'sliding',
  contextmenu: 'link image imagetools table',
  skin: useDarkMode ? 'oxide-dark' : 'oxide',
  content_css: useDarkMode ? 'dark' : 'default',
  content_style: 'body {font-size:14px }'
 });

你可以看到我添加了一个列模板，但我也测试了按钮。

这是我尝试时发生的情况的一些附加屏幕截图

Answer 1

如果您希望 TinyMCE 为 bootstrap 元素设置样式，您需要通过 content_css 将 Bootstrap CSS 传递给编辑器本身。这是一个简单的例子：

https://fiddle.tiny.cloud/d6haab

具体请注意包含此配置选项：

content_css: "https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"

...这就是将 Bootstrap CSS 传递给存在于 TinyMCE iframe 中的编辑器内容的原因。

Bootstrap 的 TinyMCE 未在编辑器中显示

TinyMCE with Bootstrap not showing in editor

twitter-bootstrap

bootstrap-4

tinymce

tinymce-5