前端常用的一些编辑器库

在 Vue3 TypeScript 中可以使用一些第三方库来实现代码文本编辑器，以下是一些常用的库：

CodeMirror：一个灵活、易于集成的代码编辑器，支持多种语言和主题。
Monaco Editor：由微软开发的高性能代码编辑器，支持多种语言和主题。
Ace Editor：一个轻量、快速、易于扩展的代码编辑器，支持多种语言和主题。
Quill：一个功能强大的富文本编辑器，支持自定义插件和主题。
SimpleMDE：一个简单的 Markdown 编辑器，支持实时预览和自定义样式。
Vue-Code-Editor：一个基于 Monaco Editor 的 Vue3 组件，提供了多种配置和事件。

你可以根据项目需求和个人喜好选择相应的代码编辑器。

tinymce http://tinymce.ax-z.cn/
- 示例 https://www.cnblogs.com/huihuihero/p/13877589.html
- cooj/tinymce-vue3（基于tinymce封装） https://github.com/cooj/tinymce-vue3
  - 示例在线使用 https://cooj.github.io/tinymce-vue3/#/
- npm i @packy-tang/vue-tinymce@next https://packy-tang.gitee.io/vue-tinymce/#/
  - 示例使用 vue-tinymce-example/vue at master · lpreterite/vue-tinymce-example · GitHub
monaco-editor https://microsoft.github.io/monaco-editor/
- monaco-vue monaco-editor的封装 GitHub - imguolao/monaco-vue: Use monaco-editor loaded from CDN in Vue 2&3,
  - 不需要给 webpack (or rollup, vite) 等打包工具配置插件，就可以在 Vue 中使用 monaco-editor（从 CDN 加载）。
  - 如果你想以 NPM Package 的形式使用 monaco-editor，从 node_modules 加载 monaco-editor 文件打包到你的代码中，则仍需要使用打包工具的插件，具体可查看此处。
  - 如果使用 vite，你需要这样做（具体可查看 #1791 (comment)）：
  - 如果使用 Rollup，你可以使用社区提供的插件 rollup-plugin-monaco-editor。
  - 如果使用 webpack，monaco-editor 官方提供了 webpack 的插件 monaco-editor-webpack-plugin，你可以安装并使用它。

TinyMCE是一款易用、且功能强大的所见即所得的富文本编辑器。同类程序有：UEditor、Kindeditor、Simditor、CKEditor、wangEditor、Suneditor、froala等等。

TinyMCE的优势：

开源可商用，基于LGPL2.1
插件丰富，自带插件基本涵盖日常所需功能（示例看下面的Demo-2）
接口丰富，可扩展性强，有能力可以无限拓展功能
界面好看，符合现代审美
提供经典、内联、沉浸无干扰三种模式（详见“介绍与入门”）
对标准支持优秀（自v5开始）
多语言支持，官网可下载几十种语言。

官网及文档：www.tiny.cloud（右键）

官网下载：www.tiny.cloud/get-tiny/self-hosted/（右键）

Github：github.com/tinymce（右键）

【推荐】为vue开发者整合的tinymce组件（右键）

注：此中文文档自TinyMCE v5开始编写，对v4不做介绍。本站所用版本为v5

vue3使用monaco-editor的示例

以下是在Vue 3中使用monaco-editor的示例：

首先，安装monaco-editor和@vueuse/motion依赖：

npm install monaco-editor @vueuse/motion

在main.ts中引入monaco-editor的CSS样式：

import 'monaco-editor/esm/vs/editor/editor.all.css';

在组件中使用monaco-editor，例如：

<template>
  <div>
    <div ref="editorContainer" style="height: 600px;"></div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import * as monaco from 'monaco-editor';
import { useMotionPlugin } from '@vueuse/motion';

export default defineComponent({
  setup() {
    const editor = ref<monaco.editor.IStandaloneCodeEditor | null>(null);
    const editorContainer = ref<HTMLDivElement | null>(null);

    useMotionPlugin();

    const initEditor = () => {
      if (editorContainer.value) {
        editor.value = monaco.editor.create(editorContainer.value, {
          value: '',
          language: 'typescript',
        });
      }
    };

    return {
      editorContainer,
      initEditor,
    };
  },
  mounted() {
    this.initEditor();
  },
});
</script>

在上面的示例中，我们引入了monaco-editor和@vueuse/motion依赖，然后在组件中使用monaco-editor。我们使用ref定义了两个变量editor和editorContainer，并在setup函数中初始化了编辑器。在mounted函数中调用了initEditor函数来初始化编辑器。

这个示例只是最基本的示例，你可以通过更改value和language属性来设置编辑器的内容和语言。还可以通过使用editor.getValue()方法来获取编辑器的内容。

前端常用的一些编辑器库

vue3使用monaco-editor的示例

悦读