eclipse插件开发(一) 简易4页签编辑器(源码 | 设计 | JS | CSS)

由于在前端编辑html和js还有css都比较繁琐,因此想要在一个页面编辑,所以想开发一个插件来减少这个繁琐

1.本文环境:

Eclipse IDE for Enterprise Java Developers.
Version: 2019-09 R (4.13.0)
Build id: 20190917-1200

JDK1.8.0_111 X64

2.向导生成多页签编辑器

File->New-Project->Plug-in Project

运行插件: 右键项目 - Run As - 1 Eclipse Application

点Continue继续,会生成一个新的调试环境

点击左上角的

出现界面

我们新建一个项目: Create a project...

好了,创建好一个文件h5.html,并使用我们的插件FontEndEditor打开,可以看到在底部有3个页签[h5.html, Properties, Preview]

修改FontEndEditor.java代码如下

package frontendplugin.editors;

import java.io.File;
import org.eclipse.core.resources.IFile;
import org.eclipse.core.resources.IMarker;
import org.eclipse.core.resources.IResourceChangeEvent;
import org.eclipse.core.resources.IResourceChangeListener;
import org.eclipse.core.resources.ResourcesPlugin;
import org.eclipse.core.runtime.IProgressMonitor;
import org.eclipse.jface.dialogs.ErrorDialog;
import org.eclipse.swt.SWT;
import org.eclipse.swt.browser.Browser;
import org.eclipse.swt.layout.FillLayout;
import org.eclipse.swt.widgets.Composite;
import org.eclipse.swt.widgets.Display;
import org.eclipse.ui.IEditorInput;
import org.eclipse.ui.IEditorPart;
import org.eclipse.ui.IEditorSite;
import org.eclipse.ui.IFileEditorInput;
import org.eclipse.ui.IWorkbenchPage;
import org.eclipse.ui.PartInitException;
import org.eclipse.ui.editors.text.TextEditor;
import org.eclipse.ui.ide.IDE;
import org.eclipse.ui.part.FileEditorInput;
import org.eclipse.ui.part.MultiPageEditorPart;

/**
 * An example showing how to create a multi-page editor. This example has 3
 * pages:
 * <ul>
 * <li>page 0 contains a nested text editor.
 * <li>page 1 allows you to change the font used in page 2
 * <li>page 2 shows the words in page 0 in sorted order
 * </ul>
 */
public class FontEndEditor extends MultiPageEditorPart implements IResourceChangeListener {

  /** The text editor used in page 0. */
  private TextEditor editor;

  /** The text editor used in page 2. */
  private TextEditor jsEditor;

  /** The text editor used in page 3. */
  private TextEditor cssEditor;

  /**
   * Creates a multi-page editor example.
   */
  public FontEndEditor() {
    super();
    ResourcesPlugin.getWorkspace().addResourceChangeListener(this);
  }

  /**
   * Creates page 0 of the multi-page editor, which contains a text editor.
   */
  void createPage0() {
    try {
      editor = new TextEditor();
      int index = addPage(editor, getEditorInput());
      setPageText(index, "源码"); // editor.getTitle()
    } catch (PartInitException e) {
      ErrorDialog.openError(
          getSite().getShell(),
          "Error creating nested text editor",
          null,
          e.getStatus());
    }
  }

  /**
   * Creates page 1 of the multi-page editor, which allows you to change the font
   * used in page 2.
   */
  void createPage1() {
    Composite composite = new Composite(getContainer(), SWT.NONE);
    FillLayout layout = new FillLayout();
    composite.setLayout(layout);

    IEditorInput input = editor.getEditorInput();
    if (input instanceof IFileEditorInput) {
      IFile file = ((IFileEditorInput) input).getFile();
      String path = file.getLocation().makeAbsolute().toFile().getAbsolutePath();
      Browser browser = new Browser(composite, SWT.NONE); // SWT.H_SCROLL | SWT.V_SCROLL
      browser.setUrl(path);
      int index = addPage(composite);
      setPageText(index, "设计");
    }
  }

  /**
   * Creates page 2 of the multi-page editor, which shows the sorted text.
   */
  void createPage2() {
    Composite composite = new Composite(getContainer(), SWT.NONE);
    FillLayout layout = new FillLayout();
    composite.setLayout(layout);

    jsEditor = new TextEditor();
    FileEditorInput fileEditorInput = null;

    IEditorInput input = editor.getEditorInput();
    if (input instanceof IFileEditorInput) {
      IFile file = ((IFileEditorInput) input).getFile();
      String path = file.getLocation().makeAbsolute().toFile().getAbsolutePath();
      if (path.endsWith(".html")) {
        String jsPath = path.substring(0, path.lastIndexOf(".html")) + ".js";
        File f = new File(jsPath);
        if (f.exists()) {
          IFile[] ifiles = ResourcesPlugin.getWorkspace().getRoot()
              .findFilesForLocationURI(f.toURI());
          IFile ifile = ifiles[0];
          fileEditorInput = new FileEditorInput(ifile);
        }
      }
    }

    int index = 0;
    try {
      if (fileEditorInput != null) {
        index = addPage(jsEditor, fileEditorInput);
      } else {
        index = addPage(composite);
      }

    } catch (PartInitException e) {
      e.printStackTrace();
    }
    setPageText(index, "JS");
  }

