划词菜单

适用环境	SaaS
	私有部署

要求

ONES	@ones-op/bridge	@ones-op/editor
v6.2.16+	v0.46.0+	v0.46.0+

概述

插件添加该能力后，即可在wiki协同页面里面，选中文字后，在出现的浮动工具栏，添加自定义按钮和对应的操作。

使用

必须在plugin.yaml添加：

• scene: selectionAction
• preload: true
• manual: true

完整例子

modules:
  - id: ones-wiki-editor-new-VIAh
    title: example page type
    moduleType: ones:wiki:editor:new
    icon: logo.svg
    modules:
      - id: ones-wiki-editor-new-v2bt
        title: test action # 按钮文字
        enableMemoryRouter: true
        entry: modules/ones-wiki-editor-new-VIAh/ones-wiki-editor-new-v2bt/index.html
        scene: selectionAction # 必须添加
        preload: true # 必须添加
        manual: true # 必须添加
        iconText: >- # 按钮图标svg
          <?xml version="1.0" encoding="iso-8859-1"?> <svg width="16px"
          height="16px" version="1.1" id="Layer_1"
          xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
            viewBox="0 0 100.354 100.352" style="enable-background:new 0 0 100.354 100.352;" xml:space="preserve">
          <path
          d="M96.364,39.436c-0.525-1.615-1.895-2.77-3.574-3.013l-26.672-3.876L54.19,8.378c-0.751-1.522-2.272-2.468-3.97-2.468l0,0
            c-1.697,0-3.219,0.946-3.971,2.468L34.321,32.547L7.649,36.423c-1.681,0.244-3.05,1.398-3.575,3.013s-0.095,3.354,1.121,4.54
            l19.3,18.813L19.92,89.466c-0.285,1.659,0.38,3.311,1.734,4.311c0.78,0.576,1.7,0.87,2.626,0.87c0.682,0,1.367-0.159,2.003-0.481
            l24.49-12.395l23.302,12.25c1.503,0.791,3.29,0.662,4.663-0.337c1.374-0.998,2.049-2.658,1.762-4.331l-4.557-26.564l19.3-18.812
            C96.459,42.791,96.889,41.051,96.364,39.436z M93.15,41.828L72.72,61.742l4.823,28.118c0.094,0.548-0.119,1.07-0.568,1.397
            c-0.449,0.328-1.011,0.369-1.503,0.109L50.8,78.395L24.929,91.489c-0.494,0.249-1.05,0.201-1.493-0.125
            c-0.443-0.327-0.652-0.847-0.559-1.39l4.842-28.231L7.289,41.829c-0.398-0.388-0.533-0.935-0.361-1.464
            c0.172-0.528,0.603-0.892,1.153-0.972l28.233-4.103L48.94,9.707c0.246-0.499,0.725-0.796,1.28-0.796l0,0
            c0.556,0,1.034,0.297,1.28,0.796L64.126,35.29l28.233,4.103c0.55,0.08,0.98,0.443,1.152,0.972S93.548,41.44,93.15,41.828z"/>
          </svg>

会出现下面的按钮

响应按钮点击功能：

import React from 'react'
import ReactDOM from 'react-dom'
import { Button, ConfigProvider } from '@ones-design/core'
import { lifecycle, OPProvider } from '@ones-op/bridge'
import type { OnesEditor } from '@ones-editor/editor'
import { useStoreInfo } from '@ones-op/store'

function TestAction() {
  const storeInfo = useStoreInfo()
  console.log('store', storeInfo)
  const store = storeInfo.store
  const { variablesInfo, wikiPageInfo, wikiTemplatePageInfo, wikiShareInfo } = store as any
  const { editor, tools } = variablesInfo
  console.log(editor, tools, wikiPageInfo, wikiShareInfo, wikiTemplatePageInfo)
  const onesEditor = tools.getRawEditor() as OnesEditor
  const text = onesEditor.getSelectedText()
  const html = onesEditor.selection.to('html')

  return (
    <div style={{
      position: 'fixed',
      top: '0',
      left: '0',
      width: '100%',
      height: '100%',
      zIndex: '9999',
      background: 'white',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      flexDirection: 'column',
    }}>
      <p>
        <pre>{JSON.stringify(wikiPageInfo, null, 2)}</pre>
      </p>
      <p>
        <pre>{text}</pre>
      </p>
      <p dangerouslySetInnerHTML={{ __html: html }}></p>
      <Button onClick={() => lifecycle.destroy()}>Close</Button>
    </div>
  )
}

ReactDOM.render(
  <ConfigProvider>
    <OPProvider>
      <TestAction />
    </OPProvider>
  </ConfigProvider>,
  document.getElementById('ones-mf-root')
)

lifecycle.onDestroy(() => {
  ReactDOM.unmountComponentAtNode(document.getElementById('ones-mf-root'))
})

详细步骤

创建一个项目

ones create -d

添加一个wiki编辑器模块

npx op add module

在这一步里面，module type选择ones:wiki:editor:new

添加一个子模块

npx op add sub-module

选择之前添加的module id，添加一个子模块

修改子模块配置

编辑config/plugin.yaml，在对应的sub-module下面， 添加scene: selectionAction, preload: true, manual: true

scene: selectionAction
preload: true
manual: true

子模块的title，将会作为按钮的文字显示。如果要现实为一个图标，则可以添加iconText字段，值为svg字符串。

编写点击按钮后的响应代码

按照前面的例子，编写一个响应代码，可以获取到选中的文字，和选中文字的html。 需要注意的是，点击按钮并完成相应操作之后，必须调用lifecycle.destroy()来关闭插件。否则在第二次点击按钮时，会出现异常。