This time I will show you how to introduce tinymce rich text into the Vue project Editor, what are the precautions when operating the tinymce rich text editor into the Vue project, as follows This is a practical case, let’s take a look at it.
The rich text editor originally used in the project was wangEditor, which is a very lightweight and concise editor
However, the company's business has been upgraded and it wants an editor with more comprehensive functions. I've been looking for it for a long time, and the common editors currently include these:
UEditor: Baidu's front-end open source project, powerful, based on jQuery, but it is no longer maintained, and the back-end code is limited, making modifications more difficult.
bootstrap-wysiwyg: Micro, easy to use, small and beautiful, just Bootstrap jQuery...
kindEditor: powerful, simple code, needs to configure the background, and Long time no update
wangEditor: lightweight, concise, and easy to use, but after upgrading to 3.x, it is not convenient for customized development. But the author is very diligent. In a broad sense, he and I are family members. Please give me a call
quill: It doesn’t have many functions, but it can be expanded by itself. The API is also easy to understand. If you can understand English...
summernote: I didn’t study it in depth. The UI is quite beautiful and it is a small and beautiful editor, but I need a big one.
With such a reference, I finally chose tinymce. The editor cannot even open the official website without a ladder (it is simply asking for trouble), mainly because of two points:
1. There are many stars on GitHub and the functions are complete;
2 . The only editor that can maintain most of the formatting when pasting from word;
3. No need to find back-end personnel to scan the code to change the interface, the front-end and back-end are separated;
4. Say Two good points!
1. Resource download
tinymce officially provides a component tinymce-vue
npm install @tinymce/tinymce-vue -S
in vscode, The webstorm terminal may report an error when running this code. It is best to use the command line tool that comes with the operating system
If you have purchased the tinymce service, you can refer to the instructions of tinymce-vue and use tinymce directly through the api-key.
If you haven’t purchased it like me, you still have to download tinymce
npm install tinymce -S
After installation, find the tinymce/skins directory in node_modules, and then add skins Copy the directory to the static directory
// If it is a typescript project built using vue-cli 3.x, put it in the public directory. All static directories in this article are handled in this way
tinymce The default is the English interface, so you also need to download a Chinese language pack (remember to build a ladder! Build a ladder! Build a ladder!)
Then put this language pack in the static directory. In order to have a clear structure, I included it Layer tinymce directory
2. Initialization
Introduce the following files into the page
import tinymce from 'tinymce/tinymce' import 'tinymce/themes/modern/theme' import Editor from '@tinymce/tinymce-vue'
tinymce-vue is a component that needs to be registered in components and then used directly.
The init here is the tinymce initialization configuration item. Some key APIs will be discussed later. , the complete api can refer to the official documentation
The editor needs a skin to work properly, so you need to set a skin_url to point to the previously copied skin file
init: { language_url: '/static/tinymce/zh_CN.js', language: 'zh_CN', skin_url: '/static/tinymce/skins/lightgray', height: 300 }
// vue-cli 3.x creation Typescript project, remove the static in the url, that is, skin_url: '/tinymce/skins/lightgray'
At the same time, it also needs to be initialized once in mounted:
If the above init object is passed here, it will not take effect, but if no parameters are passed, an error will be reported, so an empty object is passed here
3. Extension plug-in
完成了上面的初始化之后,就已经能正常运行编辑器了,但只有一些基本功能
tinymce 通过添加插件 plugins 的方式来添加功能
比如要添加一个上传图片的功能,就需要用到 image 插件,添加超链接需要用到 link 插件
同时还需要在页面引入这些插件:
添加了插件之后,默认会在工具栏 toolbar 上添加对应的功能按钮,toolbar 也可以自定义
贴一下完整的组件代码:
<template> <p> </p> <h1 id="tinymce">tinymce</h1> <editor></editor> <p></p> </template> <script> import tinymce from 'tinymce/tinymce' import 'tinymce/themes/modern/theme' import Editor from '@tinymce/tinymce-vue' import 'tinymce/plugins/image' import 'tinymce/plugins/link' import 'tinymce/plugins/code' import 'tinymce/plugins/table' import 'tinymce/plugins/lists' import 'tinymce/plugins/contextmenu' import 'tinymce/plugins/wordcount' import 'tinymce/plugins/colorpicker' import 'tinymce/plugins/textcolor' export default { name: 'tinymce', data () { return { tinymceHtml: '请输入内容', init: { language_url: '/static/tinymce/zh_CN.js', language: 'zh_CN', skin_url: '/static/tinymce/skins/lightgray', height: 300, plugins: 'link lists image code table colorpicker textcolor wordcount contextmenu', toolbar: 'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink image code | removeformat', branding: false } } }, mounted () { tinymce.init({}) }, components: {Editor} } </script>
四、上传图片
tinymce 提供了 images_upload_url 等 api 让用户配置上传图片的相关参数
但为了在不麻烦后端的前提下适配自家的项目,还是得用 images_upload_handler 来自定义一个上传方法
这个方法会提供三个参数:blobInfo, success, failure
其中 blobinfo 是一个对象,包含上传文件的信息:
success 和 failure 是函数,上传成功的时候向 success 传入一个图片地址,失败的时候向 failure 传入报错信息
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
The above is the detailed content of How to introduce tinymce rich text editor into Vue project. For more information, please follow other related articles on the PHP Chinese website!

