📌  相关文章
📜  使用 tinymce 和顺风 css (1)

📅  最后修改于: 2023-12-03 14:49:47.193000             🧑  作者: Mango

使用 tinymce 和顺风 css
介绍

tinymce 是一个开源的所见即所得编辑器，支持 HTML 的大部分特性，例如：字体、颜色、尺寸等等。它可以很方便地集成到各种 Web 应用程序中。

顺风 css 是一个样式库，包含了各种常用的样式，例如：按钮、表格、线条等等。它可以帮助我们快速地搭建出基础的网页界面。

结合 tinymce 和顺风 css，我们可以很方便地制作出一个美观、易用的编辑器。

安装

tinymce

tinymce 可以通过 npm 安装：

npm install tinymce --save

然后引入它：

<script src="./node_modules/tinymce/tinymce.min.js"></script>

顺风 css

可以通过 CDN 引入：

<link rel="stylesheet" href="https://unpkg.com/sunflower-ui">

也可以通过 npm 安装：

npm install sunflower-ui --save

然后引入它：

<link rel="stylesheet" href="./node_modules/sunflower-ui/dist/sunflower-ui.min.css">
使用

初始化 tinymce

在引入 tinymce 后，我们需要初始化它：

tinymce.init({
    selector: '#myTextarea',
    plugins: [
        'advlist autolink lists link image charmap print preview anchor',
        'searchreplace visualblocks code fullscreen',
        'insertdatetime media table paste code help wordcount'
    ],
    toolbar: 'undo redo | formatselect | ' +
        'bold italic backcolor | alignleft aligncenter ' +
        'alignright alignjustify | bullist numlist outdent indent | ' +
        'removeformat | help',
    content_css: [
        '//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
        '/tinymce/css/content.css'
    ]
});

引入顺风 css 样式

在 HTML 中引入顺风 css 样式：

<link rel="stylesheet" href="https://unpkg.com/sunflower-ui">

使用顺风 css 样式

在 HTML 中使用顺风 css 样式：

<button class="sf-btn sf-btn-primary">Primary Button</button>
示例
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>使用 tinymce 和顺风 css</title>
    <link rel="stylesheet" href="https://unpkg.com/sunflower-ui">
    <script src="./node_modules/tinymce/tinymce.min.js"></script>
</head>
<body>
    <form method="post">
        <textarea id="myTextarea"></textarea>
    </form>
    <script>
        tinymce.init({
            selector: '#myTextarea',
            plugins: [
                'advlist autolink lists link image charmap print preview anchor',
                'searchreplace visualblocks code fullscreen',
                'insertdatetime media table paste code help wordcount'
            ],
            toolbar: 'undo redo | formatselect | ' +
                'bold italic backcolor | alignleft aligncenter ' +
                'alignright alignjustify | bullist numlist outdent indent | ' +
                'removeformat | help',
            content_css: [
                '//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
                '/tinymce/css/content.css'
            ]
        });
    </script>
</body>
</html>

返回 Markdown 格式：

# 使用 tinymce 和顺风 css

## 介绍

tinymce 是一个开源的所见即所得编辑器，支持 HTML 的大部分特性，例如：字体、颜色、尺寸等等。它可以很方便地集成到各种 Web 应用程序中。

顺风 css 是一个样式库，包含了各种常用的样式，例如：按钮、表格、线条等等。它可以帮助我们快速地搭建出基础的网页界面。

结合 tinymce 和顺风 css，我们可以很方便地制作出一个美观、易用的编辑器。

## 安装

### tinymce

tinymce 可以通过 npm 安装：

```bash
npm install tinymce --save

然后引入它：

<script src="./node_modules/tinymce/tinymce.min.js"></script>
顺风 css

可以通过 CDN 引入：

<link rel="stylesheet" href="https://unpkg.com/sunflower-ui">

也可以通过 npm 安装：

npm install sunflower-ui --save

然后引入它：

<link rel="stylesheet" href="./node_modules/sunflower-ui/dist/sunflower-ui.min.css">
使用
初始化 tinymce

在引入 tinymce 后，我们需要初始化它：

tinymce.init({
    selector: '#myTextarea',
    plugins: [
        'advlist autolink lists link image charmap print preview anchor',
        'searchreplace visualblocks code fullscreen',
        'insertdatetime media table paste code help wordcount'
    ],
    toolbar: 'undo redo | formatselect | ' +
        'bold italic backcolor | alignleft aligncenter ' +
        'alignright alignjustify | bullist numlist outdent indent | ' +
        'removeformat | help',
    content_css: [
        '//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
        '/tinymce/css/content.css'
    ]
});
引入顺风 css 样式

在 HTML 中引入顺风 css 样式：

<link rel="stylesheet" href="https://unpkg.com/sunflower-ui">
使用顺风 css 样式

在 HTML 中使用顺风 css 样式：

<button class="sf-btn sf-btn-primary">Primary Button</button>
示例
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>使用 tinymce 和顺风 css</title>
    <link rel="stylesheet" href="https://unpkg.com/sunflower-ui">
    <script src="./node_modules/tinymce/tinymce.min.js"></script>
</head>
<body>
    <form method="post">
        <textarea id="myTextarea"></textarea>
    </form>
    <script>
        tinymce.init({
            selector: '#myTextarea',
            plugins: [
                'advlist autolink lists link image charmap print preview anchor',
                'searchreplace visualblocks code fullscreen',
                'insertdatetime media table paste code help wordcount'
            ],
            toolbar: 'undo redo | formatselect | ' +
                'bold italic backcolor | alignleft aligncenter ' +
                'alignright alignjustify | bullist numlist outdent indent | ' +
                'removeformat | help',
            content_css: [
                '//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
                '/tinymce/css/content.css'
            ]
        });
    </script>
</body>
</html>