vue富文本编辑器Tinymce,功能齐全,对图片等媒体资源操控性好,非常推荐!

使用步骤:

1.在index.html中引入js文件:


  
  

⚠️注意:一定要在打包的js之前引入

2.将富文本资源文件放到static文件夹:

vue富文本编辑器Tinymce,功能齐全,对图片等媒体资源操控性好,非常推荐!_第1张图片

附 下载地址:tinymce静态资源文件包    

3.在components文件夹下放置如下文件(封装好的组件,plugin和toolbar是配置功能的文件,可以根据个人需要修改删除。editorImage是一个图片上传的组件,可以自定义修改,因此对媒体资源可扩展性好。index是主文件,编写富文本的地方,也可以根据个人需要修改)

vue富文本编辑器Tinymce,功能齐全,对图片等媒体资源操控性好,非常推荐!_第2张图片

附 下载地址:组件下载地址

4.在需要的地方调用即可,如demo.vue中:





这是运行之后的结果:

vue富文本编辑器Tinymce,功能齐全,对图片等媒体资源操控性好,非常推荐!_第3张图片

自定义插入图片(或者视频,语音)的功能特别赞,根据个人需要来修改。

你可能感兴趣的:(vue,tinymce富文本编辑器,vue富文本编辑器)