tinymce是一个功能齐全的富文本编辑器插件,但在vue中引入tinymce并不像别的Vue富文本插件一样那么顺利,tinymce本身并不适配Vue,还需要引入@tinymce/tinymce-vue,并且它是国外的富文本插件,没有通过中文版本,需要在其官网下载翻译包(可能需要翻墙)。1、安装相关依赖npminstalltinymce-Snpminstall@tinymce/tinymce-vue-S2、下载中文包3.引入皮肤和汉化包在项目public文件夹下新建tinymce文件夹,将下载的

简单易懂的PyCharm项目打包方法分享随着Python的流行,越来越多的开发者使用PyCharm作为Python开发的主要工具。PyCharm是功能强大的集成开发环境,它提供了许多方便的功能来帮助我们提高开发效率。其中一个重要的功能就是项目的打包。本文将介绍如何在PyCharm中简单易懂地打包项目,并提供具体的代码示例。为什么要打包项目?在Python开发

如何在iOS17中的iPhone上制作GroceryList在“提醒事项”应用中创建GroceryList非常简单。你只需添加一个列表,然后用你的项目填充它。该应用程序会自动将您的商品分类,您甚至可以与您的伴侣或扁平伙伴合作,列出您需要从商店购买的东西。以下是执行此操作的完整步骤:步骤1:打开iCloud提醒事项听起来很奇怪,苹果表示您需要启用来自iCloud的提醒才能在iOS17上创建GroceryList。以下是它的步骤:前往iPhone上的“设置”应用,然后点击[您的姓名]。接下来,选择i

作为一个技术博主,了不起比较喜欢各种折腾,之前给大家介绍过ChatGPT接入微信,钉钉和知识星球(如果没看过的可以翻翻前面的文章),最近再看开源项目的时候,发现了一个ChatGPTWebUI项目。想着刚好之前没有将ChatGPT接入过WebUI,有了这个开源项目可以拿来使用,真是不错,下面是实操的安装步骤,分享给大家。安装官方在Github的项目文档上提供了很多中的安装方式,包括手动安装,docker部署,以及远程部署等方法,了不起在选择部署方式的时候,一开始为了简单想着

react启动项目报错的解决办法:1、进入项目文件夹,启动项目并查看报错信息;2、执行“npm install”或“npm install react-scripts”命令;3、执行“npm install @ant-design/pro-field --save”命令。

IDEA(IntelliJIDEA)是一款强大的集成开发环境,可以帮助开发人员快速高效地开发各种Java应用程序。在Java项目开发中,使用Maven作为项目管理工具能够帮助我们更好地管理依赖库、构建项目等。本文将详细介绍如何在IDEA中创建一个Maven项目的基本步骤,同时提供具体的代码示例。步骤一:打开IDEA并创建新项目打开IntelliJIDEA

从零开始,快速上手PyCharm项目打包技巧概述:在Python开发中,将项目打包成可执行文件是非常重要的一步。它可以方便地分享和分发项目,而无需安装Python解释器和依赖包。PyCharm作为一个功能强大的Python集成开发环境,提供了快速上手项目打包的技巧和工具。本文将介绍如何利用PyCharm从零开始打包你的Python项目,并提供具体的代码示例。

利用PyCharm轻松打包项目:简单操作让你的代码成为独立应用引言:在Python的开发过程中,我们经常会使用一些外部库和模块来帮助我们实现功能。但是当我们将代码分享给其他人使用时,他们可能没有安装我们使用的这些库和模块,导致无法正常运行代码。为了解决这个问题,我们可以使用PyCharm提供的打包工具,将我们的代码和依赖项一起打包成一个独立的应用程序,让其他


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Dreamweaver CS6
Visual web development tools

ZendStudio 13.5.1 Mac
Powerful PHP integrated development environment

Safe Exam Browser
Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.

PhpStorm Mac version
The latest (2018.2.1) professional PHP integrated development tool
