我想用字体家族选择器扩展tinymce工具栏,该选择器显示使用该字体家族样式化的字体家族名称。 为此,我需要使用类或内联css包装每个字体名称标记。 我仔细检查了tinymce API文档,并努力寻找一种在菜单项中添加自定义HTML的方法。

我得到的最接近的是一个未样式化的按钮,该按钮可打开带有自定义HTML选择器的面板,但这并不理想。 我真的很想直接向使用字体系列设置样式的工具栏添加一个选择。

#1楼 票数:0

这可能对您有帮助。 它不使用工具栏,而是使用自定义menuitems添加了额外的menubar项。

HTML

<form>
 <textarea></textarea>
</form>

JavaScript的

通过向菜单添加menuItems可以工作。 然后,我们可以向菜单项提供classes选项。 这使我们可以通过CSS类选择器分别定位每个菜单项。 例如,如果我们提供classes: "monospace" TinyMCE将此转换为.mce-monospace作为类选择器。 但是,除非您选择更大的CSS优先级,否则tinymces CSS规则将被覆盖。

tinymce.init({
  selector: "textarea",
  menu: {
    mynewmenu: {
      title: 'Select Font Family',
      items: 'arial | monospace | timesnew'
    }
  },

  menubar: 'mynewmenu',

  setup: function(editor) {
    editor.addMenuItem('arial', {
      text: 'Arial',
      classes: "arial",
      context: 'mynewmenu',
      onclick: function() {
        alert('yey!');
      }
    });

    editor.addMenuItem('monospace', {
      text: 'Monospace',            
      classes: "monospace",
      context: 'mynewmenu',
      onclick: function() {
        alert('yey!');
      }
    });
    editor.addMenuItem('timesnew', {
      text: 'Times New Roman',          
      classes: "timesnew",
      context: 'mynewmenu',
      onclick: function() {
        alert('yey!');
      }
    });
  }
});

CSS

这就是我通过CSS覆盖样式的方式。

.mce-menu-item.mce-monospace > span {
  font-family: monospace;
  color: olive;
}
.mce-menu-item.mce-arial > span{
  font-family: Arial;
  color: red;
}

.mce-menu-item.mce-timesnew > span{
  font-family: Times New Roman;
  color: green;
}

请注意,如果只使用.mce-monospace > span优先级值不够大,而使用.mce-menu-item.mce-monospace > span则具有更大的优先级值并覆盖tinymces css。

看看这个例子演示

  ask by Matt Dietsche translate from so

未解决问题?本站智能推荐:

1回复

添加自定义TinyMCE工具栏

我的目标是创建一个带标签的菜单栏,而不是最新的TinyMCE 4.7.6中提供的传统菜单栏。 我计划通过隐藏菜单栏来完成此操作,然后在正常工具栏上方创建一个工具栏。 这个新工具栏将包含带有菜单名称的按钮,如文件,编辑,插入,视图等。单击其中一个按钮时,常规工具栏按钮将被相关菜单项下的工具栏按
1回复

如何在TinyMCE工具栏中添加自定义HTML代码?

我想添加以下HTML: 此按钮可用于在我的JS功能中的服务器上快速加载图像。 最后,它将图像插入TinyMCE插入符号位置。
3回复

如何将工具栏按钮添加到自定义的下拉菜单中?

我在tinymce中创建了一个自定义下拉列表,如下所示: 这创造了这个: 但是,我想要的是从下拉菜单中的主工具栏中移动对齐按钮。 如何将这些实际按钮从工具栏中放入下拉菜单? 它是像上面的代码还是完全不同的方式? 因此,基本上将这些按钮放在上面的下拉列表中,也可以打开
1回复

如何向TinyMce 4工具栏添加自定义控件

我想向TinyMce引入一个新Control ,我可以在工具栏中使用它。 就我而言,我想添加一个图标控件,该控件可以放置在工具栏的开头,以区分编辑器。 但是,几乎没有有关如何正确执行此操作的信息。
1回复

如何在自定义tinymce工具栏菜单项中添加类?

我为带有图像的tinymce添加了自定义工具栏按钮,我想在其中添加一个类。 我尝试添加类参数,但对我没有用。 请咨询
1回复

将自定义下拉菜单添加到tinyMCE并插入动态内容

我已经添加了一些代码来向TinyMCE添加一个下拉菜单,因为您可以运行该代码段,效果很好,但是将内容插入到编辑器中存在问题。 tempGroups和temp变量将在后端创建,因此无法静态使用它们。 因此,我编写了以下代码,以在选择每个项目时将每个项目的内容插入编辑器。 但是问题在于
3回复

自定义tinymce 4.0.5 styleselect工具栏菜单

我正在尝试自定义默认的styleselect工具栏菜单,以便我可以添加一个自定义菜单元素。 我们的想法是将字体大小设置为styleselect子菜单: 我用以下方式初始化了一个TinyMCE 4.0.5 : 由于我无法找到如何自定义默认样式选择菜单,我还试图创建一个完整的新菜单,
1回复

在TinyMCE中,可以使用Import_CSS将样式添加到工具栏的StyleSelect选项吗?

我正在使用import_css加载CSS样式,然后在“格式”下的菜单栏上可见。 结果: 但是,默认情况下,这些相同的样式不会出现在工具栏项styleselect上 。 有什么方法可以使styleselect匹配格式?