tinymce 字体加备注
时间: 2024-01-22 10:03:35 浏览: 161
tinymce 6.+ 高亮提示demo
以下是使用tinymce编辑器为文字添加字体和备注的步骤:
1. 在HTML文件中引入tinymce编辑器的js和css文件。
```html
<script src="https://cdn.tiny.cloud/1/your-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
```
2. 在textarea标签中添加class和id属性,并在js文件中初始化tinymce编辑器。
```html
<textarea class="tinymce" id="mytextarea"></textarea>
```
```javascript
tinymce.init({
selector: '.tinymce',
plugins: 'advlist autolink lists link image charmap print preview hr anchor pagebreak',
toolbar_mode: 'floating',
toolbar: 'fontselect | fontsizeselect | forecolor backcolor | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | outdent indent | numlist bullist | link image',
content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
});
```
3. 在toolbar中添加fontselect和fontsizeselect插件,以便用户可以选择字体和字号。
```javascript
toolbar: 'fontselect | fontsizeselect | forecolor backcolor | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | outdent indent | numlist bullist | link image',
```
4. 在content_style中添加自定义的CSS样式,以便用户可以添加备注。
```javascript
content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px } .remark { font-style: italic; color: #999; }'
```
5. 在用户需要添加备注的文字上添加span标签,并为其添加remark类。
```html
<p>这是一段需要添加备注的文字<span class="remark">(这里是备注)</span></p>
```
阅读全文