tinyMCE粘贴word/html时去掉文本里的样式

最新推荐文章于 2024-10-11 17:12:17 发布

mypcstyle

最新推荐文章于 2024-10-11 17:12:17 发布

阅读量8k

点赞数 2

分类专栏： html/js

本文链接：https://blog.csdn.net/mypcstyle/article/details/37510767

版权

html/js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

tinyMCE是一款非常优秀的在线编辑器。在默认配置下，当我们粘贴word/html时，word/html里的样式也会一起粘贴进来，有没办法在粘贴时只粘贴文本文字呢？

在初始化tinyMCE我们加上如下配置就能做到：

plugins: 'paste',
 ... 
paste_auto_cleanup_on_paste : true,
paste_remove_styles: true,
paste_remove_styles_if_webkit: true, 
paste_strip_class_attributes: true,

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

mypcstyle

关注关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
3
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

TinyMCE 去掉复制粘贴来的字符串中的标签

lovenkcs的专栏

04-17

3315

首先去到tinymce.init函数中加入如下代码： plugins:"paste", paste_preprocess: function(plugin, args) { args.content = strip_tags(args.content,'<a>'); }第一行是为了让TinyMCE使用paste插件，paste插件中有一个功能是paste_preprocess，他的作用是在字

自动清除html无用css,TinyMCE粘贴HTML代码，避免style属性被自动清除_html/css_WEB-ITnose...

weixin_36442042的博客

05-31

942

TinyMCE在粘贴含有style属性的HTML代码时，会自动清除style属性，设置 extended_valid_elements 也只能在Firefox浏览器起作用，Chrome无效。extended_valid_elements: 'div[style|class|id]'Chrome下即使设置了 inline_styles: true, schema: 'html5', 也没有用无奈去看...

3 条评论您还未登录，请先登录后发表或查看评论

富文本编辑器TINYMCE支持从WORD复制粘贴保留格式和图片的插件

最新发布

alisky119的博客

10-11

628

编辑器：TinyMCE需求：复制粘贴word内容图片,图文混排,图片转存前端框架：vue,vue2-cli,vue3-cli后端：java,springboot,asp.net,php,asp要求：开源，免费，该说不说，这块需求还是挻多的，总体来说主要还是这个功能的应用范围挻广的，基本上大部分网站上面都可以用得到，最近加我的网友很多，有学生，有自由职业者，有全职的，也有个人的，无一例外，他们都对这个功能表现出了极大的兴趣。

tinymce 复制粘贴时去除文本里面的样式

将小宁的博客

07-01

3625

在paste插件中增加配置项参数，或者通过拦截器回调函数进行处理

前端用tinymce富文本编辑器从word 复制内容过来会带很多奇怪的样式这里需要去除样式只留下标签即可

m0_61840359的博客

05-13

685

如果你的 plugins 是像我下面完整版代码那样单独拎出来配置的也是直接在很多引入的插件后面加就好了（参考最下面的整个组件代码哦）问题：从word 复制内容过来 tinymce富文本会带很多奇怪的样式导致内容过长无法保存。然后要在 init 的 plugins（指定需加载的插件）配置中加上 paste。然后在加上 editor 组件的 init 配置中加上以下配置。如果来没有plugins 直接在 init 配置中加上。如果来有plugins 直接在后面加上。最后我的代码修改如下。

去除tinymce中粘贴的样式

徐同保的专栏

07-21

650

去除tinymce中粘贴的样式

在html页面中使用tinymce,的TinyMCE从我的HTML代码中删除CSS

weixin_39928099的博客

06-03

751

