tui-editor富文本编辑器组件

tui-editor富文本编辑器

记录项目中使用富文本编辑器

1. 安装

	npm init & npm install --save tui-editor

1. 创建组件文档 tuieditor

   

2. 在 default-options.js中

	// doc: https://nhnent.github.io/tui.editor/api/latest/ToastUIEditor.html#ToastUIEditor
	export default {
	  minHeight: '200px',
	  previewStyle: 'vertical',
	  useCommandShortcut: true,
	  useDefaultHTMLSanitizer: true,
	  usageStatistics: false,
	  hideModeSwitch: true,
	  toolbarItems: [
	    'heading',
	    'bold',
	    'italic',
	    'strike',
	    'divider',
	    'hr',
	    'quote',
	    'divider',
	    'ul',
	    'ol',
	    'task',
	    'indent',
	    'outdent',
	    'divider',
	    'table',
	    'image',
	    'link',
	    'divider',
	    'code',
	    'codeblock'
	  ]
	}

4. 在组件index中

5. 在页面中引用

	import mytuieditor from "@/components/tuieditor/index.vue"; //导入tuieditor富文本编辑器组件

// 注册组件
 components: {
    mytuieditor, //注册tuieditor富文本编辑器组件
  },

//  使用

  


//  在data中声明

   content: "tuieditor富文本编辑器初始值",

6. 成品