1. インストール
ckeditor5 は、npm をインストールする方法、CDN をインストールする方法、プロジェクトに ZIP ファイルをダウンロードする方法の 3 つを提供しています.
インストールコマンド
npm install @ckeditor/ckeditor5-build-decoupled-document --save
アンインストール コマンド
npm uninstall @ckeditor/ckeditor5-build-decoupled-document --save
2. お見積り
対応するコンポーネントで導入する
import CKEditor from '@ckeditor/ckeditor5-build-decoupled-document'
import '@ckeditor/ckeditor5-build-decoupled-document/build/translations/zh-cn' (中文包)
html部分
<div class="goods-editor">
<!-- 工具栏容器 -->
<div id="toolbar-container"></div>
<!-- 编辑器容器 -->
<div id="editor">
<!-- <p>This is the initial editor content.</p> -->
</div>
</div>
js部分
export default {
data (){
editor:null
}
mounted() {
this.initCKEditor()
},
methods: {
initCKEditor() {
CKEditor.create(document.querySelector('#editor'), {
ckfinder: {
uploadUrl:''
}
}).then(editor => {
const toolbarContainer = document.querySelector('#toolbar-container');
toolbarContainer.appendChild(editor.ui.view.toolbar.element);
this.editor = editor
}).catch(error => {
console.error(error);
});
}
}
コンパイラデータの更新
データを取得: this.editor.getData()
データの更新: this.editor.setData()
写真や動画をアップロードする
initCKEditor() {
class UploadAdapter {
constructor(loader) {
this.loader = loader
}
async upload() { // 图片上传
const data = new FormData();
data.append('file', await this.loader.file);
return new Promise((resolve, reject) => {
upload(data).then(res => {
resolve({
default: res.repData
})
})
})
}
}
CKEditor.create(document.querySelector('#editor'), {
language: 'zh-cn', // 中文包
ckfinder: {
'uploaded': 1, 'url': '/'
},
link: {
addTargetToExternalLinks: true,
}, // a标签跳转打开新窗口
mediaEmbed: { // 视频配置
providers: [
{
name: 'myprovider',
url: [
/^lizzy.*\.com.*\/media\/(\w+)/,
/^www\.lizzy.*/,
/(http|https):\/\/([\w.]+\/?)\S*/
],
html: match => {
//获取媒体url
const input = match['input'];
return (
'<div style="position: relative; padding-bottom: 100%; height: 0; padding-bottom: 70%;">' +
`<iframe src="${input}" ` +
'style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;" ' +
'frameborder="0" allowtransparency="true" allow="encrypted-media">' +
'</iframe>' +
'</div>'
);
}
}
]
}
}).then(editor => {
editor.plugins.get( 'FileRepository' ).createUploadAdapter = ( loader ) => {
return new UploadAdapter(loader);
};
const toolbarContainer = document.querySelector('#toolbar-container');
toolbarContainer.appendChild(editor.ui.view.toolbar.element);
this.editor = editor
})
},
動画がアップロードされた後、その動画が紹介されているページには表示されません。このコードがあり、ラベルが表示されないためです。
<figure class="media">
<oembed url=""></oembed>
</figure>
解決策:公式 Web サイトの解決策は何度も試みましたが、対応する問題は解決しませんでした。後で、動画を使用して oembed タグを置き換えることを考えました
let helpContent = res.repData.helpContent // 后台返回的富文本框数据
let helpContentVideo = helpContent.replace(/<oembed url/ig,"<video controls='controls' src").replace(/oembed>/ig, "video>")