时间戳

首页 > 解决方案 > 如何为ckeditor4-angular添加base64image插件？

angular - 如何为ckeditor4-angular添加base64image插件？

问题描述

在一个 Angular 项目中，我安装了 ckeditor4-angular。我试图安装一个插件 base64image 但它不会运行。

  1. 安装ckeditor4-angular：npm i ckeditor4-angular（https://www.npmjs.com/package/ckeditor4-angular）
  2. app.moduls.ts 的配置
  3. 向 component.html添加了一个<ckeditor [config]="ckconfig" />元素
  4. 添加ckconfig到 component.ts
  5. 建造

到目前为止，一切正常。编辑工作。

下一步：

  1. 从https://ckeditor.com/cke4/addon/base64image下载了 base64plugin
  2. 在 \node_modules\ckeditor4\plugins 中提取 zip 文件
  3. 安装了以下软件包npm i @bukhr/base64image：（https://www.npmjs.com/package/@bukhr/base64image）
  4. 添加插件到配置：ckconfig = {extraPlugins:'base64image'}
  5. 构建/无错误

当我加载站点时，编辑器没有加载，我得到以下崩溃报告：

CrashReport:
        FileName:/4.16.2/standard-all/ckeditor.js
        LineNumber:253
        Function:anonymousCKEDITOR.resourceManager.load]Resourcename"base64image"wasnotfoundat"https://cdn.ckeditor.com/4.16.2/standard-all/plugins/base64image/plugin.js?t=L7C8".
        ErrorReport:<CrmScriptErrorReport>
  <ReportVersion>1.0</ReportVersion>
  <ScriptErrorDetails>
   <Message>Error&#58; &#91;CKEDITOR.resourceManager.load&#93; Resource name &#34;base64image&#34; was not found at &#34;https&#58;&#47;&#47;cdn.ckeditor.com&#47;4.16.2&#47;standard-all&#47;plugins&#47;base64image&#47;plugin.js&#63;t&#61;L7C8&#34;.</Message>
   <Line>253</Line>
   <URL>&#47;4.16.2&#47;standard-all&#47;ckeditor.js&#63;ver&#61;0</URL>
   <PageURL>myurl.xyz</PageURL>
   <Function>anonymousCKEDITOR.resourceManager.load&#93;Resourcename&#34;base64image&#34;wasnotfoundat&#34;https&#58;&#47;&#47;cdn.ckeditor.com&#47;4.16.2&#47;standard-all&#47;plugins&#47;base64image&#47;plugin.js&#63;t&#61;L7C8&#34;.</Function>
   <FunctionRaw>Error&#58; &#91;CKEDITOR.resourceManager.load&#93; Resource name &#34;base64image&#34; was not found at &#34;https&#58;&#47;&#47;cdn.ckeditor.com&#47;4.16.2&#47;standard-all&#47;plugins&#47;base64image&#47;plugin.js&#63;t&#61;L7C8&#34;.</FunctionRaw>
   <CallStack>
    <Function>anonymousCKEDITOR.resourceManager.load&#93;Resourcename&#34;base64image&#34;wasnotfoundat&#34;https&#58;&#47;&#47;cdn.ckeditor.com&#47;4.16.2&#47;standard-all&#47;plugins&#47;base64image&#47;plugin.js&#63;t&#61;L7C8&#34;.</Function>
   </CallStack>
  </ScriptErrorDetails>
  <ClientInformation>
   <BrowserUserAgent>Mozilla&#47;5.0 &#40;Windows NT 10.0&#59; Win64&#59; x64&#59; rv&#58;91.0&#41; Gecko&#47;20100101 Firefox&#47;91.0</BrowserUserAgent>
   <BrowserLanguage>undefined</BrowserLanguage>
   <SystemLanguage>undefined</SystemLanguage>
   <UserLanguage>undefined</UserLanguage>
   <ScreenResolution>1920x1080</ScreenResolution>
   <ClientName>Web</ClientName>
   <ClienState>Online</ClienState>
   <ClientTime>2021-09-09T12&#58;13&#58;40</ClientTime>
  </ClientInformation>
</CrmScriptErrorReport>

似乎 ckeditor 试图从外部源而不是从构建中加载插件。我还没有找到 Angular 的解决方案。我怎样才能正确实现这个插件？

标签： angulartypescriptckeditor4

解决方案

推荐阅读