给我一个TinyMCE富文本的使用案例
时间: 2024-05-09 15:18:54 浏览: 115
富文本使用案例
以下是一个使用TinyMCE富文本编辑器的简单案例:
1. 在HTML文件中引入TinyMCE的JavaScript文件和CSS文件。
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TinyMCE Example</title>
<script src="tinymce/tinymce.min.js"></script>
<link rel="stylesheet" href="tinymce/skins/lightgray/skin.min.css">
</head>
<body>
<textarea id="myTextarea"></textarea>
<script>
// 初始化TinyMCE编辑器
tinymce.init({
selector: '#myTextarea',
skin: 'lightgray',
height: 500,
plugins: [
'advlist autolink lists link image charmap print preview anchor',
'searchreplace visualblocks code fullscreen',
'insertdatetime media table contextmenu paste code help wordcount'
],
toolbar: 'undo redo | formatselect | bold italic backcolor | \
alignleft aligncenter alignright alignjustify | \
bullist numlist outdent indent | removeformat | help'
});
</script>
</body>
</html>
```
2. 在JavaScript中初始化TinyMCE编辑器,设置编辑器的选项和工具栏。
```javascript
tinymce.init({
selector: '#myTextarea', // 编辑器要替换的元素的ID
skin: 'lightgray', // 编辑器的皮肤
height: 500, // 编辑器的高度
plugins: [
'advlist autolink lists link image charmap print preview anchor',
'searchreplace visualblocks code fullscreen',
'insertdatetime media table contextmenu paste code help wordcount'
], // 编辑器的插件
toolbar: 'undo redo | formatselect | bold italic backcolor | \
alignleft aligncenter alignright alignjustify | \
bullist numlist outdent indent | removeformat | help' // 编辑器的工具栏
});
```
3. 在页面中插入一个textarea元素,并设置其ID。
```html
<textarea id="myTextarea"></textarea>
```
4. 运行页面,在textarea中输入文本,就可以使用工具栏对文本进行格式化、添加图片和链接等操作。
以上就是一个简单的使用TinyMCE富文本编辑器的案例。
阅读全文