vue-element-plus-admin-doc/assets/components_editor.md.0bfb7e56.js

import{o as t,c as a,a as n}from"./app.c38d1953.js";const s='{"title":"Editor 富文本组件","description":"","frontmatter":{},"headers":[{"level":2,"title":"用法","slug":"用法"},{"level":2,"title":"Editor 属性","slug":"editor-属性"},{"level":2,"title":"Editor 事件","slug":"editor-事件"},{"level":2,"title":"Editor 方法","slug":"editor-方法"}],"relativePath":"components/editor.md","lastUpdated":1721206001124}',e={},o=n('<h1 id="editor-富文本组件"><a class="header-anchor" href="#editor-富文本组件" aria-hidden="true">#</a> Editor 富文本组件</h1><p>基于 <a href="https://www.wangeditor.com/" target="_blank" rel="noopener noreferrer">wangeditor</a> 封装。</p><p>目前项目中的 <code>editor</code> 只是做了简单的封装，需要开发者根据实际情况，自行配置 <code>editorConfig</code> 属性，如，上传图片功能。</p><p>可自行阅读 <a href="https://www.wangeditor.com/v5/" target="_blank" rel="noopener noreferrer">wangeditor文档</a></p><p>Editor 组件位于 <a href="https://github.com/kailong321200875/vue-element-plus-admin/tree/master/src/components/Editor" target="_blank" rel="noopener noreferrer">src/components/Editor</a> 内</p><h2 id="用法"><a class="header-anchor" href="#用法" aria-hidden="true">#</a> 用法</h2><div class="language-vue"><pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">setup</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ts<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">\n<span class="token keyword">import</span> <span class="token punctuation">{</span> Editor <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;@/components/Editor&#39;</span>\n<span class="token keyword">import</span> <span class="token punctuation">{</span> ref<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue&#39;</span>\n\n<span class="token keyword">const</span> defaultHtml <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token string">&#39;&lt;p&gt;hello &lt;strong&gt;world&lt;/strong&gt;&lt;/p&gt;&#39;</span><span class="token punctuation">)</span>\n\n<span class="token keyword">const</span> <span class="token function-variable function">change</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">html<span class="token operator">:</span> string</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>\n  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>html<span class="token punctuation">)</span>\n<span class="token punctuation">}</span>\n</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>\n\n<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Editor</span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>defaultHtml<span class="token punctuation">&quot;</span></span> <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>editorRef<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@change</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>change<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>\n<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>\n\n</code></pre></div><h2 id="editor-属性"><a class="header-anchor" href="#editor-属性" aria-hidden="true">#</a> Editor 属性</h2><table><thead><tr><th>属性</th><th>说明</th><th>类型</th><th>可选值</th><th>默认值</th></tr></thead><tbody><tr><td>editorId</td><td>富文本组件唯一值，必填项</td><td><code>string</code></td><td>-</td><td>wangeEditor-1</td></tr><tr><td>height</td><td>高度</td><td><code>string</code>/<code>number</code></td><td>-</td><td>500px</td></tr><tr><td>editorConfig</td><td>wangeditor 组件的所有配置项</td><td><code>IEditorConfig</code></td><td>-</td><td>-</td></tr><tr><td>modelValue</td><td>内容双向绑定，支持v-model</td><td><code>string</code></td><td>-</td><td>-</td></tr></tbody></table><h2 id="editor-事件"><a class="header-anchor" href="#editor-事件" aria-hidden="true">#</a> Editor 事件</h2><table><thead><tr><th>方法名</th><th>说明</th><th>回调参数</th></tr></thead><tbody><tr><td>change</td><td>内容改变时，返回 editor 实例</td><td>editor: IDomEditor</td></tr></tbody></table><h2 id="editor-方法"><a class="header-anchor" href="#editor-方法" aria-hidden="true">#</a> Editor 方法</h2><table><thead><tr><th>方法名</th><th>说明</th><th>回调参数</th></tr></thead><tbody><tr><td>getEditorRef</td><td>获取 editor 实例</td><td><code>() =&gt; Promise&lt;IDomEditor&gt;</code></td></tr></tbody></table>',13);e.render=function(n,s,e,p,r,d){return t(),a("div",null,[o])};export default e;export{s as __pageData};