低版本TinyMCE添加Placeholder报editor.on不是函数如何解决

问题背景 #

当前使用非5.x版本的TinyMCE富文本编辑器（因TinyMCE 5版本改动较大，暂不考虑升级），原有编辑器初始化配置代码如下：

tinymce.init({
        mode: "exact",
        elements: "Grievance",
        forced_root_block: "",
        theme: "advanced",
        paste_text_sticky: true,
        paste_text_sticky_default: true,
        plugins: "wordcount,paste,autolink,advlink,contextmenu,fullscreen,nonbreaking,template,inlinepopups,style",
        //plugins: "wordcount,paste,autolink,advlink,fullscreen,nonbreaking,template,inlinepopups,style",

        // Theme options
        //theme_advanced_buttons1: "bold,italic,underline,strikethrough,|,undo,redo,|,justifyleft,justifycenter,justifyfull,|,link,unlink,|,fullscreen",
        //theme_advanced_buttons2: "cut,copy,paste,|,cleanup,removeformat,|,bullist,numlist,outdent,indent,hr,charmap",
        //theme_advanced_buttons1: "cut,copy,paste,removeformat,|,undo,redo,|,bullist,numlist,outdent,indent,|,formatselect,bold,italic,underline,forecolor,backcolor,|,justifyleft,justifycenter,justifyfull,|,link,unlink,|,fullscreen",
        theme_advanced_buttons1: "cut,copy,paste,removeformat,|,undo,redo,|,bullist,numlist,outdent,indent,|,bold,italic,underline,|,fullscreen",
        //theme_advanced_blockformats: 'p,h1,h2,h4,h4,h5,h6',
        theme_advanced_toolbar_location: "top",
        theme_advanced_toolbar_align: "left",
        //theme_advanced_statusbar_location : "bottom",
        theme_advanced_resizing: true,
        theme_advanced_path: false,
        content_css: "/css/admin.css",  
        selector: 'textarea',  // 3.x版本用exact模式时可删除该冗余配置
        setup: function (editor) {
            editor.on('init', function(){
            if (tinymce.get('Text').getContent() == ''){
                tinymce.get('Text').setContent("<p id='#Grievance'>Please put Case Information here</p>");
            }
            });
            // 聚焦时移除占位符
            editor.on('focus',function(){
              $('iframe').contents().find('#Grievance').remove();
            });
    }
    });

添加占位符功能时触发editor.on is not a function报错，需要在不升级TinyMCE 5的前提下实现可用的占位符功能。

报错根因 #

从配置项（theme: "advanced"、inlinepopups插件）可以判断当前使用的是TinyMCE 3.x版本，该版本没有editor.on()事件绑定API，这个方法是TinyMCE 4.x之后才新增的，3.x版本绑定编辑器事件需要使用editor.bind()方法。
除此之外原有代码还有3个影响功能的问题：

• 配置的挂载元素是Grievance，初始化时取的编辑器实例是Text，ID不匹配
• 占位符p标签的id属性值写为#Grievance，多了选择器前缀#，导致DOM查找失败
• 只有初始化加占位符、聚焦删占位符的逻辑，缺少失焦时内容为空自动回显占位符的逻辑，用户清空内容后占位符不会重新显示

修正后的实现代码 #

1. 调整初始化配置 #

把事件绑定方法替换为bind，修正ID错误，补全失焦逻辑，删除冗余的selector配置：

tinymce.init({
        mode: "exact",
        elements: "Grievance",
        forced_root_block: "",
        theme: "advanced",
        paste_text_sticky: true,
        paste_text_sticky_default: true,
        plugins: "wordcount,paste,autolink,advlink,contextmenu,fullscreen,nonbreaking,template,inlinepopups,style",
        theme_advanced_buttons1: "cut,copy,paste,removeformat,|,undo,redo,|,bullist,numlist,outdent,indent,|,bold,italic,underline,|,fullscreen",
        theme_advanced_toolbar_location: "top",
        theme_advanced_toolbar_align: "left",
        theme_advanced_resizing: true,
        theme_advanced_path: false,
        content_css: "/css/admin.css",
        setup: function (editor) {
            // 占位符文本和ID统一配置
            const placeholderText = "Please put Case Information here";
            const placeholderId = "GrievancePlaceholder";

            // 初始化加载完成后判断内容，为空则插入占位符
            editor.bind('init', function(){
                const currentContent = editor.getContent().replace(/<[^>]+>/g, '').trim();
                if (currentContent === ''){
                    editor.setContent(`<p id="${placeholderId}">${placeholderText}</p>`);
                }
            });

            // 聚焦时如果当前内容只有占位符，清空编辑区
            editor.bind('focus',function(){
                const placeholderEl = editor.getDoc().getElementById(placeholderId);
                if (placeholderEl) {
                    editor.setContent('');
                }
            });

            // 失焦时如果内容为空，重新插入占位符
            editor.bind('blur', function(){
                const currentContent = editor.getContent().replace(/<[^>]+>/g, '').trim();
                if (currentContent === ''){
                    editor.setContent(`<p id="${placeholderId}">${placeholderText}</p>`);
                }
            });
    }
    });

2. 添加占位符样式 #

在配置的/css/admin.css中加入以下样式，让占位符显示为浅灰色，和正常输入内容做区分：

#GrievancePlaceholder {
    color: #999;
    user-select: none;
}

3. 表单提交兼容（可选） #

如果编辑器内容需要提交表单，提交前加一层判断：如果当前内容只有占位符，就把提交内容置空，避免把提示文本提交到后端。

内容的提问来源于stack exchange，提问作者Pamela Whittaker