vue使用tinymce富文本框组件,实现了上传和复制粘贴,包括处理Placeholder鼠标点击后不显示

<template>
  <div>
    <editor id='tinymce' v-model='tinymceHtml' :placeholder="placeholderHtml" :init='editorInit'></editor>
  </div>
</template>
<script>
import tinymce from 'tinymce/tinymce'
import 'tinymce/themes/modern/theme'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/plugins/link'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/image'
import 'tinymce/plugins/media'
import 'tinymce/plugins/paste'
import 'tinymce/plugins/code'
import 'tinymce/plugins/table'
import 'tinymce/plugins/colorpicker'
import 'tinymce/plugins/textcolor'
import 'tinymce/plugins/contextmenu'
import 'tinymce/plugins/wordcount'
import 'tinymce/plugins/fullscreen'
import 'tinymce/plugins/preview'
import 'tinymce/plugins/searchreplace'
import api_file from 'api/api.file'
let that
export default {
  name: 'tinymce',
  components: { Editor },
  props: {
    model: {
      default: ''
    },
    placeholderText: {
      default: ''
    },
    bkeyCode: {
      default: ''
    },
    height: {
      default: 300
    },
    width: {
      default: 800
    }
  },
  data () {
    return {
      tinymceHtml: this.model + '' || '',
      placeholderHtml: this.placeholderText,
      editorInit: {
        branding: false,
        language_url: '/tinymce/lang/zh_CN.js',
        language: 'zh_CN',
        skin_url: '/tinymce/skins/lightgray',
        height: this.height,
        width: this.width,
<think>我们正在处理关于TinyMCE富文本编辑器的问题:粘贴内容后placeholder未能正确隐藏。根据用户描述,问题发生在粘贴操作后,编辑器的占位文本(placeholder)没有隐藏,而正常情况下当编辑器中有内容时占位文本应该隐藏。 首先,我们需要了解TinyMCE的占位文本(placeholder)是如何工作的。TinyMCE提供了一个配置项`placeholder`,用于设置在没有内容时显示的文本。当编辑器获得焦点或者有内容输入时,占位文本应该自动隐藏;当编辑器内容为空且失去焦点时,占位文本会显示。 用户遇到的问题是:在粘贴内容后,占位文本没有隐藏。这可能是由于粘贴操作后编辑器没有触发更新占位文本状态的事件。 解决方案思路: 1. 确保使用的是支持placeholderTinyMCE版本(4.3+)。 2. 检查是否正确配置了placeholder。 3. 在粘贴操作后,手动触发更新占位文本的事件。 具体步骤: 步骤1:检查配置 确认在初始化TinyMCE时已经设置了placeholder,例如: ```javascript tinymce.init({ selector: '#mytextarea', placeholder: 'Type here...', // 其他配置... }); ``` 步骤2:监听粘贴事件并触发更新 由于粘贴操作可能会自动触发检查placeholder的逻辑,我们需要在粘贴事件后手动触发TinyMCE的change事件,或者调用TinyMCE内部更新placeholder的方法。 我们可以通过绑定`paste`事件,在事件发生后执行一个函数来更新占位文本的状态。TinyMCE提供了一个`setup`配置项,可以在其中添加事件监听器。 示例代码: ```javascript tinymce.init({ selector: '#mytextarea', placeholder: 'Type here...', setup: function (editor) { editor.on('paste', function (e) { // 在粘贴完成后,手动触发change事件,让placeholder更新 // 由于粘贴操作是异步的,我们使用setTimeout确保在粘贴内容插入后再触发 setTimeout(function() { editor.fire('change'); }, 0); }); } }); ``` 步骤3:使用TinyMCE的API更新placeholder状态 另一种方法是直接调用TinyMCE内部用于更新placeholder状态的函数。但是,由于TinyMCE内部实现可能变化,更推荐使用触发`change`事件的方式。 步骤4:如果以上方法无效,可以尝试在粘贴后检查编辑器内容并手动显示/隐藏占位文本 我们可以通过检查编辑器内容是否为空来手动设置占位文本的显示或隐藏。但是,TinyMCEplaceholder是通过CSS类(如`.mce-placeholder`)内容状态控制的,直接操作可能会比较麻烦。 因此,优先考虑触发`change`事件,因为TinyMCE在change事件中会更新placeholder。 步骤5:考虑使用TinyMCE的`SetContent`事件 粘贴操作实际上会触发`SetContent`事件,但可能由于某些原因没有更新placeholder。我们可以尝试监听`SetContent`事件并触发change: ```javascript setup: function (editor) { editor.on('SetContent', function (e) { // 注意:这里要避免死循环,因为触发change可能会再次触发SetContent? // 但实际上change事件会触发SetContent,所以可以尝试 editor.fire('change'); }); } ``` 但是,这样可能会对性能有影响,因为每次设置内容都会触发两次change(一次原本的,一次我们触发的)。所以更推荐只在粘贴操作后触发。 综合以上,我们给出一个解决方案:在粘贴事件后,使用`setTimeout`延迟触发change事件,让TinyMCE更新占位文本。 注意:延迟0ms是为了让粘贴操作完成(因为粘贴是异步的),这样在触发change事件时,内容已经插入到编辑器中。 如果问题依旧,可能需要检查是否有其他插件或自定义代码干扰了placeholder显示。 此外,还可以考虑更新TinyMCE版本,确保使用的是最新版本,因为旧版本可能存在已知的bug。 最后,提供一个完整的示例代码: ```html <!DOCTYPE html> <html> <head> <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script> <script> tinymce.init({ selector: '#mytextarea', placeholder: 'Type here...', setup: function (editor) { editor.on('paste', function (e) { setTimeout(function() { editor.fire('change'); }, 0); }); } }); </script> </head> <body> <textarea id="mytextarea"></textarea> </body> </html> ``` 如果用户已经使用了其他事件监听,需要将这段代码整合到现有的初始化配置中。 希望这个解决方案能够帮助用户解决问题。 相关问题: 1. 如何自定义TinyMCE编辑器的占位文本样式? 2. TinyMCE编辑器还有哪些常见问题及解决方法? 3. 如何在TinyMCE中监听内容变化并执行自定义操作?</think>### TinyMCE粘贴后Placeholder未隐藏的解决方案 在TinyMCE中粘贴内容后placeholder未隐藏的问题,通常是由于编辑器未正确检测内容变化导致的。以下是完整解决方案: #### 核心解决思路 1. **手动触发内容更新事件**:粘贴操作后强制触发编辑器的`change`事件 2. **检查DOM更新时机**:确保在内容实际渲染后执行隐藏操作 3. **验证placeholder配置**:排除基础配置错误 #### 具体解决方案 ```javascript tinymce.init({ selector: '#editor', placeholder: '在此输入内容...', // 确保正确配置placeholder setup: function(editor) { // 监听粘贴事件 editor.on('paste', function(e) { // 延迟处理确保DOM已更新 setTimeout(function() { // 手动触发内容变更事件 editor.fire('change'); // 强制更新placeholder状态(备用方案) const body = editor.getBody(); if (body.innerHTML !== '<p><br data-mce-bogus="1"></p>') { body.classList.remove('mce-placeholder'); } }, 100); // 100ms延迟确保内容渲染完成 }); } }); ``` #### 关键步骤说明 1. **事件监听**:通过`editor.on('paste')`捕获粘贴事件 2. **延迟执行**:使用`setTimeout`确保粘贴内容已插入DOM 3. **手动触发变更**:`editor.fire('change')`通知系统内容已更新 4. **DOM级修复**:直接检测内容容器并移除placeholder类(备用方案) #### 补充建议 1. **版本兼容性检查**:确保使用TinyMCE 4.9+(早期版本存在已知bug) 2. **CSS覆盖方案**:添加自定义CSS强制隐藏(临时方案): ```css /* 当编辑器有内容时隐藏placeholder */ .mce-content-body:not(:empty) + .mce-placeholder { display: none !important; } ``` 3. **验证初始化顺序**:确保在DOM完全加载后初始化编辑器 > **注意**:如果使用Vue/React等框架,需在组件生命周期钩子中正确初始化(如Vue的`mounted`钩子)[^1]。 #### 验证方法 ```javascript // 粘贴后检查编辑器状态 console.log(editor.getContent()); console.log(editor.getBody().classList); // 应包含'mce-placeholder' ```
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值