blocks|key|1877473|text|NPM上发布了CKEditor。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1877474|现在，您可以完全使用所需的命令。|1877475|安装|1877476|npm+install+ckeditor+--save-dev|code-block|syntax|javascript|1877477|注入|1877478|var+CK+=+require('ckeditor');|1877479|entityMap|0|LINK|mutability|MUTABLE|url|https://www.npmjs.com/package/ckeditor^0|0|3|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@$A|Z|B|10|1|11]]|C|$]]|$1|D|3|E|5|6|7|12|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|13|8|@]|9|@]|C|$]]|$1|H|3|I|5|J|7|14|8|@]|9|@]|C|$K|L]]|$1|M|3|N|5|6|7|15|8|@]|9|@]|C|$]]|$1|O|3|P|5|J|7|16|8|@]|9|@]|C|$K|L]]|$1|Q|3|-4|5|6|7|17|8|@]|9|@]|C|$]]]|R|$S|$5|T|U|V|C|$W|X]]]]

<p>CKEditor was published on <a href="https://www.npmjs.com/package/ckeditor" rel="nofollow noreferrer">NPM</a>.</p>
<p>Now you can use exactly the commands you want.</p>
<h2>Install</h2>
<pre><code>npm install ckeditor --save-dev
</code></pre>
<h2>Inject</h2>
<pre><code>var CK = require('ckeditor');
</code></pre>


blocks|key|1877550|text|安装|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1877551|npm+install+ckeditor+--save|code-block|syntax|javascript|1877552|加载|1877553|require('ckeditor');|1877554|加载后，chkeditor将作为全局变量CKEDITOR可用|offset|length|style|CODE|1877555|替换|1877556|CKEDITOR.replace('elementId');|1877557|问题|1877558|编辑器加载它自己需要的CSS/JS资产，很可能找不到这些资产。您可以参考这些资源的CDN版本，也可以将CKeditor目录复制到公共可访问文件夹中。使用CKEDITOR_BASEPATH定义公共可访问资源的URL。|1877559|window.CKEDITOR_BASEPATH++++=+'//cdn.ckeditor.com/4.6.2/full-all/';|1877560|注意:在您的导入语句之前定义window.CKEDITOR_BASEPATH！|1877561|entityMap^0|0|0|0|0|K|8|0|0|0|0|24|H|0|0|E|O|0^^$0|@$1|2|3|4|5|6|7|14|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|15|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|16|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|17|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|18|8|@$M|19|N|1A|O|P]]|9|@]|A|$]]|$1|Q|3|R|5|6|7|1B|8|@]|9|@]|A|$]]|$1|S|3|T|5|D|7|1C|8|@]|9|@]|A|$E|F]]|$1|U|3|V|5|6|7|1D|8|@]|9|@]|A|$]]|$1|W|3|X|5|6|7|1E|8|@$M|1F|N|1G|O|P]]|9|@]|A|$]]|$1|Y|3|Z|5|D|7|1H|8|@]|9|@]|A|$E|F]]|$1|10|3|11|5|6|7|1I|8|@$M|1J|N|1K|O|P]]|9|@]|A|$]]|$1|12|3|-4|5|6|7|1L|8|@]|9|@]|A|$]]]|13|$]]

<h3>Install</h3>
<pre><code>npm install ckeditor --save
</code></pre>
<h3>Load</h3>
<pre><code>require('ckeditor');
</code></pre>
<p>After loading chkeditor becomes available as global variable <code>CKEDITOR</code></p>
<h3>Replace</h3>
<pre><code>CKEDITOR.replace('elementId');
</code></pre>
<h3>Issues</h3>
<p>The editor loads it's own required CSS/JS assets, likely these cannot be found. You can refer to the CDN version for these resources or you can copy the CKeditor directory to an public reachable folder. Define the URL of the public reachable resources with <code>CKEDITOR_BASEPATH</code>.</p>
<pre><code>window.CKEDITOR_BASEPATH    = '//cdn.ckeditor.com/4.6.2/full-all/';
</code></pre>
<p>Note: Define <code>window.CKEDITOR_BASEPATH</code> before your import statement!</p>


blocks|key|1877680|text|CK编辑器5可以很容易地与webpack一起使用：https://docs.ckeditor.com/ckeditor5/latest/framework/guides/quick-start.html|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1877681|尽管需要注意的是，截至2018年2月，它仍在alpha2：https://github.com/ckeditor/ckeditor5#packages中|1877682|通过使用以下代码，我能够开始使用Rails和webpacker：|1877683|yarn+add+\
++++css-loader++\
++++node-sass+\
++++raw-loader+\
++++sass-loader+\
++++style-loader

yarn+add+\
++++@ckeditor/ckeditor5-editor-classic+\
++++@ckeditor/ckeditor5-essentials+\
++++@ckeditor/ckeditor5-paragraph+\
++++@ckeditor/ckeditor5-basic-styles|code-block|syntax|javascript|1877684|在我直接从快速入门指南复制的代码中：|1877685|import+ClassicEditor+from+'@ckeditor/ckeditor5-editor-classic/src/classiceditor'
import+Essentials+from+'@ckeditor/ckeditor5-essentials/src/essentials'
import+Paragraph+from+'@ckeditor/ckeditor5-paragraph/src/paragraph'
import+Bold+from+'@ckeditor/ckeditor5-basic-styles/src/bold'
import+Italic+from+'@ckeditor/ckeditor5-basic-styles/src/italic'

const+element+=+document.getElementById('editor')

