vue3-kind-editor:基于KindEditor富文本编辑器，用于Vue3.x的组件

已于 2024-04-24 09:54:03 修改
阅读量2k 收藏 1
点赞数 1
分类专栏： TypeScript vue3 kindeditor 文章标签： typescript vue.js
于 2022-05-14 15:48:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_27936291/article/details/124768989
版权

好用的富文本插件@zhj-target/vue3-kind-editor

引入插件

推荐: get @zhj-target/vue3-kind-editor from npm:
npm i @zhj-target/vue3-kind-editor --save
# or
yarn add @zhj-target/vue3-kind-editor

插件使用

1.在ts中引入


                

                
                
        

        

    

  


        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  NZD-Target
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

				
					
vue3富文本编辑器vue3-kind-editor

				
			

			

				

					05-09
				

			

		

		

			
				
vue3富文本编辑器vue3-kind-editor

			
		

	



                

            
              



	

		

			

				
					
Vue3 使用 富文本编辑器 wangeditor/editor-for-vue 配置详解

				
			

			

				

					weixin_45563734的博客
				

				

					09-04
					
					4223
					
				

			

		

		

			
				
Vue3 使用  富文本编辑器 wangeditor/editor-for-vue  配置详解

			
		

	



              


  
              

                


	

		

			

				
					
Vue 3 富文本编辑器组件详解

				
			

			

				

					2401_86113453的博客
				

				

					09-02
					
					3008
					
				

			

		

		

			
				
本文所述的Vue组件旨在提供一个可高度自定义的富文本编辑器。富文本内容编辑工具栏配置自定义图片上传与插入通过v-model实现双向数据绑定异步加载并渲染图片在富文本编辑器中，模态框（如图片上传、链接插入等）是常见的交互元素。为了让这些模态框符合我们的UI风格，我们通常需要自定义它们的样式和位置。图片上传是富文本编辑器中的重要功能。通常，我们需要自定义上传逻辑，以便将图片上传到服务器，并将服务器返回的图片信息插入到编辑器中。

			
		

	





	

		

			

				
					
vue3 集成kindeditor研究

				
			

			

				

					dugucike的专栏
				

				

					05-26
					
					1298
					
				

			

		

		

			
				
可以在kindeditor-all.js 里面KE.plugin开头的部分的工一个类似的界面，复制并改名，然后从里面，改内容，比较快，这样就制作了一个插件，比较叫hello，全部为小写字母组合*kindeditor虽然老，但是稳定，最大的好外是word贴进去不变形，后端部分有安全隐患，我给去掉了，只保留了前端，集成jquery添加了跨域ajax上传功能。图标文件：\public\kindeditor\themes\default\default.png,在这个图片上加图标，大小16*16。

			
		

	



		

			
		



	

		

			

				
					
Vue3项目集成CKEditor富文本编辑器，支持代码语法高亮显示

				
			

			

				

					heshengfu1211的博客
				

				

					03-09
					
					3754
					
				

			

		

		

			
				
Vue3项目中集成具有扩展功能的CKEditor富文本编辑器，支持代码语法高亮显示！

			
		

	





	

		

			

				
					
KINDEDITOR – 支持WORD上传的富文本编辑器

					
最新发布

				
			

			

				

					alisky119的博客
				

				

					10-22
					
					928
					
				

			

		

		

			
				
编辑器：KindEditor需求：从word复制粘贴内容和图片系统：windows,macOS,linux,信创国产化前端：vue2,vue3,vue-cli,后端：java,asp.net,php,asp要求：开源，免费，技术支持最近这块好像很火，或者说需求有点旺盛，今天早上又有网友加我微信，实际上之前就已经在网上公布了微信号了，但是很多网友还是说找不到，这就有点困难了。

			
		

	





	

		

			

				
					
vue集成kindeditor富文本的实现示例代码

				
			

			

				

					10-16
				

			

		

		

			
				
主要介绍了vue集成kindeditor富文本的实现示例代码，文中通过示例代码介绍的非常详细，对大家学习或者使用vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧

			
		

	





	

		

			

				
					
Vue 手把手教你使用 kindeditor

				
			

			

				

					leleshuo
				

				

					07-03
					
					8060
					
				

			

		

		

			
				
Vue 手把手教你使用 kindeditor

			
		

	





	

		

			

				
					
VUE引入kindeditor、本地化、一键排版样式等操作

				
			

			

				

					qq_38718629的博客
				

				

					04-01
					
					2780
					
				

			

		

		

			
				
文中所有资源可点击此处免费下载
1、创建VUE项目，安装kindeditor
cnpm i kindeditor -S

2、在components下新建KindEditor文件夹，新建Index.vue组件，
<template>
  <div class="margin-top-20">
    <textarea name="content" :id="id" v-model="outContent"></textarea>
    <div st

			
		

	





	

		

			

				
					
在Vue项目使用kindEditor富文本编译器以及上传图片

				
			

			

				

					xiaoHelloWord的博客
				

				

					04-16
					
					1706
					
				

			

		

		

			
				
