html div纯文本粘贴,如何在默认情况下使tinymce粘贴为纯文本

仅供参考,tinymce在粘贴插件中将其作为默认选项实现,从而改进了这一点。

更多信息:

http://www.tinymce.com/wiki.php/Plugin:paste

然而,它仍然不是完美的。

因此,这里有一个脚本,它也会触发所有的html:

// Paste

paste_auto_cleanup_on_paste : true,

paste_remove_spans: true,

paste_remove_styles: true,

paste_retain_style_properties: false,

paste_preprocess : function(pl, o)

{ // Replace

with

o.content = o.content.replace(/

/gi, "

");

o.content = o.content.replace(//gi, "

");

o.content = o.content.replace(/

o.content = o.content.replace(/

o.content = o.content.replace(/

// Replace empty styles

o.content = o.content.replace(/

o.wordContent = true;

},

paste_postprocess : function(pl, o)

{ //console.log(o.node.innerHTML);

var ed = pl.editor, dom = ed.dom;

// Remove all tags which are not

or

tinymce.each(dom.select('*', o.node), function(el)

{ if (el.tagName.toLowerCase() != "p" && el.tagName.toLowerCase() != "br")

{ dom.remove(el, 1); // 1 = KeepChildren

console.log(el.tagName);

}

dom.setAttrib(el, 'style', '');

});

},

Vue2 中使用 TinyMCE 富文本编辑器确实支持粘贴图片功能。TinyMCE 提供了丰富的文本处理能力,包括图片上传、粘贴等。要在 Vue 组件中集成 TinyMCE 并允许用户粘贴图片,你可以按照以下步骤操作: 1. 安装依赖:首先需要安装 tiny-mce-vue 包,可以通过 npm 或者 yarn 进行安装: ```bash npm install @tinymce/tinymce-vue ``` 2. 配置 TinyMCE:在 Vue 文件中初始化 TinyMCE,设置插件配置,包括图片相关选项: ```html <template> <div ref="tinymce"> <!-- 你的富文本编辑区域 --> </div> </template> <script> import { createTinymce } from '@tinymce/tinymce-vue' export default { setup() { const editorOptions = { plugins: 'image', // 必须包含 image 插件 images_upload_url: '/api/upload-image', // 图片上传的服务器端地址 image_insertion_allow_types: ['image/png', 'image/jpeg'], // 允许的图片类型 paste_data_images: true, // 允许粘贴数据图片 } const editor = createTinymce(editorOptions) return { editor } }, } </script> ``` 3. 注册组件事件监听:为了让用户能在组件外部触发粘贴事件,你需要监听浏览器的 `paste` 事件,并将粘贴的内容传递给 TinyMCE 的 `insertContent` 方法,以便插入图片。 4. 监听粘贴并处理图片: ```javascript mounted() { document.addEventListener('paste', (event) => { if (!event.clipboardData || !event.clipboardData.items) { return; } event.preventDefault(); event.stopPropagation(); const items = event.clipboardData.items; for (let i = 0; i < items.length; i++) { const item = items[i]; if (item.type === 'text/html') { // 解析 HTML 获取图片数据 let imageData = item.getAsHTML(); this.editor.insertContent(imageData); break; } } }); }, ``` 现在,当用户在 TinyMCE 编辑区域粘贴图片时,它会被正确地插入到编辑器中。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值