Question

点击图片内的tinymce 。我需要在所选图片上显示两个图标（编辑，删除图标）。用户点击该图片上的修改图标。我需要获取所选的图片属性。

Answer 1

要正确显示图标，您需要将css设置添加到编辑器中。为此，您需要使用tinymce设置editor_css：

editor_css : 'myserver.com/css/editor.css',

为了使其工作，您需要指定tinymce在哪里抓取您指定的icaons的图像。 editor.css的内容应该类似于

// make sure you use the right path to your images!!!

.defaultSkin span.mce_delete {background:url(../......../../images/delete.gif)} 
.defaultSkin span.mce_edit {background:url(../........../../images/edit.gif)}

现在，您可以在上下文菜单中指定图标的图像

if (typeof e !== "undefined" && e.nodeName.toLowerCase() == 'img') {
th._menu.add({
    title: 'Delete',
    icon: 'delete', // here
    cmd: 'my_custom_command_delete'
});

m.add({
    title: 'Edit',
    icon: 'edit',  // here
    cmd: 'my_custom_command_edit'
});

现在我们仍然没有设置正确的命令，所以我们在插件中使用onInit：

  ed.addCommand('my_custom_command_delete', function() {
    // TODO place your code for that action here
  });

  ed.addCommand('my_custom_command_edit, function() {
    // TODO place your code for that action here
  });

enter code here

如何在tinymce的工作区域内带图标？

1 个答案: