組件整合

前言

在上一篇文章中，我們對整個編輯器項目的大體結構有了一定的了解，主要分為菜單欄和編輯區(qū)。菜單欄包括了編輯器的主要文本操作功能，且菜單項是可配置的。編輯器界面顯示比較簡單，是一個可編輯的 div 區(qū)域。接下來我們就來把編輯器的整體框架搭建起來，讓其可以在界面上顯示出來。

整合菜單

首先，在 components 目錄下，新建兩個目錄，分別是 content 目錄，存放編輯區(qū)相關組件；和 menu 目錄，存放菜單相關組件。然后在 menu 目錄下新建一個文件 menubar.vue ，這就是菜單欄組件，菜單項將要被整合到這個組件里。

下面我們就來完成 menubar.vue 這個文件的編寫

模板編寫（template）

先給出代碼：

<template>
  <div class="syl-editor-menubar" id="syl-editor-menubar">
    <div v-for="menu in viewMenu" :key="menu" class="menubar-item">
      <a
        href="javascript:;"
        :class="[stated[menu].status, menus[menu].className]"
        @click.stop="handleEvent($event, menu)"
        :title="lang[menu].title"
      >
        <span>
          <i :class="menus[menu].icon" aria-hidden="true"></i>
        </span>
        <span v-if="menus[menu].dropList">
          <i
            :class="[
              'drop-list-icon',
              stated[menu].showDropList ? 'fa fa-angle-up' : 'fa fa-angle-down',
            ]"
            aria-hidden="true"
          ></i>
        </span>
      </a>
    </div>
  </div>
</template>

首先是模版外層的代碼，這是通用寫法，以 <template></template> 標簽表示這是模版部分。

這里的數(shù)據(jù)對象有四個：menus，全部菜單項配置；viewMenus ，可見的菜單項；stated，store 中的數(shù)據(jù)源；lang，菜單的語言集。

因為之前配置了很多菜單項，包括 className，action，以及 icon 等。同時，我們在編輯器全局配置中，配置了 viewMenu 選項，即可見的菜單。所以使用 v-for 循環(huán)取出菜單項的時候，應該從 viewMenu 中讀取。

另外，項目中使用的圖標來自于 fontawesome，因為它的資源較多且大部分都是免費的。需要的伙伴們可以私信博主免費獲取本項目用到的字體圖標資源。

Js 代碼編寫

同樣，這里也先給出代碼：

<script>
import Config from "../../config/index";
import Menu from "../../config/menu";
import lang from "../../config/lang";

export default {
  name: "MenubarComponent",
  data() {
    let { viewMenu } = Config.getConfig();
    let menus = Menu.getMenu();
    return {
      viewMenu,
      menus,
      lang,
    };
  },
  computed: {
    stated: function () {
      return this.$store.state.menuBar;
    },
  },
  methods: {
    handleEvent($event, menu) {
      if (this.stated[menu].status == "disable") {
        return;
      }
      this.showDropList($event, menu);
      this.updateMenu(menu);
    },
    showDropList($event, menu) {
      if (this.menus[menu].dropList) {
        this.$store.dispatch("showDropList", {
          name: menu,
          display: !this.$store.state.menuBar[menu].showDropList,
        });
        this.$store.dispatch(
          "getNodePosition",
          $event.currentTarget.getBoundingClientRect()
        );
      }
    },
    updateMenu(menu) {
      let state = {};
      if (this.menus[menu].action) {
        this.$store.dispatch("execCommand", {
          name: this.menus[menu].action,
          value: null,
        });
        if (this.stated[menu].status) {
          state[menu] =
            this.stated[menu].status == "active" ? "default" : "active";
        }
      }
      this.$store.dispatch("updateMenuStatus", state);
    },
  },
};
</script>

引入相關的配置文件，讀取所需數(shù)據(jù)。在組件中， data 必須是一個函數(shù)。在 data 函數(shù)中，返回之前使用的 menu 、 viewMenu 、 lang 。

在 computed 中，返回 store 中 menuBar 的相關數(shù)據(jù)。前面的文章說過，在組件中獲取 store 數(shù)據(jù)，最好的方式就是在 computed 屬性中獲取。這里的 stated 就表示 menuBar 菜單欄對象，保存著各個菜單項的狀態(tài)。

在 methods 屬性中，包含了三個方法。 handleEvent 用于處理菜單欄的點擊事件。同時傳入點擊事件和當前菜單項。然后處理該菜單項的下拉框展示，以及更新菜單欄的狀態(tài)和行為。

樣式編寫

在本項目中，我們的樣式代碼不使用 css，而是使用 css 的擴展語言：sass(scss)。如果有興趣，可以去了解一下，其實 sass 和 css 代碼比較類似，不過 sass 更加靈活，寫起來更加方便。不過使用的時候，需要被編譯為 css 代碼，所以需要添加相關的 loader 來處理。所以需要先安裝相應的 loader：

npm install sass-loader sass webpack --save-dev

安裝完成之后，我們就可以開始編寫樣式代碼了：

