如何初始化 TinyMCE
时间: 2024-06-08 08:10:00 浏览: 22
TinyMCE 是一个跨浏览器的 WYSIWYG 编辑器,使用它可以方便地让用户编辑富文本内容。下面是一个简单的初始化 TinyMCE 的示例:
1. 首先,在 HTML 页面中引入 TinyMCE 的 JavaScript 文件和 CSS 文件:
```html
<script src="https://cdn.tiny.cloud/1/<your-api-key>/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
<link href="https://cdn.tiny.cloud/1/<your-api-key>/tinymce/5/skins/ui/oxide/skin.min.css" rel="stylesheet" />
```
其中 `your-api-key` 是你在 Tiny Cloud 注册账号后获得的 API Key。
2. 在页面加载完毕后,使用以下代码初始化 TinyMCE 编辑器:
```javascript
tinymce.init({
selector: 'textarea', // 指定要转换为 TinyMCE 编辑器的 textarea 元素
height: 500, // 编辑器的高度
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',
'//www.tiny.cloud/css/codepen.min.css'
]
});
```
其中 `selector` 属性指定要转换为 TinyMCE 编辑器的 textarea 元素,`height` 属性指定编辑器的高度,`plugins` 属性指定要加载的插件,`toolbar` 属性指定工具栏的按钮,`content_css` 属性指定编辑器内容的 CSS 样式。
以上是一个简单的 TinyMCE 初始化示例,你可以根据自己的需求进一步配置和定制 TinyMCE 编辑器。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)