vue3 引入 wangeditor 富文本编辑器 与 highlight 代码高亮工具 的方法及注意事项

在Vue 3中引入WangEditor富文本编辑器和Highlight.js代码高亮工具是构建现代Web应用程序时的一种常见需求。本文将详细介绍如何在Vue 3项目中实现这两个功能。

一、环境准备

确保你已安装Node.js和Vue CLI工具，并创建了一个新的Vue 3项目。你可以使用以下命令创建一个项目：

vue create my-vue-app

二、引入WangEditor

1. 安装WangEditor：

首先，在项目中安装WangEditor：

npm install wangeditor --save

1. 创建编辑器组件：

在src/components/目录下创建一个名为RichTextEditor.vue的文件，并添加以下代码：

<template>
  <div>
    <div ref="editorContainer" style="border: 1px solid #ddd; height: 400px;"></div>
  </div>
</template>

<script>
import E from 'wangeditor';

export default {
  name: 'RichTextEditor',
  mounted() {
    const editor = new E(this.$refs.editorContainer);

    // 配置编辑器
    editor.config.onCreated = () => {
      console.log('编辑器创建成功');
    };

    editor.config.onChange = () => {
      const html = editor.txt.html(); // 获取HTML文本
      console.log(html);
    };

    editor.create();
  }
};
</script>

<style>
/* 添加WangEditor的样式 */
</style>

以上代码中，我们创建了一个新的富文本编辑器实例，并监听了一些事件，比如创建和变化。

三、引入Highlight.js

1. 安装Highlight.js：

接下来，安装Highlight.js库：

npm install highlight.js --save

1. 创建高亮代码组件：

在src/components/目录下创建一个名为CodeHighlighter.vue的文件，并添加以下代码：

<template>
  <pre><code class="language-js">{{ code }}</code></pre>
</template>

<script>
import hljs from 'highlight.js';
import 'highlight.js/styles/dark.css'; // 引入主题样式

export default {
  name: 'CodeHighlighter',
  props: {
    code: {
      type: String,
      required: true
    }
  },
  mounted() {
    hljs.highlightBlock(this.$el.querySelector('code'));
  }
};
</script>

<style scoped>
/* 添加样式以使代码块更美观 */
pre {
  padding: 10px;
  background: #f5f5f5;
}
</style>

在这里，我们创建了一个接收代码字符串的高亮组件，并使用Highlight.js进行代码高亮处理。

四、在主组件中使用这两个组件

接下来，我们在主应用组件中一起使用这两个组件。在src/App.vue中，添加如下代码：

<template>
  <div id="app">
    <h1>富文本编辑器与代码高亮</h1>
    <RichTextEditor ref="richTextEditor"/>
    <CodeHighlighter :code="codeSnippet"/>
  </div>
</template>

<script>
import RichTextEditor from './components/RichTextEditor.vue';
import CodeHighlighter from './components/CodeHighlighter.vue';

export default {
  name: 'App',
  components: {
    RichTextEditor,
    CodeHighlighter
  },
  data() {
    return {
      codeSnippet: `const hello = 'Hello, World!';\nconsole.log(hello);`
    };
  }
};
</script>

<style>
/* 添加样式以优化视觉效果 */
</style>

注意事项

1. CSS冲突：由于两者都可能引入一些样式，确保它们的样式不发生冲突，必要时进行样式覆盖。
2. 代码安全：在使用WangEditor提交与展示内容时，务必对用户输入进行严格的存储和输出过滤，以防止XSS攻击。
3. 高亮规则：Highlight.js支持多种代码语言，确保在代码块中正确指定语言，这样高亮效果才能正常工作。

总结

通过上述步骤，我们成功地在Vue 3项目中引入了WangEditor富文本编辑器和Highlight.js代码高亮工具。这两者结合为用户提供了灵活的文本编辑和代码显示能力，非常适合需要用户交互的Web应用程序。希望对你有所帮助！