fix(submit): render the configured body placeholder in TinyMCE

WordPress 打包的 TinyMCE 4.9 不含官方 placeholder 插件，tinymce.init 里的
placeholder 配置被静默忽略，投稿页「投稿内容占位符」从未显示过。

新增主题插件 assets/js/front-submit-placeholder.js：正文为空时插入一个
data-mce-bogus 的占位段落，有内容即移除；序列化 / 解析都剔除该段落，
字数统计也跳过它，提示文字不会写进文章。

- 经典投稿表单与创作者工作台都通过 external_plugins 加载
  （WordPress 会丢弃名字已在 plugins 列表里的外部插件）
- 占位样式写进 iframe 的 content CSS：submit-editor.css 与
  editor-content-style.ts

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

assets/creator-studio/src/editor-content-style.ts

@@ -19,6 +19,17 @@ body {
 	letter-spacing: 0.01em;
 }
 p { margin: 0 0 1.1em; }
+
+/*
+ * 正文占位符：TinyMCE 4.9 没有内置 placeholder 插件，由主题插件
+ * （front-submit-placeholder.js）在正文为空时插入这个不可编辑的段落。
+ */
+.jio-editor-placeholder {
+	color: #b9bfbc;
+	cursor: text;
+	pointer-events: none;
+	user-select: none;
+}
 h1, h2, h3, h4, h5, h6 { margin: 1.5em 0 0.65em; line-height: 1.4; }
 img, iframe { max-width: 100%; }
 img { height: auto; }

assets/creator-studio/src/index.tsx

