让 HTML 向 Vue.js 华丽转身：如何把 `wangEditor` 仿腾讯文档项目整合进 Vue.js

繁依Fanyi

发布于 2024-09-09 09:17:50

730

发布于 2024-09-09 09:17:50

引言：从 HTML 到 Vue.js 的奇妙旅程

当我们谈论前端开发时，我们通常会面对这样一个现实：HTML 代码和 Vue.js 代码看起来就像来自不同世界的两种语言。你可能想要让 wangEditor 这个轻量级的富文本编辑器在你的 Vue.js 项目中大展身手，但你手头却只有一段纯粹的 HTML 代码。接下来，让我们一同踏上这段奇妙的旅程，将这段 HTML 转换成一个完美契合 Vue.js 的组件，并在这个过程中享受每一步的乐趣！

1. 起点：了解原始 HTML 代码

在开始我们的转换之旅之前，我们先来看看我们的起点——那段原始的 HTML 代码。它的结构非常简单，有一个顶部容器、一个工具栏、一个内容区域，以及一个用于显示文本编辑器的地方。

这段 HTML 代码虽然简单，但它具有强大的功能——这是一个富文本编辑器的基本结构，并且它模仿了腾讯文档的外观和感觉。

1.1 原始 HTML 代码回顾

<div id="top-container">
  <p>
    <a href="./index.html">&lt;&lt; 返回 Back to demo</a>
  </p>
</div>
<div style="border-bottom: 1px solid #e8e8e8;">
  <div id="editor-toolbar"></div>
</div>
<div id="content">
  <div id="editor-container">
    <div id="title-container">
      <input placeholder="Page title...">
    </div>
    <div id="editor-text-area"></div>
  </div>
</div>

这段 HTML 包含了一个顶栏（top-container）、一个工具栏容器（editor-toolbar）、一个主要的内容区域（content），以及一个文本输入区域（editor-text-area）。我们的目标是将它转换成 Vue.js 组件。

1.2 整体转换思路

将这段 HTML 转换成 Vue.js 代码的关键在于组件化。Vue.js 的最大特点就是把代码拆分成一个个独立的组件，而不是把所有内容都写在一个页面里。我们的目标是创建一个 Vue.js 组件，既可以复用又能方便地管理状态。

2. 一步一步拆解：从 HTML 到 Vue.js

2.1 第一步：将静态 HTML 转换为 Vue 模板

首先，我们将静态 HTML 直接转换为 Vue.js 模板。Vue.js 的模板语言本质上是增强版的 HTML，所以你几乎可以原封不动地把 HTML 代码放进 Vue 组件的 template 标签中。

Vue.js 模板中的 HTML

<template>
  <div id="top-container">
    <p>
      <a href="./index.html">&lt;&lt; 返回 Back to demo</a>
    </p>
  </div>
  <div style="border-bottom: 1px solid #e8e8e8;">
    <div id="editor-toolbar"></div>
  </div>
  <div id="content">
    <div id="editor-container">
      <div id="title-container">
        <input placeholder="Page title..." />
      </div>
      <div id="editor-text-area"></div>
    </div>
  </div>
</template>

2.2 第二步：为 `wangEditor` 编辑器初始化做准备

接下来，我们需要在 Vue.js 中初始化 wangEditor。在 HTML 代码中，wangEditor 是通过 <script> 标签直接引入并初始化的，但在 Vue.js 中，我们需要在组件的 mounted 钩子中进行初始化。

初始化 `wangEditor`

<script>
import { Editor, Toolbar } from '@wangeditor/editor-for-vue';

export default {
  name: 'WangEditorComponent',
  data() {
    return {
      editor: null,
      htmlContent: '',
    };
  },
  mounted() {
    const E = window.wangEditor;

    const editorConfig = {
      placeholder: 'Type here...',
      MENU_CONF: {
        uploadImage: {
          fieldName: 'your-fileName',
          base64LimitSize: 10 * 1024 * 1024,
        },
      },
      onChange: (editor) => {
        this.htmlContent = editor.getHtml();
      },
    };

    this.editor = E.createEditor({
      selector: '#editor-text-area',
      config: editorConfig,
    });

    E.createToolbar({
      editor: this.editor,
      selector: '#editor-toolbar',
    });
  },
  beforeDestroy() {
    if (this.editor) {
      this.editor.destroy();
    }
  },
};
</script>