  void createPage3() {
    Composite composite = new Composite(getContainer(), SWT.NONE);
    FillLayout layout = new FillLayout();
    composite.setLayout(layout);

    cssEditor = new TextEditor();
    FileEditorInput fileEditorInput = null;

    IEditorInput input = editor.getEditorInput();
    if (input instanceof IFileEditorInput) {
      IFile file = ((IFileEditorInput) input).getFile();
      String path = file.getLocation().makeAbsolute().toFile().getAbsolutePath();
      if (path.endsWith(".html")) {
        String jsPath = path.substring(0, path.lastIndexOf(".html")) + ".css";
        File f = new File(jsPath);
        if (f.exists()) {
          IFile[] ifiles = ResourcesPlugin.getWorkspace().getRoot()
              .findFilesForLocationURI(f.toURI());
          IFile ifile = ifiles[0];
          fileEditorInput = new FileEditorInput(ifile);
        }
      }
    }

    int index = 0;
    try {
      if (fileEditorInput != null) {
        index = addPage(cssEditor, fileEditorInput);
      } else {
        index = addPage(composite);
      }

    } catch (PartInitException e) {
      e.printStackTrace();
    }
    setPageText(index, "CSS");
  }

  /**
   * Creates the pages of the multi-page editor.
   */
  protected void createPages() {
    createPage0();
    createPage1();
    createPage2();
    createPage3();
  }

  /**
   * The <code>MultiPageEditorPart</code> implementation of this
   * <code>IWorkbenchPart</code> method disposes all nested editors. Subclasses
   * may extend.
   */
  public void dispose() {
    ResourcesPlugin.getWorkspace().removeResourceChangeListener(this);
    super.dispose();
  }

  /**
   * Saves the multi-page editor's document.
   */
  public void doSave(IProgressMonitor monitor) {
    // getEditor(0).doSave(monitor);
    if (editor.isSaveAsAllowed()) {
      getEditor(0).doSave(monitor);
    }
    if (jsEditor.isSaveAsAllowed()) {
      if (getEditor(2) != null) {
        getEditor(2).doSave(monitor);
      }
    }
    if (cssEditor.isSaveAsAllowed()) {
      if (getEditor(3) != null) {
        getEditor(3).doSave(monitor);
      }
    }
  }

  /**
   * Saves the multi-page editor's document as another file. Also updates the text
   * for page 0's tab, and updates this multi-page editor's input to correspond to
   * the nested editor's.
   */
  public void doSaveAs() {
    IEditorPart editor = getEditor(0);
    editor.doSaveAs();
    setPageText(0, editor.getTitle());
    setInput(editor.getEditorInput());
  }

  /*
   * (non-Javadoc) Method declared on IEditorPart
   */
  public void gotoMarker(IMarker marker) {
    setActivePage(0);
    IDE.gotoMarker(getEditor(0), marker);
  }

  /**
   * The <code>MultiPageEditorExample</code> implementation of this method checks
   * that the input is an instance of <code>IFileEditorInput</code>.
   */
  public void init(IEditorSite site, IEditorInput editorInput)
      throws PartInitException {
    if (!(editorInput instanceof IFileEditorInput))
      throw new PartInitException("Invalid Input: Must be IFileEditorInput");
    super.init(site, editorInput);
  }

  /*
   * (non-Javadoc) Method declared on IEditorPart.
   */
  public boolean isSaveAsAllowed() {
    return true;
  }

  /**
   * Calculates the contents of page 2 when the it is activated.
   */
  protected void pageChange(int newPageIndex) {
    super.pageChange(newPageIndex);
    if (newPageIndex == 2) {

    }
  }

  /**
   * Closes all project files on project close.
   */
  public void resourceChanged(final IResourceChangeEvent event) {
    if (event.getType() == IResourceChangeEvent.PRE_CLOSE) {
      Display.getDefault().asyncExec(() -> {
        IWorkbenchPage[] pages = getSite().getWorkbenchWindow().getPages();
        for (int i = 0; i < pages.length; i++) {
          if (((FileEditorInput) editor.getEditorInput()).getFile().getProject()
              .equals(event.getResource())) {
            IEditorPart editorPart = pages[i].findEditor(editor.getEditorInput());
            pages[i].closeEditor(editorPart, true);
          }
        }
      });
    }
  }
}

我们先关闭运行模式的eclipse,以调试模式打开(因为每次打开运行都比较慢,调试模式可以及时更新代码,不用重启环境,重新打开文件即可)

现在有4个页签了.

我们在源码输入一些东西

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Eclipse Plugin World</title>
</head>
<body>
  <h1>欢迎来到Eclipse 插件世界!</h1>
</body>
</html>

保存

我们再新建一个同名的js文件:  h5.js

然后关闭页签,再打开h5.html, 切换到JS底部页签,输入一个方法,保存

function getById(id) {
  return document.getElementById(id);
}

我们再新建一个同名的js文件:  h5.css

然后关闭页签,再打开h5.html, 切换到CSS底部页签,输入一个class,保存

.red {
  color: red;
}

我们再在h5.html引用h5.js和h5.css

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Eclipse Plugin World</title>
<link rel="stylesheet" type="text/css" href="h5.css" />
<script type="text/javascript" src="h5.js"></script>
</head>
<body>
  <h1 class="red">欢迎来到Eclipse 插件世界!</h1>
  <input id="invokeBtn" type="button" value="调用js" οnclick="alert(getById('invokeBtn').value)"> 
</body>
</html>

最终效果

例子到此结束.