如何将自定义 HTML 标签插入 ckeditor5
How to insert custom HTML tag into ckeditor5
我有 ckeditor 和一些图像(表情符号),我想在 ckeditor 中插入点击图像的 html 标签。我已经尝试过这个问题的解决方案,但没有得到任何结果。我知道直接从 ckeditor 不允许这样做,而且不安全。
Vue.js 分量
<div class="emoji">
<img @click="sendEmoji($event)" src="/assets/images/facebook/expressionless-face_1f611.png" alt="emoji">
</div>
<textarea id="comment_editor"></textarea>
<script>
export default {
mounted() {
ClassicEditor
.create( document.querySelector( '#comment_editor' ), {
toolbar: {
items: [
'bold',
'italic',
'underline',
'link',
'fontColor',
'fontSize',
'fontFamily',
'codeBlock',
'specialCharacters',
'superscript',
'subscript',
]
},
language: 'ru',
licenseKey: '',
} )
.then( comment_editor => {
window.comment_editor = comment_editor;
} )
.catch( error => {
console.error( 'Oops, something gone wrong!' );
console.error( 'Please, report the following error in the https://github.com/ckeditor/ckeditor5 with the build id and the error stack trace:' );
console.warn( 'Build id: 1elt9gdr81je-u3jmkfuwv026' );
console.error( error );
} );
},
methods: {
sendEmoji: function(event){
let img = event.target.outerHTML;
console.log(img);
window.comment_editor.setData(img)
console.log(window.comment_editor.getData());
},
}
}
已解决。只需要添加图像插件。它看起来很难看,但我认为它是可以修复的。
我有 ckeditor 和一些图像(表情符号),我想在 ckeditor 中插入点击图像的 html 标签。我已经尝试过这个问题的解决方案,但没有得到任何结果。我知道直接从 ckeditor 不允许这样做,而且不安全。
Vue.js 分量
<div class="emoji">
<img @click="sendEmoji($event)" src="/assets/images/facebook/expressionless-face_1f611.png" alt="emoji">
</div>
<textarea id="comment_editor"></textarea>
<script>
export default {
mounted() {
ClassicEditor
.create( document.querySelector( '#comment_editor' ), {
toolbar: {
items: [
'bold',
'italic',
'underline',
'link',
'fontColor',
'fontSize',
'fontFamily',
'codeBlock',
'specialCharacters',
'superscript',
'subscript',
]
},
language: 'ru',
licenseKey: '',
} )
.then( comment_editor => {
window.comment_editor = comment_editor;
} )
.catch( error => {
console.error( 'Oops, something gone wrong!' );
console.error( 'Please, report the following error in the https://github.com/ckeditor/ckeditor5 with the build id and the error stack trace:' );
console.warn( 'Build id: 1elt9gdr81je-u3jmkfuwv026' );
console.error( error );
} );
},
methods: {
sendEmoji: function(event){
let img = event.target.outerHTML;
console.log(img);
window.comment_editor.setData(img)
console.log(window.comment_editor.getData());
},
}
}
已解决。只需要添加图像插件。它看起来很难看,但我认为它是可以修复的。