在将 Microsoft Word 内容包括
格式原样粘贴到 TinyMCE 编辑器时，需要注意处理 Word 自带的复杂
格式和内联样式，TinyMCE 默认会尝试清理粘贴的内容以保持编辑器内容的整洁性。为了
保留 Word 的
格式，可以通过以下方法实现：
### 配置 TinyMCE 以
保留 Word
格式
1
. 使用 `paste_preprocess` 回调函数：
在 TinyMCE 的配置中，通过 `paste_preprocess` 函数可以对粘贴的内容进行预处理。在此函数中，可以检查粘贴的内容是否来自 Word，并
保留其
格式[^1]。
```javascript
tinymce
.init({
selector: '#editor',
plugins: 'paste',
paste_preprocess: function(plugin, args) {
// 检查内容是否包含 Word
格式
if (args
.content
.indexOf('<!--StartFragment-->') !== -1) {
//
保留 Word 内容中的
格式
args
.content = args
.content
.replace(/<span style="[^"]+">|<span class="[^"]+">|<span id="[^"]+">/gi, '');
}
}
});
```
2
. 启用 `paste_retain_style_properties` 选项：
通过设置 `paste_retain_style_properties` 选项，指定 TinyMCE
保留特定的样式属性，例如 `font-family`、`font-size`、`color` 等，以确保粘贴的 Word 内容不会丢失这些样式[^1]。
```javascript
tinymce
.init({
selector: '#editor',
plugins: 'paste',
paste_retain_style_properties: 'font-family,font-size,color'
});
```
3
. 禁用
格式清理功能：
默认情况下，TinyMCE 会清理粘贴内容中的冗余样式。如果需要完全
保留 Word 的
格式，可以禁用此功能，通过设置 `valid_elements` 和 `valid_children` 等选项来允许所有标签和属性。
```javascript
tinymce
.init({
selector: '#editor',
valid_elements: '*[*]',
valid_children: '+body[style]'
});
```
### 在 Vue 中使用 TinyMCE 时的实现
如果在 Vue 项目中使用 TinyMCE，则可以将上述配置集成到 Vue 组件中。以下是一个示例：
```vue
<template>
<div>
<Tinymce :height="300" v-model="content" :init="tinyMceInit" />
</div>
</template>
<script>
import Tinymce from 'vue2-tinymce-editor';
export default {
components: {
Tinymce
},
data() {
return {
content: '',
tinyMceInit: {
plugins: 'paste',
paste_preprocess: (plugin, args) => {
if (args
.content
.indexOf('<!--StartFragment-->') !== -1) {
args
.content = args
.content
.replace(/<span style="[^"]+">|<span class="[^"]+">|<span id="[^"]+">/gi, '');
}
},
paste_retain_style_properties: 'font-family,font-size,color',
valid_elements: '*[*]',
valid_children: '+body[style]'
}
};
}
};
</script>
```
### 注意事项
- Word 粘贴的内容可能包含复杂的样式和内联 CSS，这些样式可能会影响网页的整体布局和样式表。因此，在实际应用中，可能需要根据需求调整配置，以平衡
格式保留和内容整洁性。
- 如果需要更高级的
格式保留功能，可以考虑使用 TinyMCE 的 `powerpaste` 插件，它专门用于处理从 Word 粘贴的内容，并提供更强大的
格式保留功能[^1]。
本文介绍了一种简单方法，通过使用Word作为中间转换工具，可以将VS.NET中带有颜色格式的代码完美复制并粘贴到优快云博客上，保持原有的格式不变。
扫一扫
1984
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
