WYSIWYG，全称 What You See Is What You Get，即“所见即所得”的编辑器，就是可以直接在界面上进行编辑，能够像 Word 一样实时预览效果的编辑器。在前端开发中，我们通常使用富文本编辑器实现 WYSIWYG。Element UI 在 Vue 项目中提供了富文本编辑器，本文将介绍如何在 Vue 项目中使用 Element UI 的富文本编辑器。
安装 Element UI
我们需要在项目中安装 Element UI，可以通过 npm 安装：
npm install element-ui --save
然后在项目入口处引入 Element UI：
import Vue from 'vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI)
在 Vue 中使用富文本编辑器
接下来，我们将使用 Element UI 的富文本编辑器。
-- -------------------- ---- -------
----------
-----
---------- ------------------------------
------
-----------
--------
------ ------- -
------ -
------ -
-------- --
--
-
-
---------在上面的代码中，我们建立了一个 Vue 组件，使用 el-editor 渲染 Element UI 的富文本编辑器。v-model 指令用于双向绑定富文本编辑器的内容，这意味着当我们更改编辑器中的内容时，Vue 组件中的数据也会跟着变化。
现在启动应用程序，就可以看到一个 Element UI 的富文本编辑器了。
自定义富文本编辑器工具栏
我们可以自定义富文本编辑器的工具栏，为我们的编辑器提供更多的功能。
-- -------------------- ---- -------
----------
-----
---------- ----------------- -------------------------------
------
-----------
--------
------ ------- -
------ -
------ -
-------- ---
-------- -
------------ ------- --------- ------------ --------- -------------
-------- ------- ------- -------- -------- ----- ------- ------- ------
-
--
-
-
---------在上面的代码中，我们在 data 属性中定义了一个名为 toolbar 的属性，它包含了编辑器的工具栏。在这个示例中，我们添加了 font-size、bold、italic、underline、strike、blockquote、align、list、link、image、table、hr、code、undo 和 redo 等工具栏按钮。
手动控制编辑器内容
自定义工具栏是很好的，但是在有些情况下，我们需要手动控制富文本编辑器中的内容。我们可以通过获取富文本编辑器实例来手动操作它的内容。
-- -------------------- ---- -------
----------
-----
---------- ---------------------------
------- -----------------------------------
------- -----------------------------------
------
-----------
--------
------ ------- -
-------- -
------------ -
-------------------------------------------- - ----------------
--
------------ -
----------------------------------------------------------
-
-
-
---------在上面的代码中，我们添加了两个按钮，一个用于设置编辑器内容，另一个用于获取编辑器内容。我们使用 $refs 引用 ref 属性为 myEditor 的富文本编辑器，然后手动控制它的内容。
总结
Vue + Element UI 的组合非常适合构建富文本编辑器，而且开发起来也非常简单。在本文中，我们详细介绍了如何在 Vue 项目中使用 Element UI 的富文本编辑器，并演示了如何自定义富文本编辑器的工具栏和手动控制编辑器内容。希望本文对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6488c77c48841e989472934f