README

Jodit 编辑器

Jodit 编辑器是一个使用纯 TypeScript 编写的出色 WYSIWYG 编辑器，不使用任何额外的库。它包括文件编辑器和图片编辑器。

• 演示和官方网站
• 专业版
• 构建器
• 游乐场 - 使用选项进行游戏
• 文档
• 下载 & 变更
• 变更日志
• 示例
• TypeScript 入门

开始使用

如何使用

下载最新版本 发布 或通过 npm

npm install jodit

您将获得以下文件

• 在 /esm 中：编辑器的 ESM 版本（与 webpack 等工具兼容）
• 在 /es5、/es2015、/es2018、/es2021 中：UMD 打包文件（未压缩）
• 在 /es5、/es2015、/es2018、/es2021 中，扩展名为 .min.js：UMD 打包和压缩文件
• types/index.d.ts：此文件指定了编辑器的 API。它是版本化的，而其他所有内容都视为私有，可能会随着每个版本而更改。

将 Jodit 包含到您的项目中

包含以下两个文件

ES5 版本

<link type="text/css" rel="stylesheet" href="es2015/jodit.min.css" />
<script type="text/javascript" src="es2015/jodit.min.js"></script>

ES2021 版本（仅适用于现代浏览器）

<link type="text/css" rel="stylesheet" href="es2021/jodit.min.css" />
<script type="text/javascript" src="es2021/jodit.min.js"></script>

ESM 模块

<script type="importmap">
  {
    "imports": {
      "autobind-decorator": "https://unpkg.com/autobind-decorator@2.4.0/lib/esm/index.js"
    }
  }
</script>
<link rel="stylesheet" href="./node_modules/jodit/es2021/jodit.min.css" />
<script type="module">
  import { Jodit } from './node_modules/jodit/esm/index.js';
  Jodit.make('#editor', {
    width: 600,
    height: 400
  });
</script>

ESM 模块自动仅包含 基本插件集 和英语语言。您可以根据需要手动包含额外的插件和语言。

<script type="importmap">
  {
    "imports": {
      "autobind-decorator": "https://unpkg.com/autobind-decorator@2.4.0/lib/esm/index.js"
    }
  }
</script>
<link rel="stylesheet" href="./node_modules/jodit/es2021/jodit.min.css" />
<script type="module">
  import { Jodit } from './node_modules/jodit/esm/index.js';
  import './node_modules/jodit/esm/plugins/add-new-line/add-new-line.js';
  import './node_modules/jodit/esm/plugins/fullsize/fullsize.js';
  import de from './node_modules/jodit/esm/langs/de.js';

  Jodit.langs.de = de;

  Jodit.make('#editor', {
    width: 600,
    height: 400,
    language: 'de'
  });
</script>

使用 CDN

cdnjs

<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/jodit/4.0.1/es2021/jodit.min.css"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jodit/4.0.1/es2021/jodit.min.js"></script>

unpkg

<link
  rel="stylesheet"
  href="https://unpkg.com/jodit@4.0.1/es2021/jodit.min.css"
/>
<script src="https://unpkg.com/jodit@4.0.1/es2021/jodit.min.js"></script>

用法

将 textarea 元素添加到您的 HTML 中

<textarea id="editor" name="editor"></textarea>

在 textarea 上初始化 Jodit

const editor = Jodit.make('#editor');
editor.value = '<p>start</p>';

创建插件

Jodit.plugins.yourplugin = function (editor) {
  editor.events.on('afterInit', function () {
    editor.s.insertHTMl('Text');
  });
};

添加自定义按钮

const editor = Jodit.make('.someselector', {
  extraButtons: [
    {
      name: 'insertDate',
      iconURL: 'https://xdsoft.net/jodit/logo.png',
      exec: function (editor) {
        editor.s.insertHTML(new Date().toDateString());
        editor.synchronizeValues(); // For history saving
      }
    }
  ]
});

或

const editor = Jodit.make('.someselector', {
  buttons: ['bold', 'insertDate'],
  controls: {
    insertDate: {
      name: 'insertDate',
      iconURL: 'https://xdsoft.net/jodit/logo.png',
      exec: function (editor) {
        editor.s.insertHTML(new Date().toDateString());
      }
    }
  }
});

带有插件的按钮

Jodit.plugins.add('insertText', function (editor) {
  editor.events.on('someEvent', function (text) {
    editor.s.insertHTMl('Hello ' + text);
  });
});

// or

Jodit.plugins.add('textLength', {
  init(editor) {
    const div = editor.create.div('jodit_div');
    editor.container.appendChild(div);
    editor.events.on('change.textLength', () => {
      div.innerText = editor.value.length;
    });
  },
  destruct(editor) {
    editor.events.off('change.textLength');
  }
});

// or use class

Jodit.plugins.add(
  'textLength',
  class textLength {
    init(editor) {
      const div = editor.create.div('jodit_div');
      editor.container.appendChild(div);
      editor.events.on('change.textLength', () => {
        div.innerText = editor.value.length;
      });
    }
    destruct(editor) {
      editor.events.off('change.textLength');
    }
  }
);

const editor = Jodit.make('.someselector', {
  buttons: ['bold', 'insertText'],
  controls: {
    insertText: {
      iconURL: 'https://xdsoft.net/jodit/logo.png',
      exec: function (editor) {
        editor.events.fire('someEvent', 'world!!!');
      }
    }
  }
});

文件浏览器和上传器

为了测试文件浏览器和上传器模块，需要安装 PHP 连接器

composer create-project --no-dev jodit/connector

运行测试 PHP 服务器

php -S localhost:8181 -t ./

并为 Jodit 设置选项

const editor = Jodit.make('#editor', {
  uploader: {
    url: 'https://:8181/index-test.php?action=fileUpload'
  },
  filebrowser: {
    ajax: {
      url: 'https://:8181/index-test.php'
    }
  }
});

浏览器支持

• Internet Explorer 11
• 最新版 Chrome
• 最新版 Firefox
• 最新版 Safari
• Microsoft Edge

许可证

MIT