ClassicEditor.create(element,+{
++plugins:+[Essentials,+Paragraph,+Bold,+Italic],
++toolbar:+['bold',+'italic']
})
.then(editor+=>+{
++console.log('Editor+was+initialized',+editor)
})
.catch(error+=>+{
++console.error(error.stack)
})|1877686|最后，根据快速入门指南，我必须为ckeditor+svg图标添加一个加载器。我在这里为该https://github.com/rails/webpacker/blob/master/docs/webpack.md#react-svg-loader使用了webpacker参考|1877687|//+config/webpacker/environment.js
const+{+environment+}+=+require('@rails/webpacker')

environment.loaders.insert('svg',+{
++test:+/ckeditor5-[%5E/]%2B\/theme\/icons\/[%5E/]%2B\.svg$/,
++use:+'raw-loader'
},+{+after:+'file'+})

const+fileLoader+=+environment.loaders.get('file')
fileLoader.exclude+=+/ckeditor5-[%5E/]%2B\/theme\/icons\/[%5E/]%2B\.(svg)$/i

module.exports+=+environment|1877688|entityMap|0|LINK|mutability|MUTABLE|url|https://docs.ckeditor.com/ckeditor5/latest/framework/guides/quick-start.html|1|https://github.com/ckeditor/ckeditor5#packages|2|https://github.com/rails/webpacker/blob/master/docs/webpack.md#react-svg-loader^0|P|24|0|0|T|1A|1|0|0|0|0|0|18|27|2|0|0^^$0|@$1|2|3|4|5|6|7|16|8|@]|9|@$A|17|B|18|1|19]]|C|$]]|$1|D|3|E|5|6|7|1A|8|@]|9|@$A|1B|B|1C|1|1D]]|C|$]]|$1|F|3|G|5|6|7|1E|8|@]|9|@]|C|$]]|$1|H|3|I|5|J|7|1F|8|@]|9|@]|C|$K|L]]|$1|M|3|N|5|6|7|1G|8|@]|9|@]|C|$]]|$1|O|3|P|5|J|7|1H|8|@]|9|@]|C|$K|L]]|$1|Q|3|R|5|6|7|1I|8|@]|9|@$A|1J|B|1K|1|1L]]|C|$]]|$1|S|3|T|5|J|7|1M|8|@]|9|@]|C|$K|L]]|$1|U|3|-4|5|6|7|1N|8|@]|9|@]|C|$]]]|V|$W|$5|X|Y|Z|C|$10|11]]|12|$5|X|Y|Z|C|$10|13]]|14|$5|X|Y|Z|C|$10|15]]]]

<p>CK Editor 5 can be easily used with webpack: <a href="https://docs.ckeditor.com/ckeditor5/latest/framework/guides/quick-start.html" rel="nofollow noreferrer">https://docs.ckeditor.com/ckeditor5/latest/framework/guides/quick-start.html</a></p>

<p>Although it should be noted that as of Feb 2018 it is still in alpha2: <a href="https://github.com/ckeditor/ckeditor5#packages" rel="nofollow noreferrer">https://github.com/ckeditor/ckeditor5#packages</a></p>

<p>I was able to get started with Rails and webpacker by using the following:</p>

<pre><code>yarn add \
    css-loader  \
    node-sass \
    raw-loader \
    sass-loader \
    style-loader

yarn add \
    @ckeditor/ckeditor5-editor-classic \
    @ckeditor/ckeditor5-essentials \
    @ckeditor/ckeditor5-paragraph \
    @ckeditor/ckeditor5-basic-styles
</code></pre>

<p>In the code I copied directly from the quick start guide:</p>

<pre><code>import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor'
import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials'
import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph'
import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold'
import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic'

const element = document.getElementById('editor')

ClassicEditor.create(element, {
  plugins: [Essentials, Paragraph, Bold, Italic],
  toolbar: ['bold', 'italic']
})
.then(editor =&gt; {
  console.log('Editor was initialized', editor)
})
.catch(error =&gt; {
  console.error(error.stack)
})
</code></pre>

<p>Finally I had to add a loader for ckeditor svg icons as per the quick start guide. I used the webpacker reference here for that <a href="https://github.com/rails/webpacker/blob/master/docs/webpack.md#react-svg-loader" rel="nofollow noreferrer">https://github.com/rails/webpacker/blob/master/docs/webpack.md#react-svg-loader</a></p>

<pre><code>// config/webpacker/environment.js
const { environment } = require('@rails/webpacker')

environment.loaders.insert('svg', {
  test: /ckeditor5-[^/]+\/theme\/icons\/[^/]+\.svg$/,
  use: 'raw-loader'
}, { after: 'file' })

const fileLoader = environment.loaders.get('file')
fileLoader.exclude = /ckeditor5-[^/]+\/theme\/icons\/[^/]+\.(svg)$/i

module.exports = environment
</code></pre>


<p>How can I use CKEditor from npm with webpack?</p>

<p>Ideally I want <code>npm install ckeditor --save</code> then <code>var CK = require('ckeditor');</code> without any global namespace pollution.</p>


How to use CKEditor as an NPM module built with webpack or similar

如何和webpack一起使用npm中的CKEditor？理想情况下，我希望先使用npm install ckeditor --save，然后使用var CK = require('ckeditor');，而不需要任何全局名称空间污染。

问如何使用CKEditor作为与webpack或类似人构建的NPM模块
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用CKEditor作为与webpack或类似人构建的NPM模块EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用CKEditor作为与webpack或类似人构建的NPM模块
EN