| 12 |
- import"./index-DF0Gm8tW.js";/* empty css *//* empty css *//* empty css *//* empty css *//* empty css */import{_ as e}from"./index.vue_vue_type_style_index_0_lang-jXC9PrcU.js";/* empty css */import{k as l,r as n,P as t,D as a,x as o,G as u,R as s,a8 as d,W as r,bi as i,aN as p,aL as c,bE as m,bF as h,a5 as _,bj as v,bk as f,E as b}from"./vendor-CgKklJ4r.js";import{_ as g}from"./_plugin-vue_export-helper-BCo6x5W8.js";import"./emojo-Ben6gd8J.js";const k={class:"page-content"},w={class:"card-header"},x={class:"header-buttons"},y={class:"card-header"},V={class:"header-buttons"},L=["innerHTML"],j=["innerHTML"],H={class:"toolbar-explanation"},E=g(l({__name:"index",setup(l){const g=n(),E=n(),C=n("preview"),T=n("preview"),z=n(["basic"]),M=["bold","italic","underline","|","bulletedList","numberedList","|","insertLink","insertImage","|","undo","redo"],R=n('<h1>🎨 完整工具栏编辑器示例</h1>\n<p>这个编辑器包含所有功能，您可以体验丰富的格式编辑功能。</p>\n\n<h2>✨ 文本样式</h2>\n<p><strong>这是加粗的文字</strong></p>\n<p><em>这是斜体文字</em></p>\n<p><u>这是下划线文字</u></p>\n<p><span style="color: rgb(194, 79, 74);">这是彩色文字</span></p>\n\n<h2>📝 列表和待办</h2>\n<ul>\n <li>无序列表项 1</li>\n <li>无序列表项 2</li>\n</ul>\n\n<ol>\n <li>有序列表项 1</li>\n <li>有序列表项 2</li>\n</ol>\n\n<ul class="w-e-todo">\n <li class="w-e-todo-item"><input type="checkbox" checked="true" readonly="true" disabled="disabled"><span>已完成的任务</span></li>\n <li class="w-e-todo-item"><input type="checkbox" readonly="true" disabled="disabled"><span>待完成的任务</span></li>\n</ul>\n\n<h2>💬 引用和表格</h2>\n<blockquote>\n 这是一段引用文字，展示引用格式的效果。\n</blockquote>\n\n<table style="border-collapse: collapse; width: 100%;" border="1">\n <thead>\n <tr><th>功能</th><th>描述</th></tr>\n </thead>\n <tbody>\n <tr><td>完整工具栏</td><td>包含所有编辑功能</td></tr>\n <tr><td>自定义配置</td><td>支持灵活的工具栏配置</td></tr>\n </tbody>\n</table>\n\n<h2>💻 代码块</h2>\n<pre><code class="language-javascript">// 完整编辑器支持代码高亮\nfunction createEditor() {\n return new WangEditor({\n container: \'#editor\',\n toolbar: \'full\' // 完整工具栏\n });\n}</code></pre>\n\n<p>🔗 <a href="https://www.wangeditor.com/" target="_blank">访问官网了解更多</a></p>'),U=n('<h1>✨ 简化工具栏编辑器示例</h1>\n<p>这个编辑器只包含基础的编辑功能，界面更加简洁。</p>\n\n<h2>基础文本格式</h2>\n<p><strong>加粗文字</strong></p>\n<p><em>斜体文字</em></p>\n<p><u>下划线文字</u></p>\n\n<h2>列表功能</h2>\n<ul>\n <li>无序列表项 1</li>\n <li>无序列表项 2</li>\n</ul>\n\n<ol>\n <li>有序列表项 1</li>\n <li>有序列表项 2</li>\n</ol>\n\n<h2>链接和图片</h2>\n<p>支持插入 <a href="https://www.wangeditor.com/" target="_blank">链接</a> 和图片。</p>\n\n<p>简化版编辑器专注于基础功能，适合简单的内容编辑需求。</p>'),W=()=>{var e;null==(e=g.value)||e.clear(),b.success("完整编辑器已清空")},F=()=>{var e;null==(e=g.value)||e.getHtml();b.success("完整编辑器内容已输出到控制台")},A=()=>{var e;null==(e=g.value)||e.setHtml('<h2>🎉 完整编辑器演示内容</h2>\n<p>这是通过方法设置的演示内容，展示完整编辑器的强大功能。</p>\n<ul>\n <li>支持丰富的文本格式</li>\n <li>包含表格、代码块等高级功能</li>\n <li>提供完整的编辑体验</li>\n</ul>\n<table style="border-collapse: collapse; width: 100%;" border="1">\n <tr><th>特性</th><th>状态</th></tr>\n <tr><td>完整工具栏</td><td>✅ 已启用</td></tr>\n <tr><td>高级功能</td><td>✅ 已启用</td></tr>\n</table>'),b.success("已设置完整编辑器演示内容")},q=()=>{var e;null==(e=E.value)||e.clear(),b.success("简化编辑器已清空")},G=()=>{var e;null==(e=E.value)||e.getHtml();b.success("简化编辑器内容已输出到控制台")},I=()=>{var e;null==(e=E.value)||e.setHtml('<h2>⚡ 简化编辑器演示内容</h2>\n<p>这是通过方法设置的演示内容，展示简化编辑器的核心功能。</p>\n<ul>\n <li><strong>基础格式</strong>：加粗、斜体、下划线</li>\n <li><em>列表支持</em>：有序和无序列表</li>\n <li><u>媒体插入</u>：链接和图片</li>\n</ul>\n<ol>\n <li>界面简洁清爽</li>\n <li>功能专注实用</li>\n <li>适合快速编辑</li>\n</ol>\n<p>🔗 <a href="https://example.com" target="_blank">这是一个链接示例</a></p>'),b.success("已设置简化编辑器演示内容")};return(l,n)=>{const b=d,N=e,S=i,D=i,O=h,P=_,Y=m,B=c,J=p,K=f,Q=v;return a(),t("div",k,[o(S,{class:"editor-card",shadow:"never"},{header:u((()=>[s("div",w,[n[10]||(n[10]=s("span",null,"🛠️ 完整工具栏编辑器",-1)),s("div",x,[o(b,{size:"small",onClick:W},{default:u((()=>n[7]||(n[7]=[r("清空")]))),_:1,__:[7]}),o(b,{size:"small",onClick:F},{default:u((()=>n[8]||(n[8]=[r("获取内容")]))),_:1,__:[8]}),o(b,{size:"small",onClick:A},{default:u((()=>n[9]||(n[9]=[r("设置示例")]))),_:1,__:[9]})])])])),default:u((()=>[o(N,{ref_key:"fullEditorRef",ref:g,modelValue:R.value,"onUpdate:modelValue":n[0]||(n[0]=e=>R.value=e),height:"400px",placeholder:"请输入内容，体验完整的编辑功能...","exclude-keys":[]},null,8,["modelValue"])])),_:1}),o(D,{class:"editor-card",shadow:"never"},{header:u((()=>[s("div",y,[n[14]||(n[14]=s("span",null,"✨ 简化工具栏编辑器",-1)),s("div",V,[o(b,{size:"small",onClick:q},{default:u((()=>n[11]||(n[11]=[r("清空")]))),_:1,__:[11]}),o(b,{size:"small",onClick:G},{default:u((()=>n[12]||(n[12]=[r("获取内容")]))),_:1,__:[12]}),o(b,{size:"small",onClick:I},{default:u((()=>n[13]||(n[13]=[r("设置示例")]))),_:1,__:[13]})])])])),default:u((()=>[o(N,{ref_key:"simpleEditorRef",ref:E,modelValue:U.value,"onUpdate:modelValue":n[1]||(n[1]=e=>U.value=e),height:"400px",placeholder:"请输入内容，体验简化的编辑功能...","toolbar-keys":M},null,8,["modelValue"])])),_:1}),o(D,{class:"preview-card",shadow:"never"},{header:u((()=>n[15]||(n[15]=[s("span",null,"📖 内容预览对比",-1)]))),default:u((()=>[o(J,{gutter:20},{default:u((()=>[o(B,{span:12},{default:u((()=>[n[16]||(n[16]=s("h3",null,"完整编辑器内容",-1)),o(Y,{modelValue:C.value,"onUpdate:modelValue":n[3]||(n[3]=e=>C.value=e)},{default:u((()=>[o(O,{label:"渲染效果",name:"preview"},{default:u((()=>[s("div",{class:"content-preview",innerHTML:R.value},null,8,L)])),_:1}),o(O,{label:"HTML源码",name:"html"},{default:u((()=>[o(P,{modelValue:R.value,"onUpdate:modelValue":n[2]||(n[2]=e=>R.value=e),type:"textarea",rows:8,placeholder:"HTML源码",readonly:""},null,8,["modelValue"])])),_:1})])),_:1},8,["modelValue"])])),_:1,__:[16]}),o(B,{span:12},{default:u((()=>[n[17]||(n[17]=s("h3",null,"简化编辑器内容",-1)),o(Y,{modelValue:T.value,"onUpdate:modelValue":n[5]||(n[5]=e=>T.value=e)},{default:u((()=>[o(O,{label:"渲染效果",name:"preview"},{default:u((()=>[s("div",{class:"content-preview",innerHTML:U.value},null,8,j)])),_:1}),o(O,{label:"HTML源码",name:"html"},{default:u((()=>[o(P,{modelValue:U.value,"onUpdate:modelValue":n[4]||(n[4]=e=>U.value=e),type:"textarea",rows:8,placeholder:"HTML源码",readonly:""},null,8,["modelValue"])])),_:1})])),_:1},8,["modelValue"])])),_:1,__:[17]})])),_:1})])),_:1}),o(D,{class:"usage-card",shadow:"never"},{header:u((()=>n[18]||(n[18]=[s("span",null,"📚 使用说明",-1)]))),default:u((()=>[o(Q,{modelValue:z.value,"onUpdate:modelValue":n[6]||(n[6]=e=>z.value=e)},{default:u((()=>[o(K,{title:"基础用法",name:"basic"},{default:u((()=>n[19]||(n[19]=[s("pre",null,[s("code",{class:"language-vue"},"<template>\n <ArtWangEditor v-model=\"content\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { ref } from 'vue'\n\nconst content = ref('<p>初始内容</p>')\n<\/script>")],-1)]))),_:1,__:[19]}),o(K,{title:"完整工具栏配置",name:"full"},{default:u((()=>n[20]||(n[20]=[s("pre",null,[s("code",{class:"language-vue"},'<template>\n \x3c!-- 显示所有工具，不排除任何功能 --\x3e\n <ArtWangEditor\n v-model="content"\n :exclude-keys="[]"\n />\n</template>')],-1)]))),_:1,__:[20]}),o(K,{title:"简化工具栏配置",name:"simple"},{default:u((()=>n[21]||(n[21]=[s("pre",null,[s("code",{class:"language-vue"},"<template>\n \x3c!-- 只显示基础编辑工具 --\x3e\n <ArtWangEditor\n v-model=\"content\"\n :toolbar-keys=\"[\n 'bold', 'italic', 'underline', '|',\n 'bulletedList', 'numberedList', '|',\n 'insertLink', 'insertImage', '|',\n 'undo', 'redo'\n ]\"\n />\n</template>")],-1)]))),_:1,__:[21]}),o(K,{title:"自定义配置",name:"config"},{default:u((()=>n[22]||(n[22]=[s("pre",null,[s("code",{class:"language-vue"},'<template>\n <ArtWangEditor\n v-model="content"\n height="600px"\n placeholder="请输入您的内容..."\n :exclude-keys="[\'fontFamily\', \'fontSize\']"\n :upload-config="{\n maxFileSize: 5 * 1024 * 1024,\n maxNumberOfFiles: 5\n }"\n />\n</template>')],-1)]))),_:1,__:[22]}),o(K,{title:"组件方法调用",name:"methods"},{default:u((()=>n[23]||(n[23]=[s("pre",null,[s("code",{class:"language-vue"},'<template>\n <ArtWangEditor ref="editorRef" v-model="content" />\n <el-button @click="handleClear">清空</el-button>\n <el-button @click="handleFocus">聚焦</el-button>\n <el-button @click="handleGetContent">获取内容</el-button>\n</template>\n\n<script setup lang="ts">\nimport { ref } from \'vue\'\n\nconst editorRef = ref()\nconst content = ref(\'\')\n\nconst handleClear = () => {\n editorRef.value?.clear()\n}\n\nconst handleFocus = () => {\n editorRef.value?.focus()\n}\n\nconst handleGetContent = () => {\n const html = editorRef.value?.getHtml()\n console.log(\'编辑器内容:\', html)\n}\n<\/script>')],-1)]))),_:1,__:[23]}),o(K,{title:"工具栏配置说明",name:"toolbar-config"},{default:u((()=>[s("div",H,[n[26]||(n[26]=s("h4",null,"完整工具栏 vs 简化工具栏",-1)),o(J,{gutter:16},{default:u((()=>[o(B,{span:12},{default:u((()=>n[24]||(n[24]=[s("h5",null,"✅ 完整工具栏包含：",-1),s("ul",null,[s("li",null,"文本格式：加粗、斜体、下划线、字体颜色、背景色"),s("li",null,"段落格式：标题、引用、对齐方式、缩进"),s("li",null,"列表：有序列表、无序列表、待办事项"),s("li",null,"插入：链接、图片、表格、分割线、表情"),s("li",null,"代码：代码块、行内代码"),s("li",null,"操作：撤销、重做、全屏、清除格式")],-1)]))),_:1,__:[24]}),o(B,{span:12},{default:u((()=>n[25]||(n[25]=[s("h5",null,"⚡ 简化工具栏包含：",-1),s("ul",null,[s("li",null,"基础格式：加粗、斜体、下划线"),s("li",null,"列表：有序列表、无序列表"),s("li",null,"插入：链接、图片"),s("li",null,"操作：撤销、重做")],-1),s("p",{class:"note"},"适用于简单的文本编辑场景，界面更清爽。",-1)]))),_:1,__:[25]})])),_:1})])])),_:1})])),_:1},8,["modelValue"])])),_:1})])}}}),[["__scopeId","data-v-92b79298"]]);export{E as default};
|
