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" target="_blank" rel="external nofollow"  />
<script type="text/javascript" src="h5.js"></script>
</head>
<body>
  <h1 class="red">歡迎來到Eclipse 插件世界!</h1>
  <input id="invokeBtn" type="button" value="調用js" onclick="alert(getById('invokeBtn').value)"> 
</body>
</html>
           

最終效果

例子到此結束.