UNPKG

@shixinde/vuepress-theme-init

Version:

### 其他开源项目

shixindea.github.io/guoguo-notes/

shixindea/guoguo-notes

230 lines • 64.6 kB

JavaScript

import{_ as n,c as s,o as a,a as p}from"./app-Dx9bNbfq.js";const t={},e=p(`<blockquote><p>使用</p></blockquote><div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Editor</span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>300px<span class="token punctuation">"</span></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">"</span>formData.content<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span></span> <span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><blockquote><p>富文本组件</p></blockquote><div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token comment"></span></span> <span class="line"></span> <span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ts<span class="token punctuation">"</span></span> <span class="token attr-name">setup</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"></span> <span class="line"> <span class="token keyword">import</span> <span class="token punctuation">{</span> PropType <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vue'</span><span class="token punctuation">;</span></span> <span class="line"> <span class="token keyword">import</span> <span class="token punctuation">{</span> Editor<span class="token punctuation">,</span> Toolbar <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@wangeditor/editor-for-vue'</span><span class="token punctuation">;</span></span> <span class="line"> <span class="token keyword">import</span> <span class="token punctuation">{</span></span> <span class="line"> i18nChangeLanguage<span class="token punctuation">,</span></span> <span class="line"> IDomEditor<span class="token punctuation">,</span></span> <span class="line"> IEditorConfig<span class="token punctuation">,</span></span> <span class="line"> <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@wangeditor/editor'</span><span class="token punctuation">;</span></span> <span class="line"> <span class="token keyword">import</span> <span class="token punctuation">{</span> propTypes <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@/utils/propTypes'</span><span class="token punctuation">;</span></span> <span class="line"> <span class="token keyword">import</span> <span class="token punctuation">{</span> isNumber <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@/utils/is'</span><span class="token punctuation">;</span></span> <span class="line"> <span class="token keyword">import</span> <span class="token punctuation">{</span> ElMessage <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'element-plus'</span><span class="token punctuation">;</span></span> <span class="line"> <span class="token keyword">import</span> <span class="token punctuation">{</span> useLocaleStore <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@/store/modules/locale'</span><span class="token punctuation">;</span></span> <span class="line"> <span class="token keyword">import</span> <span class="token punctuation">{</span> getRefreshToken<span class="token punctuation">,</span> getTenantId <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@/utils/auth'</span><span class="token punctuation">;</span></span> <span class="line"> <span class="token keyword">import</span> <span class="token punctuation">{</span> getUploadUrl <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@/components/UploadFile/src/useUpload'</span><span class="token punctuation">;</span></span> <span class="line"></span> <span class="line"> <span class="token function">defineOptions</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'Editor'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span> <span class="line"></span> <span class="line"> type <span class="token function-variable function">InsertFnType</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token literal-property property">url</span><span class="token operator">:</span> string<span class="token punctuation">,</span> <span class="token literal-property property">alt</span><span class="token operator">:</span> string<span class="token punctuation">,</span> <span class="token literal-property property">href</span><span class="token operator">:</span> string</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">void</span><span class="token punctuation">;</span></span> <span class="line"></span> <span class="line"> <span class="token keyword">const</span> localeStore <span class="token operator">=</span> <span class="token function">useLocaleStore</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span> <span class="line"></span> <span class="line"> <span class="token keyword">const</span> currentLocale <span class="token operator">=</span> <span class="token function">computed</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> localeStore<span class="token punctuation">.</span>getCurrentLocale<span class="token punctuation">)</span><span class="token punctuation">;</span></span> <span class="line"></span> <span class="line"> <span class="token function">i18nChangeLanguage</span><span class="token punctuation">(</span><span class="token function">unref</span><span class="token punctuation">(</span>currentLocale<span class="token punctuation">)</span><span class="token punctuation">.</span>lang<span class="token punctuation">)</span><span class="token punctuation">;</span></span> <span class="line"></span> <span class="line"> <span class="token keyword">const</span> props <span class="token operator">=</span> <span class="token function">defineProps</span><span class="token punctuation">(</span><span class="token punctuation">{</span></span> <span class="line"> <span class="token literal-property property">editorId</span><span class="token operator">:</span> propTypes<span class="token punctuation">.</span>string<span class="token punctuation">.</span><span class="token function">def</span><span class="token punctuation">(</span><span class="token string">'wangeEditor-1'</span><span class="token punctuation">)</span><span class="token punctuation">,</span></span> <span class="line"> <span class="token literal-property property">height</span><span class="token operator">:</span> propTypes<span class="token punctuation">.</span><span class="token function">oneOfType</span><span class="token punctuation">(</span><span class="token punctuation">[</span>Number<span class="token punctuation">,</span> String<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">def</span><span class="token punctuation">(</span><span class="token string">'500px'</span><span class="token punctuation">)</span><span class="token punctuation">,</span></span> <span class="line"> <span class="token literal-property property">editorConfig</span><span class="token operator">:</span> <span class="token punctuation">{</span></span> <span class="line"> <span class="token literal-property property">type</span><span class="token operator">:</span> Object <span class="token keyword">as</span> PropType<span class="token operator"><</span>Partial<span class="token operator"><</span>IEditorConfig<span class="token operator">>></span><span class="token punctuation">,</span></span> <span class="line"> <span class="token function-variable function">default</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">undefined</span><span class="token punctuation">,</span></span> <span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span> <span class="line"> <span class="token literal-property property">readonly</span><span class="token operator">:</span> propTypes<span class="token punctuation">.</span>bool<span class="token punctuation">.</span><span class="token function">def</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">,</span></span> <span class="line"> <span class="token literal-property property">modelValue</span><span class="token operator">:</span> propTypes<span class="token punctuation">.</span>string<span class="token punctuation">.</span><span class="token function">def</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">)</span><span class="token punctuation">,</span></span> <span class="line"> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span> <span class="line"></span> <span class="line"> <span class="token keyword">const</span> emit <span class="token operator">=</span> <span class="token function">defineEmits</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'change'</span><span class="token punctuation">,</span> <span class="token string">'update:modelValue'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span> <span class="line"></span> <span class="line"> <span class="token comment">// 编辑器实例，必须用 shallowRef</span></span> <span class="line"> <span class="token keyword">const</span> editorRef <span class="token operator">=</span> shallowRef<span class="token operator"><</span>IDomEditor<span class="token operator">></span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span> <span class="line"></span> <span class="line"> <span class="token keyword">const</span> valueHtml <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span> <span class="line"></span> <span class="line"> <span class="token function">watch</span><span class="token punctuation">(</span></span> <span class="line"> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> props<span class="token punctuation">.</span>modelValue<span class="token punctuation">,</span></span> <span class="line"> <span class="token punctuation">(</span><span class="token parameter"><span class="token literal-property property">val</span><span class="token operator">:</span> string</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span></span> <span class="line"> <span class="token keyword">if</span> <span class="token punctuation">(</span>val <span class="token operator">===</span> <span class="token function">unref</span><span class="token punctuation">(</span>valueHtml<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token keyword">return</span><span class="token punctuation">;</span></span> <span class="line"> valueHtml<span class="token punctuation">.</span>value <span class="token operator">=</span> val<span class="token punctuation">;</span></span> <span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span> <span class="line"> <span class="token punctuation">{</span></span> <span class="line"> <span class="token literal-property property">immediate</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span></span> <span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span> <span class="line"> <span class="token punctuation">)</span><span class="token punctuation">;</span></span> <span class="line"></span> <span class="line"> <span class="token comment">// 监听</span></span> <span class="line"> <span class="token function">watch</span><span class="token punctuation">(</span></span> <span class="line"> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> valueHtml<span class="token punctuation">.</span>value<span class="token punctuation">,</span></span> <span class="line"> <span class="token punctuation">(</span><span class="token parameter"><span class="token literal-property property">val</span><span class="token operator">:</span> string</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span></span> <span class="line"> <span class="token function">emit</span><span class="token punctuation">(</span><span class="token string">'update:modelValue'</span><span class="token punctuation">,</span> val<span class="token punctuation">)</span><span class="token punctuation">;</span></span> <span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span> <span class="line"> <span class="token punctuation">)</span><span class="token punctuation">;</span></span> <span class="line"></span> <span class="line"> <span class="token keyword">const</span> <span class="token function-variable function">handleCreated</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token literal-property property">editor</span><span class="token operator">:</span> IDomEditor</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span></span> <span class="line"> editorRef<span class="token punctuation">.</span>value <span class="token operator">=</span> editor<span class="token punctuation">;</span></span> <span class="line"> <span class="token punctuation">}</span><span class="token punctuation">;</span></span> <span class="line"></span> <span class="line"> <span class="token comment">// 编辑器配置</span></span> <span class="line"> <span class="token keyword">const</span> editorConfig <span class="token operator">=</span> <span class="token function">computed</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token parameter">IEditorConfig</span> <span class="token operator">=></span> <span class="token punctuation">{</span></span> <span class="line"> <span class="token keyword">return</span> Object<span class="token punctuation">.</span><span class="token function">assign</span><span class="token punctuation">(</span></span> <span class="line"> <span class="token punctuation">{</span></span> <span class="line"> <span class="token literal-property property">placeholder</span><span class="token operator">:</span> <span class="token string">'请输入内容...'</span><span class="token punctuation">,</span></span> <span class="line"> <span class="token literal-property property">readOnly</span><span class="token operator">:</span> props<span class="token punctuation">.</span>readonly<span class="token punctuation">,</span></span> <span class="line"> <span class="token function-variable function">customAlert</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token literal-property property">s</span><span class="token operator">:</span> string<span class="token punctuation">,</span> <span class="token literal-property property">t</span><span class="token operator">:</span> string</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span></span> <span class="line"> <span class="token keyword">switch</span> <span class="token punctuation">(</span>t<span class="token punctuation">)</span> <span class="token punctuation">{</span></span> <span class="line"> <span class="token keyword">case</span> <span class="token string">'success'</span><span class="token operator">:</span></span> <span class="line"> ElMessage<span class="token punctuation">.</span><span class="token function">success</span><span class="token punctuation">(</span>s<span class="token punctuation">)</span><span class="token punctuation">;</span></span> <span class="line"> <span class="token keyword">break</span><span class="token punctuation">;</span></span> <span class="line"> <span class="token keyword">case</span> <span class="token string">'info'</span><span class="token operator">:</span></span> <span class="line"> ElMessage<span class="token punctuation">.</span><span class="token function">info</span><span class="token punctuation">(</span>s<span class="token punctuation">)</span><span class="token punctuation">;</span></span> <span class="line"> <span class="token keyword">break</span><span class="token punctuation">;</span></span> <span class="line"> <span class="token keyword">case</span> <span class="token string">'warning'</span><span class="token operator">:</span></span> <span class="line"> ElMessage<span class="token punctuation">.</span><span class="token function">warning</span><span class="token punctuation">(</span>s<span class="token punctuation">)</span><span class="token punctuation">;</span></span> <span class="line"> <span class="token keyword">break</span><span class="token punctuation">;</span></span> <span class="line"> <span class="token keyword">case</span> <span class="token string">'error'</span><span class="token operator">:</span></span> <span class="line"> ElMessage<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span>s<span class="token punctuation">)</span><span class="token punctuation">;</span></span> <span class="line"> <span class="token keyword">break</span><span class="token punctuation">;</span></span> <span class="line"> <span class="token keyword">default</span><span class="token operator">:</span></span> <span class="line"> ElMessage<span class="token punctuation">.</span><span class="token function">info</span><span class="token punctuation">(</span>s<span class="token punctuation">)</span><span class="token punctuation">;</span></span> <span class="line"> <span class="token keyword">break</span><span class="token punctuation">;</span></span> <span class="line"> <span class="token punctuation">}</span></span> <span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span> <span class="line"> <span class="token literal-property property">autoFocus</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span></span> <span class="line"> <span class="token literal-property property">scroll</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span></span> <span class="line"> <span class="token constant">MENU_CONF</span><span class="token operator">:</span> <span class="token punctuation">{</span></span> <span class="line"> <span class="token punctuation">[</span><span class="token string">'uploadImage'</span><span class="token punctuation">]</span><span class="token operator">:</span> <span class="token punctuation">{</span></span> <span class="line"> <span class="token literal-property property">server</span><span class="token operator">:</span> <span class="token function">getUploadUrl</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span></span> <span class="line"> <span class="token comment">// 单个文件的最大体积限制，默认为 2M</span></span> <span class="line"> <span class="token literal-property property">maxFileSize</span><span class="token operator">:</span> <span class="token number">5</span> <span class="token operator">*</span> <span class="token number">1024</span> <span class="token operator">*</span> <span class="token number">1024</span><span class="token punctuation">,</span></span> <span class="line"> <span class="token comment">// 最多可上传几个文件，默认为 100</span></span> <span class="line"> <span class="token literal-property property">maxNumberOfFiles</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span></span> <span class="line"> <span class="token comment">// 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []</span></span> <span class="line"> <span class="token literal-property property">allowedFileTypes</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'image/*'</span><span class="token punctuation">]</span><span class="token punctuation">,</span></span> <span class="line"></span> <span class="line"> <span class="token comment">// 自定义增加 http header</span></span> <span class="line"> <span class="token literal-property property">headers</span><span class="token operator">:</span> <span class="token punctuation">{</span></span> <span class="line"> <span class="token literal-property property">Accept</span><span class="token operator">:</span> <span class="token string">'*'</span><span class="token punctuation">,</span></span> <span class="line"> <span class="token literal-property property">Authorization</span><span class="token operator">:</span> <span class="token string">'Bearer '</span> <span class="token operator">+</span> <span class="token function">getRefreshToken</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token comment">// 使用 getRefreshToken() 方法，而不使用 getAccessToken() 方法的原因：Editor 无法方便的刷新访问令牌</span></span> <span class="line"> <span class="token string-property property">'tenant-id'</span><span class="token operator">:</span> <span class="token function">getTenantId</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span></span> <span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span> <span class="line"></span> <span class="line"> <span class="token comment">// 超时时间，默认为 10 秒</span></span> <span class="line"> <span class="token literal-property property">timeout</span><span class="token operator">:</span> <span class="token number">5</span> <span class="token operator">*</span> <span class="token number">1000</span><span class="token punctuation">,</span> <span class="token comment">// 5 秒</span></span> <span class="line"></span> <span class="line"> <span class="token comment">// form-data fieldName，后端接口参数名称，默认值wangeditor-uploaded-image</span></span> <span class="line"> <span class="token literal-property property">fieldName</span><span class="token operator">:</span> <span class="token string">'file'</span><span class="token punctuation">,</span></span> <span class="line"></span> <span class="line"> <span class="token comment">// 上传之前触发</span></span> <span class="line"> <span class="token function">onBeforeUpload</span><span class="token punctuation">(</span><span class="token parameter"><span class="token literal-property property">file</span><span class="token operator">:</span> File</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span> <span class="line"> <span class="token comment">// console.log(file)</span></span> <span class="line"> <span class="token keyword">return</span> file<span class="token punctuation">;</span></span> <span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span> <span class="line"> <span class="token comment">// 上传进度的回调函数</span></span> <span class="line"> <span class="token function">onProgress</span><span class="token punctuation">(</span><span class="token parameter"><span class="token literal-property property">progress</span><span class="token operator">:</span> number</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span> <span class="line"> <span class="token comment">// progress 是 0-100 的数字</span></span> <span class="line"> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'progress'</span><span class="token punctuation">,</span> progress<span class="token punctuation">)</span><span class="token punctuation">;</span></span> <span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span> <span class="line"> <span class="token function">onSuccess</span><span class="token punctuation">(</span><span class="token parameter"><span class="token literal-property property">file</span><span class="token operator">:</span> File<span class="token punctuation">,</span> <span class="token literal-property property">res</span><span class="token operator">:</span> any</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span> <span class="line"> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'onSuccess'</span><span class="token punctuation">,</span> file<span class="token punctuation">,</span> res<span class="token punctuation">)</span><span class="token punctuation">;</span></span> <span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span> <span class="line"> <span class="token function">onFailed</span><span class="token punctuation">(</span><span class="token parameter"><span class="token literal-property property">file</span><span class="token operator">:</span> File<span class="token punctuation">,</span> <span class="token literal-property property">res</span><span class="token operator">:</span> any</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span> <span class="line"> <span class="token function">alert</span><span class="token punctuation">(</span>res<span class="token punctuation">.</span>message<span class="token punctuation">)</span><span class="token punctuation">;</span></span> <span class="line"> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'onFailed'</span><span class="token punctuation">,</span> file<span class="token punctuation">,</span> res<span class="token punctuation">)</span><span class="token punctuation">;</span></span> <span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span> <span class="line"> <span class="token function">onError</span><span class="token punctuation">(</span><span class="token parameter"><span class="token literal-property property">file</span><span class="token operator">:</span> File<span class="token punctuation">,</span> <span class="token literal-property property">err</span><span class="token operator">:</span> any<span class="token punctuation">,</span> <span class="token literal-property property">res</span><span class="token operator">:</span> any</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span> <span class="line"> <span class="token function">alert</span><span class="token punctuation">(</span>err<span class="token punctuation">.</span>message<span class="token punctuation">)</span><span class="token punctuation">;</span></span> <span class="line"> console<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span><span class="token string">'onError'</span><span class="token punctuation">,</span> file<span class="token punctuation">,</span> err<span class="token punctuation">,</span> res<span class="token punctuation">)</span><span class="token punctuation">;</span></span> <span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span> <span class="line"> <span class="token comment">// 自定义插入图片</span></span> <span class="line"> <span class="token function">customInsert</span><span class="token punctuation">(</span><span class="token parameter"><span class="token literal-property property">res</span><span class="token operator">:</span> any<span class="token punctuation">,</span> <span class="token literal-property property">insertFn</span><span class="token operator">:</span> InsertFnType</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span> <span class="line"> <span class="token function">insertFn</span><span class="token punctuation">(</span>res<span class="token punctuation">.</span>data<span class="token punctuation">,</span> <span class="token string">'image'</span><span class="token punctuation">,</span> res<span class="token punctuation">.</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span></span> <span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span> <span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span> <span class="line"> <span class="token punctuation">[</span><span class="token string">'uploadVideo'</span><span class="token punctuation">]</span><span class="token operator">:</span> <span class="token punctuation">{</span></span> <span class="line"> <span class="token literal-property property">server</span><span class="token operator">:</span> <span class="token function">getUploadUrl</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span></span> <span class="line"> <span class="token comment">// 单个文件的最大体积限制，默认为 10M</span></span> <span class="line"> <span class="token literal-property property">maxFileSize</span><span class="token operator">:</span> <span class="token number">10</span> <span class="token operator">*</span> <span class="token number">1024</span> <span class="token operator">*</span> <span class="token number">1024</span><span class="token punctuation">,</span></span> <span class="line"> <span class="token comment">// 最多可上传几个文件，默认为 100</span></span> <span class="line"> <span class="token literal-property property">maxNumberOfFiles</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span></span> <span class="line"> <span class="token comment">// 选择文件时的类型限制，默认为 ['video/*'] 。如不想限制，则设置为 []</span></span> <span class="line"> <span class="token literal-property property">allowedFileTypes</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'video/*'</span><span class="token punctuation">]</span><span class="token punctuation">,</span></span> <span class="line"></span> <span class="line"> <span class="token comment">// 自定义增加 http header</span></span> <span class="line"> <span class="token literal-property property">headers</span><span class="token operator">:</span> <span class="token punctuation">{</span></span> <span class="line"> <span class="token literal-property property">Accept</span><span class="token operator">:</span> <span class="token string">'*'</span><span class="token punctuation">,</span></span> <span class="line"> <span class="token literal-property property">Authorization</span><span class="token operator">:</span> <span class="token string">'Bearer '</span> <span class="token operator">+</span> <span class="token function">getRefreshToken</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token comment">// 使用 getRefreshToken() 方法，而不使用 getAccessToken() 方法的原因：Editor 无法方便的刷新访问令牌</span></span> <span class="line"> <span class="token string-property property">'tenant-id'</span><span class="token operator">:</span> <span class="token function">getTenantId</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span></span> <span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span> <span class="line"></span> <span class="line"> <span class="token comment">// 超时时间，默认为 30 秒</span></span> <span class="line"> <span class="token literal-property property">timeout</span><span class="token operator">:</span> <span class="token number">15</span> <span class="token operator">*</span> <span class="token number">1000</span><span class="token punctuation">,</span> <span class="token comment">// 15 秒</span></span> <span class="line"></span> <span class="line"> <span class="token comment">// form-data fieldName，后端接口参数名称，默认值wangeditor-uploaded-image</span></span> <span class="line"> <span class="token literal-property property">fieldName</span><span class="token operator">:</span> <span class="token string">'file'</span><span class="token punctuation">,</span></span> <span class="line"></span> <span class="line"> <span class="token comment">// 上传之前触发</span></span> <span class="line"> <span class="token function">onBeforeUpload</span><span class="token punctuation">(</span><span class="token parameter"><span class="token literal-property property">file</span><span class="token operator">:</span> File</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span> <span class="line"> <span class="token comment">// console.log(file)</span></span> <span class="line"> <span class="token keyword">return</span> file<span class="token punctuation">;</span></span> <span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span> <span class="line"> <span class="token comment">// 上传进度的回调函数</span></span> <span class="line"> <span class="token function">onProgress</span><span class="token punctuation">(</span><span class="token parameter"><span class="token literal-property property">progress</span><span class="token operator">:</span> number</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span> <span class="line"> <span class="token comment">// progress 是 0-100 的数字</span></span> <span class="line"> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'progress'</span><span class="token punctuation">,</span> progress<span class="token punctuation">)</span><span class="token punctuation">;</span></span> <span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span> <span class="line"> <span class="token function">onSuccess</span><span class="token punctuation">(</span><span class="token parameter"><span class="token literal-property property">file</span><span class="token operator">:</span> File<span class="token punctuation">,</span> <span class="token literal-property property">res</span><span class="token operator">:</span> any</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span> <span class="line"> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'onSuccess'</span><span class="token punctuation">,</span> file<span class="token punctuation">,</span> res<span class="token punctuation">)</span><span class="token punctuation">;</span></span> <span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span> <span class="line"> <span class="token function">onFailed</span><span class="token punctuation">(</span><span class="token parameter"><span class="token literal-property property">file</span><span class="token operator">:</span> File<span class="token punctuation">,</span> <span class="token literal-property property">res</span><span class="token operator">:</span> any</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span> <span class="line"> <span class="token function">alert</span><span class="token punctuation">(</span>res<span class="token punctuation">.</span>message<span class="token punctuation">)</span><span class="token punctuation">;</span></span> <span class="line"> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'onFailed'</span><span class="token punctuation">,</span> file<span class="token punctuation">,</span> res<span class="token punctuation">)</span><span class="token punctuation">;</span></span> <span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span> <span class="line"> <span class="token function">onError</span><span class="token punctuation">(</span><span class="token parameter"><span class="token literal-property property">file</span><span class="token operator">:</span> File<span class="token punctuation">,</span> <span class="token literal-property property">err</span><span class="token operator">:</span> any<span class="token punctuation">,</span> <span class="token literal-property property">res</span><span class="token operator">:</span> any</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span> <span class="line"> <span class="token function">alert</span><span class="token punctuation">(</span>err<span class="token punctuation">.</span>message<span class="token punctuation">)</span><span class="token punctuation">;</span></span> <span class="line"> console<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span><span class="token string">'onError'</span><span class="token punctuation">,</span> file<span class="token punctuation">,</span> err<span class="token punctuation">,</span> res<span class="token punctuation">)</span><span class="token punctuation">;</span></span> <span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span> <span class="line"> <span class="token comment">// 自定义插入图片</span></span> <span class="line"> <span class="token function">customInsert</span><span class="token punctuation">(</span><span class="token parameter"><span class="token literal-property property">res</span><span class="token operator">:</span> any<span class="token punctuation">,</span> <span class="token literal-property property">insertFn</span><span class="token operator">:</span> InsertFnType</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span> <span class="line"> <span class="token function">insertFn</span><span class="token punctuation">(</span>res<span class="token punctuation">.</span>data<span class="token punctuation">,</span> <span class="token string">'mp4'</span><span class="token punctuation">,</span> res<span class="token punctuation">.</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span></span> <span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span> <span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span> <span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span> <span class="line"> <span class="token literal-property property">uploadImgShowBase64</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span></span> <span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span> <span class="line"> props<span class="token punctuation">.</span>editorConfig <span class="token operator">||</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span></span> <span class="line"> <span class="token punctuation">)</span><span class="token punctuation">;</span></span> <span class="line"> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span> <span class="line"></span> <span class="line"> <span class="token keyword">const</span> editorStyle <span class="token operator">=</span> <span class="token function">computed</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span></span> <span class="line"> <span class="token keyword">return</span> <span class="token punctuation">{</span></span> <span class="line"> <span class="token literal-property property">height</span><span class="token operator">:</span> <span class="token function">isNumber</span><span class="token punctuation">(</span>props<span class="token punctuation">.</span>height<span class="token punctuation">)</span> <span class="token operator">?</span> <span class="token template-string"><span class="token template-punctuation string">\`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">\${</span>props<span class="token punctuation">.</span>height<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">px</span><span class="token template-punctuation string">\`</span></span> <span class="token operator">:</span> props<span class="token punctuation">.</span>height<span class="token punctuation">,</span></span> <span class="line"> <span class="token punctuation">}</span><span class="token punctuation">;</span></span> <span class="line"> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span> <span class="line"></span> <span class="line"> <span class="token comment">// 回调函数</span></span> <span class="line"> <span class="token keyword">const</span> <span class="token function-variable function">handleChange</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token literal-property property">editor</span><span class="token operator">:</span> IDomEditor</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span></span> <span class="line"> <span class="token function">emit</span><span class="token punctuation">(</span><span class="token string">'change'</span><span class="token punctuation">,</span> editor<span class="token punctuation">)</span><span class="token punctuation">;</span></span> <span class="line"> <span class="token punctuation">}</span><span class="token punctuation">;</span></span> <span class="line"></span> <span class="line"> <span class="token comment">// 组件销毁时，及时销毁编辑器</span></span> <span class="line"> <span class="token function">onBeforeUnmount</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span></span> <span class="line"> <span class="token keyword">const</span> editor <span class="token operator">=</span> <span class="token function">unref</span><span class="token punctuation">(</span>editorRef<span class="token punctuation">.</span>value<span class="token punctuation">)</span><span class="token punctuation">;</span></span> <span class="line"></span> <span class="line"> <span class="token comment">// 销毁，并移除 editor</span></span> <span class="line"> editor<span class="token operator">?.</span><span class="token function">destroy</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span> <span class="line"> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span> <span class="line"></span> <span class="line"> <span class="token keyword">const</span> getEditorRef <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">:</span> Promise<span class="token operator"><</span>IDomEditor<span class="token operator">></span> <span class="token operator">=></span> <span class="token punctuation">{</span></span> <span class="line"> <span class="token keyword">await</span> <span class="token function">nextTick</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span> <span class="line"> <span class="token keyword">return</span> <span class="token function">unref</span><span class="token punctuation">(</span>editorRef<span class="token punctuation">.</span>value<span class="token punctuation">)</span> <span class="token keyword">as</span> IDomEditor<span class="token punctuation">;</span></span> <span class="line"> <span class="token punctuation">}</span><span class="token punctuation">;</span></span> <span class="line"></span> <span class="line"> <span class="token function">defineExpose</span><span class="token punctuation">(</span><span class="token punctuation">{</span></span> <span class="line"> getEditorRef<span class="token punctuation">,</span></span> <span class="line"> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span> <span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></span> <span class="line"></span> <span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>