Toolbar collapse item custome failured, How can define success? about am-editor

[big-camel]

需要配置工具栏里面的 popup 属性列表

[big-camel]

toolbar 的 options 里面加上 popup 属性列表------------------------------------------------------------------ ***@***.***> 日　期：2024年01月12日 19:40:33 ***@***.***> ***@***.***>; ***@***.***> 主　题：Re: [red-axe/am-editor] Toolbar collapse item custome failured, How can define success? (Issue #362) 下拉菜单也用的是这个，全部配置如下： import type { PluginEntry, CardEntry, PluginOptions, NodeInterface, RangeInterface, EngineInterface, } from ***@***.***/engine"; // 插件 import Redo from ***@***.***/plugin-redo"; import Undo from ***@***.***/plugin-undo"; import Bold from ***@***.***/plugin-bold"; import Code from ***@***.***/plugin-code"; import Backcolor from ***@***.***/plugin-backcolor"; import Fontcolor from ***@***.***/plugin-fontcolor"; import Fontsize from ***@***.***/plugin-fontsize"; import Italic from ***@***.***/plugin-italic"; import Underline from ***@***.***/plugin-underline"; import Hr, { HrComponent } from ***@***.***/plugin-hr"; import Tasklist, { CheckboxComponent } from ***@***.***/plugin-tasklist"; import Orderedlist from ***@***.***/plugin-orderedlist"; import Unorderedlist from ***@***.***/plugin-unorderedlist"; import Indent from ***@***.***/plugin-indent"; import Heading from ***@***.***/plugin-heading"; import Strikethrough from ***@***.***/plugin-strikethrough"; import Sub from ***@***.***/plugin-sub"; import Sup from ***@***.***/plugin-sup"; import Alignment from ***@***.***/plugin-alignment"; import Mark from ***@***.***/plugin-mark"; import Quote from ***@***.***/plugin-quote"; import PaintFormat from ***@***.***/plugin-paintformat"; import RemoveFormat from ***@***.***/plugin-removeformat"; import SelectAll from ***@***.***/plugin-selectall"; import Link from ***@***.***/plugin-link-vue"; import Codeblock, { CodeBlockComponent } from ***@***.***/plugin-codeblock-vue"; import Image, { ImageComponent, ImageUploader } from ***@***.***/plugin-image"; import Table, { TableComponent } from ***@***.***/plugin-table"; // import File, { FileComponent, FileUploader } from ***@***.***/plugin-file"; // import Video, { VideoComponent, VideoUploader } from ***@***.***/plugin-video"; import Math, { MathComponent } from ***@***.***/plugin-math"; import Fontfamily from ***@***.***/plugin-fontfamily"; import Status, { StatusComponent } from ***@***.***/plugin-status"; import LineHeight from ***@***.***/plugin-line-height"; import Mention, { MentionComponent } from ***@***.***/plugin-mention"; import MarkRange from ***@***.***/plugin-mark-range"; import Book, { BookComponent } from './plugin/book' import { ToolbarPlugin, ToolbarComponent, fontFamilyDefaultData, } from ***@***.***/toolbar-vue"; export const plugins: Array<PluginEntry> = [ Redo, Undo, Bold, Code, Backcolor, Fontcolor, Fontsize, Italic, Underline, Hr, Tasklist, Orderedlist, Unorderedlist, Indent, Heading, Strikethrough, Sub, Sup, Alignment, Mark, Quote, PaintFormat, RemoveFormat, SelectAll, Link, Codeblock, Image, ImageUploader, Table, // File, // FileUploader, // Video, // VideoUploader, Math, ToolbarPlugin, Fontfamily, Status, LineHeight, Mention, MarkRange, // Cannot read properties of undefined (reading 'map' Book, ]; export const cards: Array<CardEntry> = [ HrComponent, CheckboxComponent, CodeBlockComponent, ImageComponent, TableComponent, // FileComponent, // VideoComponent, MathComponent, ToolbarComponent, StatusComponent, MentionComponent, BookComponent, ]; let engine: EngineInterface | null = null; export const setEngine = (e: EngineInterface) => { engine = e; }; // collapse 菜单统一配置 const collapseItems = [ { name: 'image-uploader', className: 'btn-collapse', icon: 'image', title: '图片', search: '图片,tupian,image,img', onClick() { engine && engine.trigger('openImageStore') return false } }, { name: Book.pluginName, className: 'iconfont icon-books', icon: '', title: '本子', type: 'dropdown', search: '本子,benzi,book', onClick() { engine && engine.trigger('openBookStore') return false } }, { name: 'codeblock', title: '代码' }, 'table', // 'file-uploader', // 'video-uploader', 'math', 'status', ] export const menu: Array<Array<any>> = [ [{ type: 'collapse', groups: [{ items: collapseItems, }], }], ["heading", "fontfamily", "fontsize"], ["bold", "italic", "strikethrough", "underline"], ["fontcolor", "backcolor"], ["alignment"], ["unorderedlist", "orderedlist", "tasklist", "indent", "line-height"], ["link", "quote", "hr", "moremark"], ["undo", "redo", "paintformat", "removeformat"], ] const apiPrefix = '/v1' export const pluginConfig: { [key: string]: PluginOptions } = { [MarkRange.pluginName]: { keys: ["mark"], onChange: ( addIds: { [key: string]: Array<string> }, removeIds: { [key: string]: Array<string> } ) => { // 新增的标记 const commentAddIds = addIds["comment"] || []; // 删除的标记 const commentRemoveIds = removeIds["comment"] || []; }, onSelect: ( range: RangeInterface, selectInfo?: { key: string; id: string } ) => { const { key, id } = selectInfo || {}; engine?.command.executeMethod( "mark-range", "action", "comment", "revoke" ); if (key === "mark" && id) { engine?.command.executeMethod( "mark-range", "action", key, "preview", id ); } }, }, [Italic.pluginName]: { markdown: "*", }, [Image.pluginName]: { onBeforeRender: (status: string, url: string) => { if (url.startsWith("data:image/")) return url; return url; }, }, [ImageUploader.pluginName]: { file: { action: `${apiPrefix}/upload/image/file`, name: 'file', data: { title: '文章内容图片', categoryId: '130000', width: 280, height: 280, tags: '文章内容图片', }, limitSize: 1024 * 1024 * 5, contentType: 'multipart/form-data', }, remote: { action: `${apiPrefix}/upload/image/url`, name: 'file', data: { title: '文章内容图片', categoryId: '130000', tags: '文章内容图片', }, limitSize: 1024 * 1024 * 5, contentType: 'multipart/form-data', }, parse: (res: any) => { if (res.code === 0) { return { result: true, data: res.data.source }; } return { result: false, data: '' }; }, isRemote: (src: string) => { return 'catebook.com'.indexOf(src) < 0 } }, // [FileUploader.pluginName]: { // action: `${apiPrefix}/upload/file`, // }, // [VideoUploader.pluginName]: { // action: `${apiPrefix}/upload/video`, // limitSize: 1024 * 1024 * 50, // }, // [Video.pluginName]: { // onBeforeRender: (status: string, url: string) => { // return url; // }, // }, [Math.pluginName]: { action: `${apiPrefix}/tool/latex`, parse: (res: any) => { if (res.code === 0) { return { result: true, data: res.data.file }; } return { result: false, data: '' }; }, }, [Mention.pluginName]: { action: `${apiPrefix}/friend/search`, onLoading: (root: NodeInterface) => { // const vm = createApp(Loading); // vm.mount(root.get<HTMLElement>()!); }, onEmpty: (root: NodeInterface) => { // const vm = createApp(Empty); // vm.mount(root.get<HTMLElement>()!); }, onClick: ( root: NodeInterface, { key, name }: { key: string; name: string } ) => { console.log("mention click:", key, "-", name); }, onMouseEnter: ( layout: NodeInterface, { name }: { key: string; name: string } ) => { // const vm = createApp(MentionPopover, { // name, // }); // vm.mount(layout.get<HTMLElement>()!); }, }, [Fontsize.pluginName]: { //配置粘贴后需要过滤的字体大小 filter: (fontSize: string) => { return ( [ "12px", "13px", "14px", "15px", "16px", "19px", "22px", "24px", "29px", "32px", "40px", "48px", ].indexOf(fontSize) > -1 ); }, }, [Fontfamily.pluginName]: { //配置粘贴后需要过滤的字体 filter: (fontfamily: string) => { const item = fontFamilyDefaultData.find((item) => fontfamily .split(",") .some( (name) => item.value .toLowerCase() .indexOf(name.replace(/"/, "").toLowerCase()) > -1 ) ); return item ? item.value : false; }, }, [LineHeight.pluginName]: { //配置粘贴后需要过滤的行高 filter: (lineHeight: string) => { if (lineHeight === "14px") return "1"; if (lineHeight === "16px") return "1.15"; if (lineHeight === "21px") return "1.5"; if (lineHeight === "28px") return "2"; if (lineHeight === "35px") return "2.5"; if (lineHeight === "42px") return "3"; // 不满足条件就移除掉 return ["1", "1.15", "1.5", "2", "2.5", "3"].indexOf(lineHeight) > -1; }, }, // 跟随鼠标拖蓝选中后的工具栏弹出框 [ToolbarPlugin.pluginName]: { popup: { items: [ { icon: 'text', items: [ 'bold', 'italic', 'strikethrough', 'underline', 'backcolor', 'moremark', ] } ] }, // 斜杠/下拉菜单的配置 config: [{ title: '常用内容',// 可选这里不显示 items: collapseItems }], }, }; — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you commented.Message ID: ***@***.***>

[big-camel]

toolbar options 的 config 选项？

[big-camel]

配置不是通用的，也需要去config那里再配置一次

[big-camel]

确认你的插件已经配置到 plugins 里面了吗?

[big-camel]

你这是vue几

[catacode]

"@aomao/engine": "^2.9",
"vue": "^3.3.4",

[big-camel]

我看代码逻辑确实没啥问题
只能你那边debug看看了，f12 debug node_modules 里面的 toolbar-vue 插件中的代码，找到这个 getData 代码

[big-camel]

浏览器上debug，如果直接 console.log ，你需要重新启动项目，不然vue加载的仍然是缓存的 node_modules 内的文件

[big-camel]

然后继续到渲染的那一步

[big-camel]

不是的，后面 items.push 这里只是覆盖配置而已

[catacode]

camel,有处理建议吗？

[big-camel]

继续往下，到渲染那里看看

[big-camel]

在跟踪 data 在哪里变化了吧

[big-camel]

https://www.npmjs.com/package/@aomao/toolbar-vue/v/2.9.36?activeTab=code

那就升级版本吧，从 2.9 的最后一个版本可以看到下面的 else

[catacode]

版本设计2.10后，确实有数据了，感谢

不过报错了，不影响正常使用。