第一步
第二步，建立kindeditor.vue组件
第三步引入
如果需要自定义行距下拉菜单可以直接修改kindeditor-all.js这个。
你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客：撤销：Ctrl/Command + Z
重做：Ctr

			
		

	





	

		

			

				
					
vue-kindeditor 安装和解决问题

				
			

			

				

					张小胖
				

				

					05-30
					
					1853
					
				

			

		

		

			
				
1、kindeditor 安装 与 使用
2、kindeditor 光标下插入内容
3、kindeditor 上传图片和视频

			
		

	





	

		

			

				
					
vue3下可引用的编辑器，基于kindeditor4.1.11改造，可ajax上传，带进度条

				
			

			

				

					05-26
				

			

		

		

			
				
vue3下可引用的编辑器，基于kindeditor4.1.11改造，可ajax上传，带进度条，去掉了swfupload,去掉了后台功能模块，只保留了前端功能模块，可用iframe引入到各种工程里面

			
		

	





	

		

			

				
					
Vue+富文本编辑器

				
			

			

				

					10-16
				

			

		

		

			
				
"Vue+富文本编辑器"的组合，是指将Vue.js框架与富文本编辑器集成，以实现用户友好的文本编辑功能。富文本编辑器允许用户以类似Word的方式编辑网页内容，包括字体、颜色、样式、图片插入等。这种编辑器通常会提供一个...

			
		

	





	

		

			

				
					
vue3-wangeditor:基于Wangeditor富文本编辑器，用于Vue3.x的组件

				
			

			

				

					04-02
				

			

		

		

			
				
vue3-wangeditor是一种基于wangEditor二次封装的Vue3.x的Web富文本编辑器，轻量，简洁，易用，开源免费。 兼容常见的PC浏览器：Chrome，Firefox，Safar，Edge，QQ浏览器，IE11。 不支持移动端。  wangEditor当前是v4...

			
		

	





	

		

			

				
					
my-vue-editor:Vue 2.x的富文本编辑器

				
			

			

				

					05-11
				

			

		

		

			
				
 基于Vue2.x的富文本编辑器 演示版 更多演示请参考示例目录 介绍 我们的编辑器基于二次开发。 感谢其作者提供了简洁的RTF编辑器插件，在此基础上，我们重写了本机方法并扩展了功能。 安装 npm install my - vue - ...

			
		

	





	

		

			

				
					
vue富文本编辑器 vue-quill-editor.js  quill版本1.3.6

				
			

			

				

					07-01
				

			

		

		

			
				
vue富文本编辑器vue-quill-editor.js quill版本1.3.6 使用教程 ： vue-quill-editor富文本编辑器使用方法，最全，含部分源码解读，含图片上传，如果页面有多个富文本，图片上传解决方案 ...

			
		

	





	

		

			

				
					
vue3中使用editor.js

				
			

			

				

					前端程序猿的博客
				

				

					09-25
					
					2551
					
				

			

		

		

			
				
总而言之，Editor.js 是一个功能强大、灵活且易于使用的编辑器库，适用于构建各种应用程序中的富文本编辑功能，如内容管理系统、博客平台、电子商务平台等。你可以根据需要编写自己的块插件，并将其集成到编辑器中，以满足特定的编辑需求。：Editor.js 采用了块结构的概念，将内容分解为可独立操作和样式化的不同块，如段落、标题、图像、列表等。它的设计理念是简洁、无干扰的用户体验，焦点是在“块”内容上，而非传统的富文本编辑器的样式。：不仅可以创建单一块的内容，还可以在块内部创建嵌套结构，构建复杂的内容组合。

			
		

	





	

		

			

				
					
Vue3中快速简单使用CKEditor 5富文本编辑器

				
			

			

				

					张先生的前端日志
				

				

					09-08
					
					8248
					
				

			

		

		

			
				
CKEditor 5就是内嵌在网页中的一个富文本编辑器工具接下来带你快速熟悉CKEditor 5在Vue3中简单使用

			
		

	





	

		

			

				
					
Vue3-Kind-Editor什么

				
			

			

				

					10-22
				

			

		

		

			
				
Vue3-Kind-Editor是一个基于KindEditor富文本编辑器构建的用于Vue 3.x环境的组件。它允许你在Vue应用程序中轻松地添加功能丰富的文本编辑功能。在TypeScript项目中，可以这样导入并使用它[^1]：

```typescript
// 引入并在state中初始化
import { Vue3KindEditor } from '@zhj-target/vue3-kind-editor';
const state = reactive({
  editorText: ''
});

// 初始化编辑器
state.editor = new Vue3KindEditor({
  el: '#editor',
  value: state.editorText,
  // 可以在这里设置其他KindEditor的配置选项
});
```

如果你在TS项目中遇到`@ts-export-error`错误，这可能是因为库作者尚未为TypeScript提供完整的类型定义，但组件仍然可以在Vue组件内部正常使用。要了解详细的配置选项，建议查阅KindEditor官方文档或其相关的配置说明。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 11

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值