我正在使用Javascript函数来获取服务器上托管的HTML文件的内容,然后将该内容添加到TinyMCE编辑器中.这是功能：function LoadTemplate(url) {$.post(url, function (data) {// Get the editor instance that we want to interact with.var ed = tinyMCE.get('h...

自定义tinymce文本等样式

gm0125的博客

03-30

3268

自定义tinymce文本等样式 tinymce富文本编辑器，使用下来发现的一些问题例如文本框中内容每一次enter换行行间距及字体过大，看起来十分不美观，部分网友指出设置 “ forced_root_block:'', ” 标签可以解决，这样做确实有用，但是后遗症很大，这一行代码的原理是将每一次换行自动增加的“p”标签给取消掉，这样做会使对文本内容进行格式化的时候会对多行进行格式化，十分讨厌。在经过一番研究，最后在官方文档上找到了解决方案，直接对文本内容中“p”标签进行...

tinymce富文本编辑器集成demo，添加powerpaste插件，支持word、excel带格式粘贴.rar

09-06

在Web应用中，用户经常需要复制粘贴来自不同源的文本，尤其是来自办公软件的文本，这些文本往往包含有复杂的排版和样式。Powerpaste插件能够很好地处理这种情况，它可以识别并保留原格式，避免了在粘贴到Tinymce编辑...

Vue使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)

10-15

主要介绍了Vue项目中使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)的相关知识，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以...

插件powerpaste实现word直接粘贴富文本,同时上传图片.rar

07-05

本压缩包文件“插件powerpaste实现word直接粘贴富文本,同时上传图片.rar”是针对TinyMCE的一个增强插件——PowerPaste，专门解决从Microsoft Word中复制内容到编辑器时保持格式和图像的问题。 PowerPaste插件的核心...

tinymce_powerpaste-master

11-19

1. **清除Word格式**：在从Word文档中复制内容时，PowerPaste会去除多余的样式和格式，保留核心内容，确保在TinyMCE编辑器中的样式与网站设计保持一致。 2. **HTML粘贴**：对于懂HTML的用户，PowerPaste允许直接...

富文本编辑器，去除粘贴的word文件中的无效代码

小小技术团队

08-05

779

将word文件中的内容粘贴到富文本编辑器中时，会发现存在很多无效的代码，格式类似下图：  <!--[if gte mso 9]>&lt

TinyMCE 粘贴HTML代码，避免style属性被自动清除

weixin_34406086的博客

05-26

3064

为什么80%的码农都做不了架构师？>>> ...

解决Tinymce粘贴html时style被过滤问题

qq_42287868的博客

01-08

4769

解决Tinymce粘贴html时style被过滤问题第一次用到tinymce这个编辑器，好用之处，不需赘述，只说一下我遇到的坑。初始创建的编辑器很多默认设置没有更改，使用时发现直接在源代码选项里粘贴html代码时很多标签会被过滤掉，主要是style这个标签是我们同事目前必须要用的，搞行内样式会很麻烦，所以就百度了一个方法，据说设置一下paste_webkit_styles: true，就可以了...

tinymce 字体样式,TinyMCE的默认字体大小

weixin_39552874的博客

12-24

728

How can I set the default font size of tinyMCE , I've a tinyMCE editor and I tried all the things to change the text-size to 14px and it always shows 10px. I'm using rails 3.1 and tinymcemajor Versio...

解决TinyMCE富文本，粘贴word文本修改不了字体

与世无争的小垃圾

07-06

1314

TinyMCE富文本的复制

使用tinymce编辑器从word保持原格式复制粘贴的办法

Jenny_ttw的博客

11-03

7017

tinymce官方有一个插件叫powerpaste（官方收费）,找到资源后，把他引入到plugins下，并在tinymce下的index文件中把他引入： initTinymce() { const _this = this window.tinymce.init({ language: 'zh_CN', plugins: ...

富文本编辑器tinymce从word复制粘贴保留格式和图片

06-10

Tinymce提供了一些配置选项，可以实现从Word中复制粘贴内容并保留格式和图片的功能。具体实现步骤如下： 1. 加载tinymce的源文件和plugins目录下的插件文件。例如： ```html <script src="/path/to/tinymce.min.js"></script> <script src="/path/to/plugins/paste/plugin.min.js"></script> <script src="/path/to/plugins/paste/plugin.min.js"></script> ``` 2. 设置tinymce的选项，包括使用的主题、插件和工具栏等。例如： ```javascript tinymce.init({ selector: 'textarea', plugins: 'paste image', toolbar: 'undo redo | bold italic | image', paste_data_images: true, images_upload_url: '/path/to/upload', images_upload_handler: function (blobInfo, success, failure) { // 处理图片上传 } }); ``` 其中，paste_data_images选项用于启用从Word中粘贴图片的功能，images_upload_url和images_upload_handler用于处理上传的图片。 3. 在服务器端处理上传的图片，并返回图片的URL地址。例如，使用PHP实现图片上传功能： ```php <?php if ($_FILES['file']['error'] === UPLOAD_ERR_OK) { $file_tmp = $_FILES['file']['tmp_name']; $file_name = $_FILES['file']['name']; $file_ext = pathinfo($file_name, PATHINFO_EXTENSION); $file_path = '/path/to/images/' . uniqid() . '.' . $file_ext; move_uploaded_file($file_tmp, $file_path); echo json_encode(['location' => $file_path]); } else { echo json_encode(['error' => '上传失败']); } ``` 以上就是使用Tinymce实现从Word中复制粘贴内容并保留格式和图片的方法。