Building a CRM Messaging System with Vue.js and TinyMCE
summary
Demo builds a working CRM messaging editor inside a Vue app by installing the TinyMCE Vue package, wiring TinyMCE into a text area, and using a live Windsurf agent to run npm, add plugins, and edit files. The AI adds a bottom toolbar, groups formatting buttons, and installs a merge tags plugin with customer and account representative token lists; the editor renders and the live edits apply successfully.
AI-written summary · about
chapters (16)
- 0:00Introduction
- 1:46TinyMCE and project goal
- 3:10Generative AI applications
- 5:21AI in coding workflows
- 10:39AI agents and role
- 18:30AI vs traditional coding
- 19:55TinyMCE in Vue.js setup
- 21:21Windsurf AI for debugging
- 26:40TinyMCE plugins setup
- 28:09Editor layout customization
- 30:16Toolbar groups and icons
- 32:29Merge tags for emails
- 36:30Summary and pitch
- 37:13Q&A: TinyMCE with Vue.js
- 37:56Q&A: Windsurf AI comparison
- 39:03Q&A: AI for tests
related talks
15mExplore TinyMCE: From OS to ChatGPT AI Assistant with Vue
30mVue Crash Course: What Can You Build in 20 Minutes?
31mHow to build an MCP server for Vue?
55mLessons Learned from Crafting a Thriving vue.js SAAS App
42mStress-free Testing for Vue
26mTest Driving Vue 3
04mLightning Fast AI Chatbots in Nuxt
44mUnleashing the Power of AI: Integrating Tiptap, OpenAI, and Vue.js