1.8 Hello World添加menu

本文详细介绍了如何使用Joomla开发并安装一个自定义组件,包括在default.php中添加文件以使其识别为菜单项,修改helloworld.xml文件来更新组件信息,以及打包安装过程。教程覆盖了从组件的创建到最终安装的全过程。

本节讲述如何获得一个指向特定组件的链接。

(1)在default.php的统计目录下添加文件default.xml ,这就可以使joomla 能够识别default.php为一个菜单项。

site/views/helloworld/tmpl/default.xml

<?xml version="1.0" encoding="utf-8"?>
<metadata>
    <layout title="COM_HELLOWORLD_HELLOWORLD_VIEW_DEFAULT_TITLE">
        <message>
            <![CDATA[COM_HELLOWORLD_HELLOWORLD_VIEW_DEFAULT_DESC]]>
        </message>
    </layout>
</metadata>

此刻,在管理员接口中字符串不会被转换,在后面的章节中我们会看到转换时如何执行的。

(2)修改helloworld.xml并且改变版本号

 

<?xml version="1.0" encoding="utf-8"?>
<extension type="component" version="2.5.0" method="upgrade">
 
    <name>Hello World!</name>
    <!-- The following elements are optional and free of formatting constraints -->
    <creationDate>November 2009</creationDate>
    <author>John Doe</author>
    <authorEmail>john.doe@example.org</authorEmail>
    <authorUrl>http://www.example.org</authorUrl>
    <copyright>Copyright Info</copyright>
    <license>License Info</license>
    <!--  The version string is recorded in the components table -->
    <version>0.0.3</version>
    <!-- The description is optional and defaults to the name -->
    <description>Description of the Hello World component ...</description>
 
    <update> <!-- Runs on update; New in 2.5 -->
        <schemas>
            <schemapath type="mysql">sql/updates/mysql</schemapath>
        </schemas>
    </update>
 
    <!-- Site Main File Copy Section -->
    <!-- Note the folder attribute: This attribute describes the folder
        to copy FROM in the package to install therefore files copied
        in this section are copied from /site/ in the package -->
    <files folder="site">
        <filename>index.html</filename>
        <filename>helloworld.php</filename>
        <filename>controller.php</filename>
        <folder>views</folder>
    </files>
 
    <administration>
        <!-- Administration Menu Section -->
        <menu>Hello World!</menu>
        <!-- Administration Main File Copy Section -->
        <!-- Note the folder attribute: This attribute describes the folder
            to copy FROM in the package to install therefore files copied
            in this section are copied from /admin/ in the package -->
        <files folder="admin">
            <!-- Admin Main File Copy Section -->
            <filename>index.html</filename>
            <filename>helloworld.php</filename>
            <!-- SQL files section -->
            <folder>sql</folder>
        </files>
    </administration>
 
</extension>
最后打包安装,如同前面所说。

转载于:https://www.cnblogs.com/codergma/p/4769669.html

