yeditor 技术接口文档

本文档说明如何将优雅草 HTML 编辑器 (yeditor) 接入到各类开发语言与框架中。yeditor 为纯前端脚本，仅需在页面中引入 yeditor.js 与 yeditor.css，在目标容器上实例化即可。

一、基础引入（原生 HTML / 任意后端）

将 src/yeditor.js 与 src/yeditor.css 拷贝到项目中，在页面中引入并初始化。

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="path/to/yeditor.css">
</head>
<body>
  <div id="editor"></div>
  <script src="path/to/yeditor.js"></script>
  <script>
    var editor = new YEditor('#editor', {
      placeholder: '在此输入…',
      minHeight: 200,
      maxHeight: 500,
      toolbar: ['fontSize','fontColor','|','bold','italic','underline','|','alignLeft','alignCenter','alignRight','alignJustify','|','h2','h3','|','ul','ol','|','link','image','images','|','code','source']
    });
    var html = editor.getHTML();
    editor.setHTML('<p>初始内容</p>');
  </script>
</body>
</html>

二、配置项 (options)

参数	类型	默认值	说明
placeholder	string	在此输入内容…	占位提示文字
minHeight	number	200	编辑器最小高度(px)
maxHeight	number	500	编辑器最大高度(px)
toolbar	array	见下方	工具栏项，'\|' 表示分隔线

toolbar 可选值： fontSize, fontColor, bold, italic, underline, alignLeft, alignCenter, alignRight, alignJustify, h2, h3, ul, ol, link, image, images, code, source

三、实例方法 (API)

方法	说明
getHTML()	获取编辑器当前 HTML 字符串
setHTML(html)	设置编辑器 HTML 内容
getText()	获取纯文本内容
focus()	使编辑器获得焦点
destroy()	销毁编辑器实例

四、Vue 2 / Vue 3 接入

在 mounted（Vue 2）或 onMounted（Vue 3）中创建实例，在 beforeUnmount / onBeforeUnmount 中销毁。

// 1. 在 main.js 或入口中全局引入（或仅在使用的组件内引入）
import 'path/to/yeditor.css';
import 'path/to/yeditor.js';

// 2. 组件内
export default {
  data() { return { editor: null }; },
  mounted() {
    this.editor = new window.YEditor(this.$refs.editorHost, {
      placeholder: '请输入内容',
      minHeight: 200,
      toolbar: ['fontSize','fontColor','|','bold','italic','underline','|','alignLeft','alignCenter','alignRight','|','h2','h3','|','ul','ol','|','link','image','images','|','code','source']
    });
  },
  beforeUnmount() {
    if (this.editor) this.editor.destroy();
  }
};

// 模板
// <div ref="editorHost"></div>

Vue 3 Composition API 示例：

import { ref, onMounted, onBeforeUnmount } from 'vue';
import 'path/to/yeditor.css';
import 'path/to/yeditor.js';

const editorHost = ref(null);
let editor = null;
onMounted(() => {
  editor = new window.YEditor(editorHost.value, { placeholder: '请输入内容', minHeight: 200 });
});
onBeforeUnmount(() => { if (editor) editor.destroy(); });

// 获取内容：editor.getHTML()

五、React 接入

使用 useRef 挂载容器，在 useEffect 中创建与销毁实例。

import { useRef, useEffect } from 'react';
import 'path/to/yeditor.css';
import 'path/to/yeditor.js';

function Editor() {
  const hostRef = useRef(null);
  const editorRef = useRef(null);

  useEffect(() => {
    if (!hostRef.current) return;
    editorRef.current = new window.YEditor(hostRef.current, {
      placeholder: '请输入内容',
      minHeight: 200,
      toolbar: ['fontSize','fontColor','|','bold','italic','underline','|','alignLeft','alignCenter','alignRight','|','h2','h3','|','ul','ol','|','link','image','images','|','code','source']
    });
    return () => {
      if (editorRef.current) editorRef.current.destroy();
    };
  }, []);

  const getContent = () => editorRef.current?.getHTML();
  const setContent = (html) => editorRef.current?.setHTML(html);

  return <div ref={hostRef} />;
}

六、jQuery / 传统 JS 接入

// 选择器传入
var editor = new YEditor('#editor', { minHeight: 260 });

// 或传入 DOM 元素
var el = document.getElementById('editor');
var editor = new YEditor(el, { placeholder: '在此输入' });

var html = editor.getHTML();
editor.setHTML('<p>预设内容</p>');

七、PHP 等服务端渲染

在服务端输出 HTML 时，将 yeditor 的 CSS/JS 路径指向项目内静态资源，在表单页中预留一个 <div id="content-editor"></div>，提交时通过隐藏域或 Ajax 提交 editor.getHTML() 的值即可。无需服务端特殊接口，与语言无关。

<!-- 例如 PHP 模板中 -->
<div id="content-editor"></div>
<input type="hidden" name="content" id="content-html">
<script src="/static/yeditor.js"></script>
<script>
  var editor = new YEditor('#content-editor', {});
  document.querySelector('form').onsubmit = function() {
    document.getElementById('content-html').value = editor.getHTML();
  };
</script>

八、Angular 接入思路

在 angular.json 的 scripts 与 styles 中引入 yeditor.js / yeditor.css，或在组件中动态加载。在组件的 ngAfterViewInit 中对 ViewChild 的容器调用 new YEditor(containerRef.nativeElement, options)，在 ngOnDestroy 中调用 editor.destroy()。

以上为 yeditor 接入各语言/框架的通用方式。编辑器仅依赖浏览器原生能力，无构建要求，任意能输出 HTML 并执行 JS 的环境均可使用。更多问题可至 Gitee 仓库提 Issue。