<style lang="scss" scoped>
.syl-editor-menubar {
  border: 1px solid #666;
  border-bottom: none;
}
.menubar-item {
  display: flex;
  height: 40px;
  width: 5%;
  padding: 0 1px;
  align-content: center;
  justify-content: center;
  > a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    width: 100%;
    color: #666;
    &.active {
      background: #eee;
    }
    &.default {
      background: #fff;
    }
    &.disable {
      background: #eee;
      cursor: not-allowed;
      opacity: 0.5;
    }
    &:hover {
      background: #eee;
    }
  }
}
.drop-list-icon {
  font-size: 12px;
  margin-left: 5px;
}
</style>

整合編輯器

在 content 目錄下，新建一個文件 editarea.vue 。這是編輯區(qū)組件，后續(xù)大部分操作都將在這里面進行，不過暫時不需要做太多工作。代碼如下：

<template>
  <div class="syl-editor-editarea">
    <div class="edit-area" id="syl-editor-body" contenteditable="true">
      hello shiyanlou!
    </div>
  </div>
</template>

<script>
export default {
  name: "EditareaComponent",
  data() {
    return {};
  },
};
</script>

<style lang="scss" scoped>
.syl-editor-editarea {
  height: 458px;
  min-height: 458px;
  border: 1px solid #666;
  text-align: left;
  padding: 10px 15px;
  overflow-y: auto;
  .edit-area {
    height: 95%;
    outline: none;
    &:active {
      outline: none;
    }
  }
}
</style>

這就是編輯區(qū)的代碼，暫時比較少，后續(xù)會逐步增加。注意，雖然這是我們的編輯區(qū)，但是卻沒有任何的文本輸入框或者文本輸入?yún)^(qū)域。而只是有一個 div 而已，但是這個 div 具有一個屬性 contenteditable="true" ，就是原因所在。

contenteditable 是 HTML5 的一個新屬性，它的作用是規(guī)定當前元素的內(nèi)容是否可編輯，比如：

<p contenteditable="true">這是一段可編輯的段落。請試著編輯該文本。</p>

添加了這個屬性之后，這一個段落就是可編輯的段落，可隨意修改。

接下來在 components 文件夾下創(chuàng)建 layout.vue 。作為主要布局組件。在布局中，需要將所有的組件都在這里組裝起來，包含菜單組件，編輯區(qū)組件， 以及下拉框組件。

<template>
  <div class="hello syl-editor">
    <syl-menubar></syl-menubar>
    <syl-editarea></syl-editarea>
    <div class="drop-list">
      <div v-for="item in list" :key="item">
        <component :is="'syl-' + item"></component>
      </div>
    </div>
  </div>
</template>
<script>
import Menubar from "./menu/menubar";
import Editarea from "./content/editarea";

export default {
  name: "LayoutComponent",
  data() {
    return {
      list: [], // 下拉框組件列表
    };
  },
  components: {
    // 存放組件
    "syl-menubar": Menubar,
    "syl-editarea": Editarea,
  },
};
</script>

<style lang="scss">
h1,
h2 {
  font-weight: normal;
}

li {
  margin: 0;
}

a {
  color: #42b983;
  cursor: pointer;
}

table {
  width: 100%;
  margin: 5px 0 10px 0;
  tr {
    td {
      min-width: 50px;
      padding: 5px;
      border-left: 1px solid #ddd;
      border-top: 1px solid #ddd;
      &:last-child {
        border-right: 1px solid #ddd;
      }
    }
    &:last-child {
      td {
        border-bottom: 1px solid #ddd;
      }
    }
  }
}

img {
  max-width: 100%;
  max-height: auto;
}

.syl-editor {
  max-width: 1000px;
  margin: 0 auto;
}

.drop-list-item {
  max-width: 200px;
  position: absolute;
  border: 1px solid #eee;
  background: #fff;
  li {
    border-bottom: 1px solid #eee;
    a {
      display: inline-block;
      text-decoration: none;
      color: #666;
    }
    &:last-child {
      border: none;
    }
  }
  &:before {
    content: " ";
  }
}
</style>

最后一步，修改 App.vue 的內(nèi)容。這是根組件位置，布局組件需要存放到這個組件里：

<template>
  <div id="app">
    <Layout></Layout>
  </div>
</template>

<script>
import Layout from "./components/layout";

export default {
  name: "app",
  data() {
    return {};
  },
  components: {
    Layout,
  },
};
</script>

代碼很簡單，只需要導入 Layout 布局組件即可。

在 style 部分，需要做一點工作。因為項目中所使用的圖標或者某些樣式是用的 font-awesome 。所以，我們需要將它在此處引入到根組件中。首先需要下載并解壓到 /src/assets 文件夾下（需要該文件的伙伴可以私信博主免費獲取）：

最后，在 App.vue 添加 style 部分代碼如下：

<style>
@import "../src/assets/font-awesome-4.7.0/css/font-awesome.min.css";

#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.syl-editor-menubar {
  min-height: 40px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-start;
}
</style>

完成到這里，我們就可以啟動項目了 npm run serve，啟動成功后，我們打開瀏覽器查看效果如下：

文章來源地址http://www.zghlxwxcb.cn/news/detail-819930.html

到了這里，關于【富文本編輯器實戰(zhàn)】04 菜單組件和編輯器的整合的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！