README

警告

此包已过时！

虽然声明性语法很酷，但问题实在过于复杂，无法使用这样的简单框架。

建议使用库https://github.com/mhsdesign/MhsDesign.LiveInspectorJsEvents来创建自定义/适合的实现，而不是依赖这个有偏见的包。

有关使用推荐库的教程，请参阅：https://github.com/mhsdesign/MhsDesign.LiveInspectorJsEvents#tutorial-for-a-self-made-implementation

由于剩余使用量很少，此包可能不会与 Neos 8 兼容。

使用更多*实时反馈编辑您的 Neos 网站！

*Neos 已经内置了一个出色的内联编辑器：www.neos.io

Neos CMS 的实时检查编辑插件

MhsDesign.LiveInspectorDomChange

(最不具广告性的名称 - 但这就是实际情况)

通过 composer 安装此包

composer require mhsdesign/liveinspectordomchange

演示视频： 感谢 @Sebobo 为 https://github.com/Sebobo/Shel.Neos.ColorPicker 做出贡献

用法

在您的 Fusion 组件中激活实时检查编辑

'Vendor.Site:Content.Example':
  superTypes:
    'Neos.Neos:Content': true
  ui:
    icon: 'icon-internet-explorer'
    label: 'Example'
    # this will remove the Neos not inline editable overlay.
    inlineEditable: true
    inspector:
    groups:
      settings:
      label: 'Settings'
  properties:
    height:
    type: string
    ui:
      # not need to explicitly state it since its the default:
      # reloadIfChanged: false
      label: 'Height'
      inspector:
      group: settings
      editor: 'Neos.Neos/Inspector/Editors/SelectBoxEditor'
      editorOptions:
        allowEmpty: true
        values:
          # your css classes as key.
          height-sm:
            label: 'Small'
          height-md:
            label: 'Medium'
          height-lg:
            label: 'Large'

此 Fusion 允许更改类

prototype(Vendor.Site:Content.Example) < prototype(Neos.Neos:ContentComponent) {

  height = ${q(node).property('height')}
  heightClassChanger = ${Editable.attributes(node, 'height', 'changeClass')}

  renderer = afx`
    <div class={props.height} {...props.heightClassChanger}></div>
  `
}

EEL 助手 Editable.attributes 将返回一个需要通过 Fusion @apply 或作为 AFX 展开在 HTML 元素上实时应用以更新的属性数组。

（这些展开在 Js 世界中工作得很好：`

` 将渲染为 `

EEL 助手将仅在后台将属性渲染到您的标记中。

一个 HTML 元素上的多个 Editable.attributes

只需在同一个 HTML 元素上添加两个展开。 `

您也可以通过：`Array.concat(Editable.attributes(), Editable.attributes())` 在之前将它们连接起来，并将其作为展开应用于您的 HTML 元素。

请注意，一个 HTML 元素上的多个可编辑属性必须来自同一个节点！

API

EEL 助手

${Editable.attributes(node, propName, changerFunction, changerArguments=null)}

• node (NodeInterface): 具有属性的当前节点。
• propName (string): 属性名称 - 必须与 CR（Yaml 声明）中的名称相同，并属于 node，否则将抛出异常。
• changerFunction (string) 要执行函数的名称。 (Js liveChangeFunctions 对象的键)
• changerArguments (mixed) JavaScript 函数的附加参数。可以是任何类型，只要它们可以被 Json 编码。 注意：如果提供 null，它将在 JavaScript 中转换为空数组，以便允许嵌套默认参数。

JavaScript 'Changer'函数

所有函数都必须在全局对象liveChangeFunctions上注册。

预定义函数

• changeClass
  • changerArguments：无
  • 示例：${Editable.attributes(node, 'height', 'changeClass')}
• changeStyle
  • changerArguments：字符串和HTMLElement.style的有效属性
  • 示例：${Editable.attributes(node, 'color', 'changeStyle', 'color')}
• changeText
  • changerArguments：无
  • 示例：${Editable.attributes(node, 'color', 'changeStyle', 'color')}
• clientEval
  • changerArguments：字符串，将通过JavaScript eval*进行评估。可以使用el, propName, newVal, oldVal。
  • 示例：${Editable.attributes(node, 'color', 'clientEval', 'el.textContent = newVal; console.log(oldVal);')}

* 我使用eval，这很邪恶。

创建自定义JavaScript 'Changer'函数

将此代码添加到后端iframe中的JavaScript中。

liveChangeFunctions.myFunctionName = ({el, propName, newVal, oldVal, arguments}) => {
  el // is the current dom element.
  el.textContent = newVal
}

用法如下

${Editable.attributes(node, 'something', 'myFunctionName')}

常见问题解答

我不想污染我的Fusion

见#1

限制

• 它不适用于图像，因为'Redux Cr node'不知道图像uri。(可能可以通过端点使用，但这样复杂的服务器操作，如Fusion的响应式图像，将难以实现。《reloadIfChanged: true》是更好的选择。)
• 它还不能用于切换HTML元素。但你可以自己构建一个Fusion Vendor:Toogle对象，该对象将接受一个条件，在后台设置样式为display:none，并通过JS助手实现实时切换。或者使用自定义Web组件，并在customChanger中使用el.customFunction()。
• 你不能有两个节点控制一个HTML元素。

内部工作原理

实时更新是通过节点上下文路径进行评估的。这意味着只要你指定正确的节点作为Editable.attributes的参数，它就会工作。

更多信息请查看测试；) ./Tests/JavaScript/ ./Tests/Unit/

测试

从你的流程根目录运行phpunit测试

./bin/phpunit -c ./Build/BuildEssentials/PhpUnit/UnitTests.xml ./Packages/Application/MhsDesign.LiveInspectorDomChange/Tests

在./Tests/JavaScript位置运行JavaScript jest测试

# optional
# nvm install && nvm use
# npm install --global yarn
yarn install
yarn test

MhsDesign.LiveInspectorJsEvents

此包依赖于MhsDesign.LiveInspectorJsEvents包 https://github.com/mhsdesign/MhsDesign.LiveInspectorJsEvents。该包将JavaScript事件发送到iframe。