@@ -376,6 +376,10 @@ function Studio(): JSX.Element {
 				toolbar2: '',
 				toolbar3: '',
 				plugins: 'paste,link,lists,wordpress,wplink',
+				// WordPress 打包的 TinyMCE 没有 placeholder 插件，占位符由主题插件实现。
+				external_plugins: bootstrap.creator?.placeholderPlugin
+					? { jio_placeholder: bootstrap.creator.placeholderPlugin }
+					: undefined,
 				wpautop: true,
 				body_class: 'jio-creator__tinymce',
 				content_css: bootstrap.creator?.contentCss || '',

assets/css/frontend/pages/submit-editor.css

@@ -203,3 +203,12 @@ pre code {
   font-size: 0.8em;
   vertical-align: super;
 }
+
+/* 正文占位符（TinyMCE 4.9 没有内置 placeholder 插件，由主题插件插入） */
+.mce-content-body .jio-editor-placeholder,
+.jio-editor-placeholder {
+  color: #b9bfbc;
+  cursor: text;
+  pointer-events: none;
+  user-select: none;
+}

assets/js/front-submit-editor.js

@@ -526,8 +526,17 @@
     }
 
     function updateCount() {
-      var count = String((editor.getBody() && editor.getBody().textContent) || '')
-        .replace(/\s+/g, '').length;
+      // 正文占位符是编辑器插入的提示段落，不算作者写的字。
+      var body = editor.getBody();
+      var text = '';
+      if (body) {
+        var clone = body.cloneNode(true);
+        Array.prototype.forEach.call(clone.querySelectorAll('[data-jio-placeholder]'), function (node) {
+          node.parentNode && node.parentNode.removeChild(node);
+        });
+        text = String(clone.textContent || '');
+      }
+      var count = text.replace(/\s+/g, '').length;
       var element = getCounter();
       if (element) {
         element.textContent = '字数：' + count;

assets/js/front-submit-placeholder.js

@@ -0,0 +1,134 @@
+/**
+ * TinyMCE 正文占位符插件。
+ *
+ * WordPress 打包的 TinyMCE 4.9 不含官方 `placeholder` 插件，`tinymce.init` 里的
+ * `placeholder` 配置会被静默忽略——投稿页的「投稿内容占位符」因此从来没有显示过。
+ * 这里用官方插件同样的机制补上：正文为空时插入一个不可编辑的占位段落，
+ * 有内容时移除。
+ *
+ * 占位段落带 `data-mce-bogus="all"`，TinyMCE 不参与序列化、字数和选区计算；
+ * 视觉样式写在 content CSS（submit-editor.css / editor-content-style.ts）的
+ * `.jio-editor-placeholder` 上——编辑器正文在 iframe 里，页面样式管不到。
+ *
+ * @package Jio
+ */
+(function (window) {
+  'use strict';
+
+  if (!window.tinymce || !window.tinymce.PluginManager) {
+    return;
+  }
+
+  var ATTR = 'data-jio-placeholder';
+  var MEDIA = 'img,iframe,table,pre,hr,video,audio,figure,.jio-math--block';
+
+  window.tinymce.PluginManager.add('jio_placeholder', function (editor) {
+    var text = String(editor.getParam('placeholder', '') || '').trim();
+
+    if (!text) {
+      return;
+    }
+
+    function body() {
+      return editor.getBody();
+    }
+
+    function nodes() {
+      var root = body();
+      return root ? root.querySelectorAll('[' + ATTR + ']') : [];
+    }
+
+    /** 正文字数：跳过占位段落自身的文字。 */
+    function contentText() {
+      var root = body();
+      if (!root) {
+        return '';
+      }
+      var clone = root.cloneNode(true);
+      Array.prototype.forEach.call(clone.querySelectorAll('[' + ATTR + ']'), function (node) {
+        node.parentNode && node.parentNode.removeChild(node);
+      });
+      return String(clone.textContent || '');
+    }
+
+    function isEmpty() {
+      var root = body();
+      if (!root) {
+        return false;
+      }
+      // 图片 / 视频 / 表格这类块即使没有文字也算有内容。
+      if (root.querySelector(MEDIA)) {
+        return false;
+      }
+      return contentText().replace(/[\s ]+/g, '') === '';
+    }
+
+    function hide() {
+      Array.prototype.forEach.call(nodes(), function (node) {
+        node.parentNode && node.parentNode.removeChild(node);
+      });
+    }
+
+    function show() {
+      var root = body();
+      if (!root || root.querySelector('[' + ATTR + ']') || !isEmpty()) {
+        return;
+      }
+      var paragraph = editor.dom.create('p', {
+        'class': 'jio-editor-placeholder',
+        'contenteditable': 'false',
+        'data-mce-bogus': 'all',
+        'data-jio-placeholder': '1',
+      }, editor.dom.encode(text));
+      root.insertBefore(paragraph, root.firstChild);
+    }
+
+    function sync() {
+      if (isEmpty()) {
+        show();
+      } else {
+        hide();
+      }
+    }
+
+    // 占位段落不进入文章内容：序列化时剔除，解析（setContent）时同样剔除，
+    // 避免把提示文字当成正文保存。
+    editor.on('PreInit', function () {
+      var strip = function (list) {
+        list.forEach(function (node) {
+          if (node.attr(ATTR)) {
+            node.remove();
+          }
+        });
+      };
+      editor.serializer.addNodeFilter('p', strip);
+      editor.parser.addNodeFilter('p', strip);
+    });
+
+    editor.on('init', sync);
+    editor.on('SetContent input keyup change Undo Redo NodeChange', function () {
+      // SetContent 之后 DOM 才稳定，放到下一帧再判断。
+      window.setTimeout(sync, 0);
+    });
+
+    // 正文里只有占位段落时，光标没有可落点：补一个空段落并把光标放进去。
+    var ensureCaret = function () {
+      var root = body();
+      if (!root) {
+        return;
+      }
+      // 占位段落 pointer-events:none，点击会落到 body 本身；光标已经落在
+      // 段落里时不要再动它，避免每次点击都挪动光标。
+      var node = editor.selection.getNode();
+      if (node && node.nodeType === 1 && node !== root && node.nodeName !== 'BODY') {
+        return;
+      }
+      hide();
+      if (!root.firstChild) {
+        root.appendChild(editor.dom.create('p', {}, '<br data-mce-bogus="1">'));
+      }
+      editor.selection.setCursorLocation(root.firstChild, 0);
+    };
+    editor.on('click', ensureCaret);
+  });
+})(window);