Alloy Editor 使用教程

最新推荐文章于 2024-10-10 08:39:48 发布

蓬虎泓Anthea

最新推荐文章于 2024-10-10 08:39:48 发布

阅读量302

点赞数 3

本文链接：https://blog.csdn.net/gitblog_00828/article/details/142777047

版权

Alloy Editor 使用教程

alloy-editor WYSIWYG editor based on CKEditor with completely rewritten UI 项目地址: https://gitcode.com/gh_mirrors/al/alloy-editor

1. 项目介绍

Alloy Editor 是一个基于 CKEditor 的现代化 WYSIWYG（所见即所得）编辑器，其用户界面经过完全重写，旨在创建现代且美观的网页内容。Alloy Editor 支持 IE11、Chrome、Firefox 和 Safari 等主流浏览器。它提供了智能工具栏、自定义按钮、粘贴图像、拖放功能以及从设备摄像头插入图像等功能。

2. 项目快速启动

安装

首先，通过 npm 安装 Alloy Editor：

npm install alloyeditor --save

使用

在你的项目中引入 Alloy Editor，并初始化它：

import AlloyEditor from 'alloyeditor';

document.addEventListener('DOMContentLoaded', () => {
    AlloyEditor.editable('editable-container');
});

示例代码

以下是一个简单的 HTML 文件，展示了如何使用 Alloy Editor：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Alloy Editor Example</title>
    <link href="node_modules/alloyeditor/dist/alloy-editor/assets/alloy-editor-ocean-min.css" rel="stylesheet">
</head>
<body>
    <div id="editable-container" contenteditable="true">
        <p>开始编辑你的内容...</p>
    </div>
    <script src="node_modules/alloyeditor/dist/alloy-editor/alloy-editor-all-min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            AlloyEditor.editable('editable-container');
        });
    </script>
</body>
</html>