2.3 第三步：处理 Vue.js 与 `wangEditor` 的数据绑定

在 Vue.js 中，我们通常希望通过双向数据绑定来管理表单输入和组件状态。在这个例子中，我们可以使用 v-model 来绑定输入框的内容，并在 wangEditor 的内容发生变化时更新我们的 Vue 数据。

数据绑定

<template>
  <div id="top-container">
    <p>
      <a href="./index.html">&lt;&lt; 返回 Back to demo</a>
    </p>
  </div>
  <div style="border-bottom: 1px solid #e8e8e8;">
    <div id="editor-toolbar"></div>
  </div>
  <div id="content">
    <div id="editor-container">
      <div id="title-container">
        <input v-model="pageTitle" placeholder="Page title..." />
      </div>
      <div id="editor-text-area"></div>
    </div>
  </div>
</template>

<script>
import { Editor, Toolbar } from '@wangeditor/editor-for-vue';

export default {
  name: 'WangEditorComponent',
  data() {
    return {
      editor: null,
      htmlContent: '',
      pageTitle: '',
    };
  },
  mounted() {
    const E = window.wangEditor;

    const editorConfig = {
      placeholder: 'Type here...',
      MENU_CONF: {
        uploadImage: {
          fieldName: 'your-fileName',
          base64LimitSize: 10 * 1024 * 1024,
        },
      },
      onChange: (editor) => {
        this.htmlContent = editor.getHtml();
      },
    };

    this.editor = E.createEditor({
      selector: '#editor-text-area',
      config: editorConfig,
    });

    E.createToolbar({
      editor: this.editor,
      selector: '#editor-toolbar',
    });
  },
  beforeDestroy() {
    if (this.editor) {
      this.editor.destroy();
    }
  },
};
</script>

3. 探索 Vue.js 组件的潜力：进一步优化与样式调整

3.1 让工具栏中的按钮居中

在 HTML 代码中，工具栏可能在某些情况下出现按钮不居中的问题。我们需要通过 CSS 调整来确保按钮在容器中正确对齐。

工具栏按钮居中对齐的 CSS 调整

/* 在 Vue.js 组件的样式部分添加以下 CSS */
#editor-toolbar {
  display: flex;
  justify-content: center;
  align-items: center;
}

.weditor {
  display: flex;
  justify-content: center;
}

3.2 响应式设计的优化

由于编辑器可能需要在不同尺寸的屏幕上使用，因此确保编辑器的响应式设计也是非常重要的。在样式上我们可以通过媒体查询来实现不同屏幕尺寸下的适配。

@media (max-width: 768px) {
  #editor-container {
    width: 100%;
    padding: 10px;
  }

  .weditor {
    width: 100%;
  }
}

4. 整体体验优化：从视觉到功能的全面提升

4.1 添加自定义按钮和功能

我们可以进一步丰富编辑器的功能，通过在工具栏中添加自定义按钮或菜单项来提供额外的编辑选项。

4.2 性能优化与资源加载

在实际项目中，性能优化也是不可忽视的部分。通过按需加载资源和异步初始化，可以显著提升用户体验。

4.3 持久化编辑器内容

如果希望用户在编辑内容时保持数据的持久化（如自动保存草稿），我们可以利用 Vue.js 的 watch 监听器来实时保存内容。

watch: {
  htmlContent(newValue) {
    localStorage.setItem('editorContent', newValue);
  },
},
mounted() {
  const savedContent = localStorage.getItem('editorContent');
  if (savedContent) {
    this.editor.setHtml(savedContent);
  }
},

5. 总结与展望：从 HTML 到 Vue.js 的蜕变

经过这些步骤，我们已经成功地将原始的 HTML 代码转变为一个功能完备的 Vue.js 组件，并通过一系列优化确保了它的易用性和美观性。这个过程不仅仅是代码的转换，更是对开发思维的拓展。从最初的静态 HTML 到如今的动态 Vue.js 组件，我们经历了一次代码的华丽蜕变。

在未来的开发中，我们可以继续探索更多的自定义功能和样式优化，以不断提升用户体验。这段旅程虽然结束，但前端开发的无限可能性才刚刚开始。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2024-09-07，如有侵权请联系 cloudcommunity@tencent.com 删除

html

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度