组件演示[{"title":"在contenteditable容器中使用","id":"components-mention-demo-contenteditable","tags":[],"filepath":"site/components/mention/demo/contenteditable.md","directory":"components/mention/demo","filename":"contenteditable","meta":{"title":"在contenteditable容器中使用","description":"\n<p>可在contenteditable容器中使用。</p>\n","order":"0","filepath":"site/components/mention/demo/contenteditable.md","filename":"contenteditable","directory":"components/mention/demo","id":"components-mention-demo-contenteditable","template":"demos","html":"<script>(function(){'use strict';\n\nvar _uxcoreMention = require('uxcore-mention');\n\nvar _uxcoreMention2 = _interopRequireDefault(_uxcoreMention);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nvar source = ['aaaaa', 'aabbb', 'aaccc', 'bbbcc', 'dddee', 'fffqq', 'pppaa', 'ppccc'];\n\nfunction formatter(data) {\n return data.map(function (item) {\n return {\n text: item\n };\n });\n}\n\nReactDOM.render(React.createElement(\n _uxcoreMention2.default,\n {\n matchRange: [1, 6],\n source: source,\n formatter: formatter\n },\n React.createElement(_uxcoreMention.ContenteditableEditor, { placeholder: '\\u5728\\u6B64\\u7F16\\u8F91' })\n), document.getElementById('components-mention-demo-contenteditable'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\"><span class=\"hljs-keyword\">import</span> Mention, { ContenteditableEditor } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore-mention'</span>;\n\n<span class=\"hljs-keyword\">const</span> source = [<span class=\"hljs-string\">'aaaaa'</span>, <span class=\"hljs-string\">'aabbb'</span>, <span class=\"hljs-string\">'aaccc'</span>, <span class=\"hljs-string\">'bbbcc'</span>, <span class=\"hljs-string\">'dddee'</span>, <span class=\"hljs-string\">'fffqq'</span>, <span class=\"hljs-string\">'pppaa'</span>, <span class=\"hljs-string\">'ppccc'</span>];\n\n<span class=\"hljs-function\"><span class=\"hljs-keyword\">function</span> <span class=\"hljs-title\">formatter</span>(<span class=\"hljs-params\">data</span>) </span>{\n <span class=\"hljs-keyword\">return</span> data.map(item => ({\n text: item,\n }));\n}\n\nReactDOM.render(\n <span class=\"xml\"><span class=\"hljs-tag\"><<span class=\"hljs-title\">Mention</span>\n <span class=\"hljs-attribute\">matchRange</span>=<span class=\"hljs-value\">{[1,</span> <span class=\"hljs-attribute\">6</span>]}\n <span class=\"hljs-attribute\">source</span>=<span class=\"hljs-value\">{source}</span>\n <span class=\"hljs-attribute\">formatter</span>=<span class=\"hljs-value\">{formatter}</span>\n ></span>\n <span class=\"hljs-tag\"><<span class=\"hljs-title\">ContenteditableEditor</span> <span class=\"hljs-attribute\">placeholder</span>=<span class=\"hljs-value\">\"在此编辑\"</span> /></span>\n <span class=\"hljs-tag\"></<span class=\"hljs-title\">Mention</span>></span>,\n document.getElementById('components-mention-demo-contenteditable')\n);</span></code></pre></div>"},"status":"public","toc":""},{"title":"在表单元素中使用","id":"components-mention-demo-formelement","tags":[],"filepath":"site/components/mention/demo/formelement.md","directory":"components/mention/demo","filename":"formelement","meta":{"title":"在表单元素中使用","description":"\n<p>在 textarea 和 input 中使用。</p>\n","order":"1","filepath":"site/components/mention/demo/formelement.md","filename":"formelement","directory":"components/mention/demo","id":"components-mention-demo-formelement","template":"demos","html":"<script>(function(){'use strict';\n\nvar _uxcoreMention = require('uxcore-mention');\n\nvar _uxcoreMention2 = _interopRequireDefault(_uxcoreMention);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nvar source = ['aaaaa', 'aabbb', 'aaccc', 'bbbcc', 'dddee', 'fffqq', 'pppaa', 'ppccc'];\n\nfunction formatter(data) {\n return data.map(function (item) {\n return {\n text: item\n };\n });\n}\n\nReactDOM.render(React.createElement(\n _uxcoreMention2.default,\n {\n matchRange: [1, 6],\n source: source,\n formatter: formatter\n },\n React.createElement(_uxcoreMention.TextareaEditor, {\n placeholder: '\\u5728\\u6B64\\u7F16\\u8F91'\n }),\n React.createElement(_uxcoreMention.InputEditor, {\n placeholder: '\\u5728\\u6B64\\u7F16\\u8F91'\n })\n), document.getElementById('components-mention-demo-formelement'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\"><span class=\"hljs-keyword\">import</span> Mention, { TextareaEditor, InputEditor } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore-mention'</span>;\n\n<span class=\"hljs-keyword\">const</span> source = [<span class=\"hljs-string\">'aaaaa'</span>, <span class=\"hljs-string\">'aabbb'</span>, <span class=\"hljs-string\">'aaccc'</span>, <span class=\"hljs-string\">'bbbcc'</span>, <span class=\"hljs-string\">'dddee'</span>, <span class=\"hljs-string\">'fffqq'</span>, <span class=\"hljs-string\">'pppaa'</span>, <span class=\"hljs-string\">'ppccc'</span>];\n\n<span class=\"hljs-function\"><span class=\"hljs-keyword\">function</span> <span class=\"hljs-title\">formatter</span>(<span class=\"hljs-params\">data</span>) </span>{\n <span class=\"hljs-keyword\">return</span> data.map(item => ({\n text: item,\n }));\n}\n\nReactDOM.render(\n <span class=\"xml\"><span class=\"hljs-tag\"><<span class=\"hljs-title\">Mention</span>\n <span class=\"hljs-attribute\">matchRange</span>=<span class=\"hljs-value\">{[1,</span> <span class=\"hljs-attribute\">6</span>]}\n <span class=\"hljs-attribute\">source</span>=<span class=\"hljs-value\">{source}</span>\n <span class=\"hljs-attribute\">formatter</span>=<span class=\"hljs-value\">{formatter}</span>\n ></span>\n <span class=\"hljs-tag\"><<span class=\"hljs-title\">TextareaEditor</span>\n <span class=\"hljs-attribute\">placeholder</span>=<span class=\"hljs-value\">\"在此编辑\"</span>\n /></span>\n <span class=\"hljs-tag\"><<span class=\"hljs-title\">InputEditor</span>\n <span class=\"hljs-attribute\">placeholder</span>=<span class=\"hljs-value\">\"在此编辑\"</span>\n /></span>\n <span class=\"hljs-tag\"></<span class=\"hljs-title\">Mention</span>></span>,\n document.getElementById('components-mention-demo-formelement')\n);</span></code></pre></div>"},"status":"public","toc":""},{"title":"在tinymce中使用","id":"components-mention-demo-tinymce","tags":[],"filepath":"site/components/mention/demo/tinymce.md","directory":"components/mention/demo","filename":"tinymce","meta":{"title":"在tinymce中使用","description":"\n<p>在 tinymce 中使用。</p>\n","order":"2","filepath":"site/components/mention/demo/tinymce.md","filename":"tinymce","directory":"components/mention/demo","id":"components-mention-demo-tinymce","template":"demos","html":"<script>(function(){'use strict';\n\nvar _uxcore = require('uxcore');\n\nvar _uxcoreMention = require('uxcore-mention');\n\nvar _uxcoreMention2 = _interopRequireDefault(_uxcoreMention);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nvar mockData = function () {\n var size = 8,\n data = [];\n while (size -= 1) {\n data.push({\n emplId: new Array(6).join(size),\n nickNameCn: '\\u6635\\u79F0' + (size + 2),\n name: '\\u540D\\u5B57' + (size + 1),\n avatar: '//gtms02.alicdn.com/tps/i2/TB1Xe3SMpXXXXX6XpXXTCU0QpXX-300-300.jpg'\n });\n }\n return data;\n}();\n\nfunction getPersonData(keyword, next) {\n setTimeout(function () {\n next(mockData);\n }, 100);\n}\n\nfunction personDataFormatter(data) {\n data.forEach(function (item) {\n item.displayName = item.name + (item.nickNameCn ? '(' + item.nickNameCn + ')' : '');\n });\n return data;\n}\n\nfunction personMentionFormatter(data) {\n return '@' + data.name + '(' + data.emplId + ')';\n}\n\nfunction personPanelFormatter(data) {\n return '<img src=\"' + data.avatar + '\" width=\"25\" height=\"25\" title=\"' + data.name + '\">' + data.displayName + ' - ' + data.emplId;\n}\n\nReactDOM.render(React.createElement(\n _uxcoreMention.TinymceMention,\n {\n insertMode: 'TEXT_NODE',\n source: getPersonData,\n formatter: personDataFormatter,\n mentionFormatter: personMentionFormatter,\n panelFormatter: personPanelFormatter\n },\n React.createElement(_uxcore.Tinymce, {\n placeholder: '在此编辑'\n })\n), document.getElementById('components-mention-demo-tinymce'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\"><span class=\"hljs-keyword\">import</span> { Tinymce } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n<span class=\"hljs-keyword\">import</span> Mention, { TinymceMention } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore-mention'</span>;\n\n<span class=\"hljs-keyword\">const</span> mockData = (<span class=\"hljs-function\"><span class=\"hljs-keyword\">function</span> (<span class=\"hljs-params\"></span>) </span>{\n <span class=\"hljs-keyword\">let</span> size = <span class=\"hljs-number\">8</span>,\n data = [];\n <span class=\"hljs-keyword\">while</span> (size -= <span class=\"hljs-number\">1</span>) {\n data.push({\n emplId: <span class=\"hljs-keyword\">new</span> <span class=\"hljs-built_in\">Array</span>(<span class=\"hljs-number\">6</span>).join(size),\n nickNameCn: <span class=\"hljs-string\">`昵称<span class=\"hljs-subst\">${size + 2}</span>`</span>,\n name: <span class=\"hljs-string\">`名字<span class=\"hljs-subst\">${size + 1}</span>`</span>,\n avatar: <span class=\"hljs-string\">'//gtms02.alicdn.com/tps/i2/TB1Xe3SMpXXXXX6XpXXTCU0QpXX-300-300.jpg'</span>,\n });\n }\n <span class=\"hljs-keyword\">return</span> data;\n}());\n\n<span class=\"hljs-function\"><span class=\"hljs-keyword\">function</span> <span class=\"hljs-title\">getPersonData</span>(<span class=\"hljs-params\">keyword, next</span>) </span>{\n setTimeout(() => {\n next(mockData);\n }, <span class=\"hljs-number\">100</span>);\n}\n\n<span class=\"hljs-function\"><span class=\"hljs-keyword\">function</span> <span class=\"hljs-title\">personDataFormatter</span>(<span class=\"hljs-params\">data</span>) </span>{\n data.forEach((item) => {\n item.displayName = item.name + (item.nickNameCn ? <span class=\"hljs-string\">`(<span class=\"hljs-subst\">${item.nickNameCn}</span>)`</span> : <span class=\"hljs-string\">''</span>);\n });\n <span class=\"hljs-keyword\">return</span> data;\n}\n\n<span class=\"hljs-function\"><span class=\"hljs-keyword\">function</span> <span class=\"hljs-title\">personMentionFormatter</span>(<span class=\"hljs-params\">data</span>) </span>{\n <span class=\"hljs-keyword\">return</span> <span class=\"hljs-string\">`@<span class=\"hljs-subst\">${data.name}</span>(<span class=\"hljs-subst\">${data.emplId}</span>)`</span>;\n}\n\n<span class=\"hljs-function\"><span class=\"hljs-keyword\">function</span> <span class=\"hljs-title\">personPanelFormatter</span>(<span class=\"hljs-params\">data</span>) </span>{\n <span class=\"hljs-keyword\">return</span> <span class=\"hljs-string\">`<img src=\"<span class=\"hljs-subst\">${data.avatar}</span>\" width=\"25\" height=\"25\" title=\"<span class=\"hljs-subst\">${data.name}</span>\"><span class=\"hljs-subst\">${data.displayName}</span> - <span class=\"hljs-subst\">${data.emplId}</span>`</span>;\n}\n\nReactDOM.render(\n <span class=\"xml\"><span class=\"hljs-tag\"><<span class=\"hljs-title\">TinymceMention</span>\n <span class=\"hljs-attribute\">insertMode</span>=<span class=\"hljs-value\">{'TEXT_NODE'}</span>\n <span class=\"hljs-attribute\">source</span>=<span class=\"hljs-value\">{getPersonData}</span>\n <span class=\"hljs-attribute\">formatter</span>=<span class=\"hljs-value\">{personDataFormatter}</span>\n <span class=\"hljs-attribute\">mentionFormatter</span>=<span class=\"hljs-value\">{personMentionFormatter}</span>\n <span class=\"hljs-attribute\">panelFormatter</span>=<span class=\"hljs-value\">{personPanelFormatter}</span>\n ></span>\n <span class=\"hljs-tag\"><<span class=\"hljs-title\">Tinymce</span>\n <span class=\"hljs-attribute\">placeholder</span>=<span class=\"hljs-value\">{'在此编辑'}</span>\n /></span>\n <span class=\"hljs-tag\"></<span class=\"hljs-title\">TinymceMention</span>></span>,\n document.getElementById('components-mention-demo-tinymce')\n);</span></code></pre></div>"},"status":"public","toc":""}]在contenteditable容器中使用 可在contenteditable容器中使用。 import Mention, { ContenteditableEditor } from 'uxcore-mention'; const source = ['aaaaa', 'aabbb', 'aaccc', 'bbbcc', 'dddee', 'fffqq', 'pppaa', 'ppccc']; function formatter(data) { return data.map(item => ({ text: item, })); } ReactDOM.render( <Mention matchRange={[1, 6]} source={source} formatter={formatter} > <ContenteditableEditor placeholder="在此编辑" /> </Mention>, document.getElementById('components-mention-demo-contenteditable') );在表单元素中使用 在 textarea 和 input 中使用。 import Mention, { TextareaEditor, InputEditor } from 'uxcore-mention'; const source = ['aaaaa', 'aabbb', 'aaccc', 'bbbcc', 'dddee', 'fffqq', 'pppaa', 'ppccc']; function formatter(data) { return data.map(item => ({ text: item, })); } ReactDOM.render( <Mention matchRange={[1, 6]} source={source} formatter={formatter} > <TextareaEditor placeholder="在此编辑" /> <InputEditor placeholder="在此编辑" /> </Mention>, document.getElementById('components-mention-demo-formelement') );在tinymce中使用 在 tinymce 中使用。 import { Tinymce } from 'uxcore'; import Mention, { TinymceMention } from 'uxcore-mention'; const mockData = (function () { let size = 8, data = []; while (size -= 1) { data.push({ emplId: new Array(6).join(size), nickNameCn: `昵称${size + 2}`, name: `名字${size + 1}`, avatar: '//gtms02.alicdn.com/tps/i2/TB1Xe3SMpXXXXX6XpXXTCU0QpXX-300-300.jpg', }); } return data; }()); function getPersonData(keyword, next) { setTimeout(() => { next(mockData); }, 100); } function personDataFormatter(data) { data.forEach((item) => { item.displayName = item.name + (item.nickNameCn ? `(${item.nickNameCn})` : ''); }); return data; } function personMentionFormatter(data) { return `@${data.name}(${data.emplId})`; } function personPanelFormatter(data) { return `<img src="${data.avatar}" width="25" height="25" title="${data.name}">${data.displayName} - ${data.emplId}`; } ReactDOM.render( <TinymceMention insertMode={'TEXT_NODE'} source={getPersonData} formatter={personDataFormatter} mentionFormatter={personMentionFormatter} panelFormatter={personPanelFormatter} > <Tinymce placeholder={'在此编辑'} /> </TinymceMention>, document.getElementById('components-mention-demo-tinymce') );编辑框内at任何对象 APIMention formatter(arr): format the data form source. panelFormatter(obj): customize the panel display. onChange(e, value): onChange事件。 TinymceMention formatter(arr): format the data form source. panelFormatter(obj): customize the panel display. mentionFormatter(obj): customize the insert content with this function. onChange(e, value): Callback invoked when the editor's content has been changed. onAdd(display, originData): Callback invoked when a mention has been added. ContentEditableEditor mentionFormatter(obj): customize the insert content with this function. onChange(e, value): Callback invoked when the editor's content has been changed. onAdd(display, originData): Callback invoked when a mention has been added. TextareaEditor mentionFormatter(obj): customize the insert content with this function. onChange(e, value): Callback invoked when the editor's content has been changed. onAdd(display, originData): Callback invoked when a mention has been added. InputEditor mentionFormatter(obj): customize the insert content with this function. onChange(e, value): Callback invoked when the editor's content has been changed. onAdd(display, originData): Callback invoked when a mention has been added. propsMention name Description Type Default prefixCls class prefix string kuma-mention source data source for mention content array or function [] delay debounce of the request to data source number 100 matchRange only match the string after delimiter which the length in this range array [2, 8] formatter format the data form source function panelFormatter customize the panel display function onChange trigger when editor content change function(e, value) TinymceMention name Description Type Default prefixCls class prefix string kuma-mention source data source for mention content array or function [] delay debounce of the request to data source number 100 matchRange only match the string after delimiter which the length in this range array [2, 8] formatter format the data form source function panelFormatter customize the panel display function mentionFormatter customize the insert content with this function function onChange trigger when editor content change function(e, value) onAdd Callback invoked when a mention has been added function(display, originData) insertMode ELEMENT_NODE will insert mention content with a button, TEXT_NODE will insert with a text node string ELEMENT_NODE or TEXT_NODE ContentEditableEditor name Description Type Default prefixCls class prefix string kuma-mention width editor's width number 200 height editor's height number 100 placeholder placeholder string '' mentionFormatter customize the insert content with this function function onChange Callback invoked when the editor's content has been changed function(e, value) onAdd Callback invoked when a mention has been added function(display, originData) defaultValue default values string readOnly can not edit boolean delimiter Defines the char sequence upon which to trigger querying the data source string '@' TextareaEditor name Description Type Default prefixCls class prefix string kuma-mention width editor's width number 200 height editor's height number 100 placeholder placeholder string '' mentionFormatter customize the insert content with this function function onChange Callback invoked when the editor's content has been changed function(e, value) onAdd Callback invoked when a mention has been added function(display, originData) defaultValue default values string readOnly can not edit boolean delimiter Defines the char sequence upon which to trigger querying the data source string '@' InputEditor name Description Type Default prefixCls class prefix string kuma-mention width editor's width number 200 height editor's height number 30 placeholder placeholder string '' mentionFormatter customize the insert content with this function function onChange Callback invoked when the editor's content has been changed function(e, value) onAdd Callback invoked when a mention has been added function(display, originData) defaultValue default values string readOnly can not edit boolean delimiter Defines the char sequence upon which to trigger querying the data source string '@'
