vue富文本CKEditor 5

最新推荐文章于 2024-05-09 16:49:32 发布

weixin_48399505

最新推荐文章于 2024-05-09 16:49:32 发布

阅读量650

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_48399505/article/details/131654351

版权

本文介绍了如何下载并集成CKEditor5，通过在HTML中引入ckeditor.js文件，创建编辑器实例。详细展示了如何配置编辑器的工具栏、语言、列表样式、标题选项等，以及如何获取和清空编辑器内容。同时提到了自定义编辑器功能，如去除输入标题的设置。

摘要由CSDN通过智能技术生成

1.下载CKEditor 5.js

https://github.com/ckeditor/ckeditor5-build-classic.git

2.复制源码build–ckeditor.js,到public下
public–index.html引入

<script src="./build/ckeditor.js"></script>

3.页面使用

<div id="editor">
</div>
ClassicEditor.create( document.querySelector( '#editor' ) )
	.then( editor => {
		window.editor = editor;
	} )
	.catch( error => {
	console.error( 'There was a problem initializing the editor.', error );
} );
获取editor 的值方法window.editor.getData()
清空editor 的值方法window.editor.setData('')

展示
在这里插入图片描述
4.插件丰富

		var config = {

			// https://ckeditor.com/docs/ckeditor5/latest/features/toolbar/toolbar.html#extended-toolbar-configuration-format
			toolbar: {
				items: [
					'exportPDF', 'exportWord', '|',
					'findAndReplace', 'selectAll', '|',
					'heading', '|',
					'bold', 'italic', 'strikethrough', 'underline', 'code', 'subscript', 'superscript', 'removeFormat', '|',
					'bulletedList', 'numberedList', 'todoList', '|',
					'outdent', 'indent', '|',
					'undo', 'redo',
					'-',
					'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor', 'highlight', '|',
					'alignment', 'lineHeight', '|',
					'link', 'insertImage', 'blockQuote', 'insertTable', 'mediaEmbed', 'codeBlock', 'htmlEmbed', '|',
					'specialCharacters', 'horizontalLine', 'pageBreak', '|',
					'textPartLanguage', '|',
					'sourceEditing'
				],
				shouldNotGroupWhenFull: true
			},
			// Changing the language of the interface requires loading the language file using the <script> tag.
			// language: 'es',
			list: {
				properties: {
					styles: true,
					startIndex: true,
					reversed: true
				}
			},
			// https://ckeditor.com/docs/ckeditor5/latest/features/headings.html#configuration
			heading: {
				options: [
					{ model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
					{ model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' },
					{ model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' },
					{ model: 'heading3', view: 'h3', title: 'Heading 3', class: 'ck-heading_heading3' },
					{ model: 'heading4', view: 'h4', title: 'Heading 4', class: 'ck-heading_heading4' },
					{ model: 'heading5', view: 'h5', title: 'Heading 5', class: 'ck-heading_heading5' },
					{ model: 'heading6', view: 'h6', title: 'Heading 6', class: 'ck-heading_heading6' }
				]
			},
			options: [0.5, 1, 1.5, 2, 2.5],
			fontFamily: {
				options: [
					'default',
					'Arial, Helvetica, sans-serif',
					'Courier New, Courier, monospace',
					'Georgia, serif',
					'Lucida Sans Unicode, Lucida Grande, sans-serif',
					'Tahoma, Geneva, sans-serif',
					'Times New Roman, Times, serif',
					'Trebuchet MS, Helvetica, sans-serif',
					'宋体,宋体, sans-serif',
					'微软雅黑,微软雅黑, sans-serif',
					'Verdana, Geneva, sans-serif'
				]
			},

		};
		ClassicEditor
			.create(document.querySelector('#editor'), config)
			.then(editor => {
				window.editor = editor;
			})
			.catch(error => {
				console.error(error);
			});