<script setup> // import { h } from 'snabbdom' import { onBeforeUnmount, ref, shallowRef } from 'vue' // import { IButtonMenu } from '@wangeditor/core' import { Boot } from '@wangeditor/editor' import { Editor, Toolbar } from '@wangeditor/editor-for-vue' // 测试:第三方插件 // import withCtrlEnter from '@wangeditor/plugin-ctrl-enter' // Boot.registerPlugin(withCtrlEnter) // // 测试:多语言 // i18nChangeLanguage('en') // // 测试:注册 renderElem // function renderElemFn(elem, children) { // const vnode = h('div', {}, children) // type: 'paragraph' 节点,即渲染为 <p> 标签 // return vnode // } // const renderElemConf = { // type: 'paragraph', // 节点 type ,重要!!! // renderElem: renderElemFn, // } // Boot.registerRenderElem(renderElemConf) // // 测试:注册插件 // function withCtrlEnter(editor) { // const { insertBreak } = editor // setTimeout(() => { // // beforeInput 事件不能识别 ctrl+enter ,所以自己绑定 DOM 事件 // const { $textArea } = DomEditor.getTextarea(newEditor) // $textArea.on('keydown', e => { // const isCtrl = e.ctrlKey || e.metaKey // if (e.keyCode === 13 && isCtrl) { // // ctrl+enter 触发换行 // editor.insertBreak() // } // }) // }) // const newEditor = editor // newEditor.insertBreak = () => { // const e = window.event // const isCtrl = e.ctrlKey || e.metaKey // // 只有 ctrl 才能换行 // if (isCtrl) { // insertBreak() // } // } // return newEditor // } // Boot.registerPlugin(withCtrlEnter) // 测试:注册 button menu // class MyButtonMenu { // constructor() { // // this.title = '', // this.tag = 'button' // } // getValue() { return '' } // isActive() { return false } // isDisabled() { return false } // exec(editor) { // console.log(editor) // // alert('menu1 exec') // } // } // const menuConf = { // key: 'my-menu-1', // menu key ,唯一。注册之后,需通过 toolbarKeys 配置到工具栏 // factory() { // return new MyButtonMenu() // }, // } // // 检查菜单是否已注册,避免重复注册 // if (!Boot.getMenuConfig('my-menu-1')) { // Boot.registerMenu(menuConf); // console.log('菜单注册成功'); // } else { // console.log('菜单已存在,跳过注册'); // } // console.log(1111111111) // 移到组件最外层,确保模块加载时只执行一次 class MyButtonMenu { constructor() { this.title = ''; // 必须有标题,否则按钮不显示 this.tag = 'button'; } getValue() { return ''; } isActive() { return false; } isDisabled() { return false; } exec(editor) { // console.log('自定义菜单点击', editor); // editor.insertText('这是自定义菜单插入的内容'); // 示例功能 } } const menuConf = { key: 'my-menu-1', factory() { return new MyButtonMenu(); }, }; // 核心:用try-catch捕获重复注册错误 try { Boot.registerMenu(menuConf); console.log('菜单注册成功'); } catch (err) { if (err.message.includes('Duplicated key')) { console.log('菜单已注册,跳过重复注册'); } else { console.error('菜单注册失败:', err); } } // 编辑器实例,必须用 shallowRef ,重要! const editorRef = shallowRef() // 内容 HTML const valueHtml = ref('<p>hello world</p>') // 编辑器配置 const editorConfig = { placeholder: '请输入内容...', MENU_CONF: { insertImage: { checkImage(src) { console.log('image src', src) if (src.indexOf("http") !== 0) { return "图片网址必须以 http/https 开头"; } return true; }, }, } } // 工具栏配置 const toolbarConfig = { // toolbarKeys: ['headerSelect', 'bold', 'my-menu-1'], // excludeKeys: [], insertKeys: { index: 0, keys: 'my-menu-1' } } // 编辑器回调函数 const handleCreated = (editor) => { console.log("created", editor); editorRef.value = editor // 记录 editor 实例,重要! // window.editor = editor // 临时测试使用,用完删除 } const handleChange = (editor) => { console.log("change:", editor.children); } const handleDestroyed = (editor) => { console.log('destroyed', editor) } const handleFocus = (editor) => { console.log('focus', editor) } const handleBlur = (editor) => { console.log('blur', editor) } const customAlert = (info, type) => { alert(`【自定义提示】${type} - ${info}`) } const customPaste = (editor, event, callback) => { console.log('ClipboardEvent 粘贴事件对象', event) // 自定义插入内容 editor.insertText('xxx') // 返回值(注意,vue 事件的返回值,不能用 return) callback(false) // 返回 false ,阻止默认粘贴行为 // callback(true) // 返回 true ,继续默认的粘贴行为 } // 及时销毁编辑器 onBeforeUnmount(() => { const editor = editorRef.value if (editor == null) return // 销毁,并移除 editor editor.destroy() }) const getHtml = () => { const editor = editorRef.value if (editor == null) return console.log(editor.getHtml()) } </script> <template> <!-- <div>--> <!-- <button @click="getHtml">获取 html</button>--> <!-- </div>--> <!-- <div style="border: 1px solid #ccc">--> <!-- <!– 工具栏 –>--> <!-- <Toolbar--> <!-- :editor="editorRef"--> <!-- :defaultConfig="toolbarConfig"--> <!-- style="border-bottom: 1px solid #ccc"--> <!-- />--> <!-- <!– 编辑器 –>--> <!-- <Editor--> <!-- v-model="valueHtml"--> <!-- :defaultConfig="editorConfig"--> <!-- @onChange="handleChange"--> <!-- @onCreated="handleCreated"--> <!-- @onDestroyed="handleDestroyed"--> <!-- @onFocus="handleFocus"--> <!-- @onBlur="handleBlur"--> <!-- @customAlert="customAlert"--> <!-- @customPaste="customPaste"--> <!-- style="height: 500px"--> <!-- />--> <!-- </div>--> <div class="editor-container"> <!-- 添加容器类名 --> <!-- 工具栏 --> <Toolbar :editor="editorRef" :defaultConfig="toolbarConfig" style="border-bottom: 1px solid #e5e7eb" /> <!-- 编辑器 --> <Editor v-model="valueHtml" :defaultConfig="editorConfig" @onChange="handleChange" @onCreated="handleCreated" @onDestroyed="handleDestroyed" @onFocus="handleFocus" @onBlur="handleBlur" @customAlert="customAlert" @customPaste="customPaste" /> </div> </template> <style src="@wangeditor/editor/dist/css/style.css"> /* 编辑器整体容器 */ .editor-container { border: 1px solid #e5e7eb; /* 浅灰色边框 */ border-radius: 8px; /* 圆角 */ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); /* 轻微阴影 */ overflow: hidden; /* 防止内部元素溢出 */ transition: box-shadow 0.2s ease; /* 阴影过渡效果 */ } .editor-container:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* hover时增强阴影 */ } /* 工具栏样式 */ .w-e-toolbar { background-color: #f9fafb !important; /* 工具栏背景色 */ border-bottom: 1px solid #e5e7eb !important; /* 底部边框 */ padding: 8px 12px !important; /* 内边距 */ } /* 工具栏按钮通用样式 */ .w-e-toolbar .w-e-menu { margin: 0 3px !important; /* 按钮间距 */ border-radius: 4px !important; /* 按钮圆角 */ transition: all 0.2s ease !important; /* 过渡效果 */ } .w-e-toolbar .w-e-menu:hover { background-color: #eef2f5 !important; /* 悬停背景色 */ transform: translateY(-1px) !important; /* 轻微上浮效果 */ } /* 自定义菜单按钮样式(my-menu-1) */ .w-e-toolbar [data-key="my-menu-1"] { background-color: #4f46e5 !important; /* 紫色背景(突出自定义按钮) */ color: white !important; /* 白色文字 */ border: none !important; } .w-e-toolbar [data-key="my-menu-1"]:hover { background-color: #4338ca !important; /* 深色hover效果 */ } /* 编辑区域样式 */ .w-e-text-container { height: 500px !important; /* 固定高度 */ padding: 16px !important; /* 内边距 */ background-color: white !important; /* 白色背景 */ } /* 编辑区域内容样式 */ .w-e-text-container p { margin: 0 0 12px 0 !important; /* 段落间距 */ line-height: 1.8 !important; /* 行高(提升可读性) */ font-size: 14px !important; /* 基础字体大小 */ color: #1f2937 !important; /* 文字颜色 */ } /* 编辑区域聚焦样式 */ .w-e-text-container:focus-within { outline: 2px solid rgba(79, 70, 229, 0.2) !important; /* 聚焦时边框高亮 */ } /* 工具栏分割线样式 */ .w-e-toolbar .w-e-separator { background-color: #e5e7eb !important; /* 分割线颜色 */ margin: 0 6px !important; /* 分割线间距 */ } /* 响应式调整(小屏幕适配) */ @media (max-width: 768px) { .editor-container { border-radius: 4px; /* 小屏幕减小圆角 */ } .w-e-toolbar { padding: 4px 8px !important; /* 小屏幕减小内边距 */ } .w-e-text-container { height: 400px !important; /* 小屏幕减小编辑区高度 */ padding: 12px !important; } } </style>改一改让工具栏悬浮在上面,不会随着页面移动,不论页面滚轮怎么移动都保持在页面上方,右侧添加滚轮使页面可以移动,工具栏上面再搞一个头部,最左边是返回键,中间是AI笔记的标题,最右边是一个头像,点击头像会跳转到个人用户管理界面,头像左边有一个历史记录按钮,点击后会显示一个侧边栏,里面有AI笔记历史,历史记录先留一个按钮就行,头像也先留一个位置就行
07-26
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值