替换CKeditor中的图像插件

我想覆盖CKeditor中的图像插件。当我右键点击图片时，我想打开我自己的对话框。任何人都可以指向正确的方向。我已经做了一个基本的插件，我从CKeditor网站复制 - 我如何交换这个来替换图像编辑器。替换CKeditor中的图像插件

CKEDITOR.plugins.add('myplugin', 
{ 
    init: function (editor) { 
     editor.addCommand('mydialog', new CKEDITOR.dialogCommand('mydialog')); 

     if (editor.contextMenu) { 
      editor.addMenuGroup('mygroup', 10); 
      editor.addMenuItem('My Dialog', 
      { 
       label: 'Open dialog', 
       command: 'mydialog', 
       group: 'mygroup' 
      }); 
      editor.contextMenu.addListener(function (element) { 
       return { 'My Dialog': CKEDITOR.TRISTATE_OFF }; 
      }); 
     } 

     CKEDITOR.dialog.add('mydialog', function (api) { 
      // CKEDITOR.dialog.definition 
      var dialogDefinition = 
      { 
       title: 'Sample dialog', 
       minWidth: 390, 
       minHeight: 130, 
       contents: [ 
        { 
         id: 'tab1', 
         label: 'Label', 
         title: 'Title', 
         expand: true, 
         padding: 0, 
         elements: 
         [ 
          { 
           type: 'html', 
           html: '<p>This is some sample HTML content.</p>' 
          }, 
          { 
           type: 'textarea', 
           id: 'textareaId', 
           rows: 4, 
           cols: 40 
          } 
         ] 
        } 
       ], 
       buttons: [CKEDITOR.dialog.okButton, CKEDITOR.dialog.cancelButton], 
       onOk: function() { 
        // "this" is now a CKEDITOR.dialog object. 
        // Accessing dialog elements: 
        var textareaObj = this.getContentElement('tab1', 'textareaId'); 
        alert("You have entered: " + textareaObj.getValue()); 
       } 
      }; 

      return dialogDefinition; 
     }); 
    } 
});

来源

2012-10-22 Chris

我上已将代码添加到原始文章 – Chris

-3

我不明白你在做什么（或请说明我们）。也许你应该比从零开始做事情更好？

来源

2012-10-22 21:20:35 oleq

在我的情况下，添加图像（浏览服务器..？）的用户体验不够好，所以我想用我自己的用户界面，那么它也会与我的文件管理器一致部分。自定义对话框还不够，我想这个用户想完全覆盖它。 – Sam

嗨，我想这样做的原因是，我们有我们的图像编辑器控制为“可用性”的原因，我们需要继续使用。它被用于网站的不同位置，两个对话会混淆人们。总之，我做的是

删除图像插件CKEDITOR.config.removePlugins ='图像，窗体，div，flash，iframe，table';
添加额外的插件extraPlugins： 'tinsertimage，teditimage，teditlink，tinsertlink，teditimagelink' 关于创建CKEditor的

在插件运行一些JS其拦截右键单击图像

CKEDITOR.plugins.add('teditimage', 
{ 
init: function (editor) { 
    editor.addCommand('tEditImage', 
     { 
      exec: function (editor) { 
            //This opens the custom editor 
       ZWSInlineEditor.openImageProperties(editor, false); 
      } 
     }); 

    if (editor.addMenuItem) { 
     // A group menu is required 
     // order, as second parameter, is not required 
     editor.addMenuGroup('gImage'); 

     // Create a manu item 
     editor.addMenuItem('gEditImageItem', { 
      label: 'Edit Image Properties', 
      command: 'tEditImage', 
      group: 'gImage' 
     }); 
    } 

    if (editor.contextMenu) { 
     editor.contextMenu.addListener(function (element, selection) { 
      // Get elements parent, strong parent first 
      var parents = element.getParents("img"); 
      // Check if it's strong 
      if (parents[0].getName() != "img") 
       return null; // No item 

      return { gEditImageItem: CKEDITOR.TRISTATE_ON }; 
     }); 
    } 
} 
});

来源

2013-04-09 09:40:55 Chris

替换CKeditor中的图像插件

回答

相关问题