CKEditor 5 通过外部插入图像 url
CKEditor 5 insert image by external url
我想知道如何仅通过 URL 插入图像(用户从其他网站获取图像)。我需要在 CKEditor 5 中实现一个简单的 img src=""。问题是默认情况下,编辑器要求我上传图像,而我需要插入外部 url.
我已经阅读了很多相关主题(, 2, 3),但没有发现与我类似的问题。我什至不需要特殊按钮,也许我可以以某种方式在 CKEditor 和然后在我将 @Html.Raw(Model.Text) 应用于我从CKeditor textarea.
这是我将数据从编辑器插入网页后得到的结果。
我认为这是因为出于安全原因,标签被视为文本。
P.S。当我在对话框中单击 link from the web 时,Stack overflow 图像插入工具允许通过其 url 上传图像。所以我想要在 CKEditor 5 中有类似的东西。
如有任何帮助,我们将不胜感激!
关于如何实现此功能,在他们的文档中有一个非常简单明了的解释:https://ckeditor.com/docs/ckeditor5/latest/framework/guides/creating-simple-plugin.html
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';
import Image from '@ckeditor/ckeditor5-image/src/image';
import ImageCaption from '@ckeditor/ckeditor5-image/src/imagecaption';
import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
import imageIcon from '@ckeditor/ckeditor5-core/theme/icons/image.svg';
class InsertImage extends Plugin {
init() {
const editor = this.editor;
editor.ui.componentFactory.add( 'insertImage', locale => {
const view = new ButtonView( locale );
view.set( {
label: 'Insert image',
icon: imageIcon,
tooltip: true
} );
// Callback executed once the image is clicked.
view.on( 'execute', () => {
const imageUrl = prompt( 'Image URL' );
editor.model.change( writer => {
const imageElement = writer.createElement( 'image', {
src: imageUrl
} );
// Insert the image in the current selection location.
editor.model.insertContent( imageElement, editor.model.document.selection );
} );
} );
return view;
} );
}
}
ClassicEditor
.create( document.querySelector( '#editor' ), {
plugins: [ Essentials, Paragraph, Bold, Italic, Image, InsertImage, ImageCaption ],
toolbar: [ 'bold', 'italic', 'insertImage' ]
} )
.then( editor => {
console.log( 'Editor was initialized', editor );
} )
.catch( error => {
console.error( error.stack );
} );
最终结果:
希望对您有所帮助。 :)
我想知道如何仅通过 URL 插入图像(用户从其他网站获取图像)。我需要在 CKEditor 5 中实现一个简单的 img src=""。问题是默认情况下,编辑器要求我上传图像,而我需要插入外部 url.
我已经阅读了很多相关主题(
这是我将数据从编辑器插入网页后得到的结果。 我认为这是因为出于安全原因,标签被视为文本。
P.S。当我在对话框中单击 link from the web 时,Stack overflow 图像插入工具允许通过其 url 上传图像。所以我想要在 CKEditor 5 中有类似的东西。
如有任何帮助,我们将不胜感激!
关于如何实现此功能,在他们的文档中有一个非常简单明了的解释:https://ckeditor.com/docs/ckeditor5/latest/framework/guides/creating-simple-plugin.html
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';
import Image from '@ckeditor/ckeditor5-image/src/image';
import ImageCaption from '@ckeditor/ckeditor5-image/src/imagecaption';
import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
import imageIcon from '@ckeditor/ckeditor5-core/theme/icons/image.svg';
class InsertImage extends Plugin {
init() {
const editor = this.editor;
editor.ui.componentFactory.add( 'insertImage', locale => {
const view = new ButtonView( locale );
view.set( {
label: 'Insert image',
icon: imageIcon,
tooltip: true
} );
// Callback executed once the image is clicked.
view.on( 'execute', () => {
const imageUrl = prompt( 'Image URL' );
editor.model.change( writer => {
const imageElement = writer.createElement( 'image', {
src: imageUrl
} );
// Insert the image in the current selection location.
editor.model.insertContent( imageElement, editor.model.document.selection );
} );
} );
return view;
} );
}
}
ClassicEditor
.create( document.querySelector( '#editor' ), {
plugins: [ Essentials, Paragraph, Bold, Italic, Image, InsertImage, ImageCaption ],
toolbar: [ 'bold', 'italic', 'insertImage' ]
} )
.then( editor => {
console.log( 'Editor was initialized', editor );
} )
.catch( error => {
console.error( error.stack );
} );
最终结果:
希望对您有所帮助。 :)