0
点赞
收藏
分享

微信扫一扫

在vscode里面使用tinymce富文本编辑器

止止_8fc8 2022-07-27 阅读 134


问题

在vue里需要用到tinymace富文本编辑器,如何去进行安装。

方法

  1. 在浏览器中搜索tinymce,官方网站为英文网站

(官方网站地址:https://www.tiny.cloud/get-tiny/self-hosted/)

在vscode里面使用tinymce富文本编辑器_chrome

2.进入官网以后先点击上面的Docs选项,后选择最下面的Get TinyMCE Free

在vscode里面使用tinymce富文本编辑器_web_02

3.进入网页以后选择Download,跳转到最新版本页。但是我们为了更好的进行开发,我们则需要下载之前的版本,所以点击here跳转页面。

在vscode里面使用tinymce富文本编辑器_vue_03

在vscode里面使用tinymce富文本编辑器_python_04

4.我们则需要点击页面的第4版本,右边的插件都可以选择下载,但是需要把最后Options内容取消掉,要不然以后将会把所有的文件打包到一个js文件夹里,然后点击Download.并将下载下来的压缩包解压到自己电脑的文件夹内。

在vscode里面使用tinymce富文本编辑器_web_05

在vscode里面使用tinymce富文本编辑器_chrome_06

5.打开vscode中的自己项目,单击右键将public在文件资源管理器中显示,打开public文件夹,将下载好的tinymce文件夹复制到里面去,则tinymce富文本编辑器则安装好。

在vscode里面使用tinymce富文本编辑器_web_07

在vscode里面使用tinymce富文本编辑器_vue_08

在vscode里面使用tinymce富文本编辑器_python_09

6.打开public文件夹,打开其中的index.html,在里面引入<script></script>标签,在标签的双引号中路径应该用上面的内容拼接上文件夹目录名,然后就可以直接使用了。

在vscode里面使用tinymce富文本编辑器_web_10

在vscode里面使用tinymce富文本编辑器_python_11

在vscode里面使用tinymce富文本编辑器_vue_12

3 结语

当在vscode里面创造vue文件时最好选择2.0版本,它可以向上兼容。

举报

相关推荐

0 条评论