踩坑指南——Vue element admin 自带的富文本编辑器Tinymce语言设置

最新推荐文章于 2024-03-15 17:14:49 发布
最新推荐文章于 2024-03-15 17:14:49 发布
阅读量1k 收藏 2
点赞数 3
分类专栏： VUE Tinymce 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47447250/article/details/118418007
版权

问题：菜单栏等内容默认为英文状态
在此之前也看了很多博主的方法，但经本人实际验证无效，方法实际是没问题的，但漏掉了一步最关键的修改
在这里插入图片描述
操作如下：
由于我的项目使用的是vue-element-admin,默认在src/main.js中就注册使用了elementui组件，所以此步骤省略
1.文件路径:：src/components/Tinymce/index.vue在这里插入图片描述
2.文件路径：src/store/getters.js
在这里插入图片描述
3.文件路径：src/store/modules/app.js
在这里插入图片描述
最终修改效果如下：
在这里插入图片描述

戴草帽的太阳
关注
  • 3
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
VUE整合富文本编辑器Tinymce
01-07
一、Tinymce可视化编辑器 参考 https://panjiachen.gitee.io/vue-element-admin/#/components/tinymce https://panjiachen.gitee.io/vue-element-admin/#/example/create 二、组件初始化 Tinymce是一个传统javascript插件，默认不能用于Vue.js因此需要做一些特殊的整合步骤 1、复制脚本库 将脚本库复制到项目的static目录下（在vue-element-admin-master的static路径下） 2、配置html变量 在 guli-admin/b
vue-element-admin使用Tinymce富文本插件的踩坑填坑
Queen-Shir的博客
07-29 6588
vue-element-admin项目的作者已经封装好了Tinymce富文本组件，我直接在Git上下载demo运用到自己项目里。 这是Git地址：https://github.com/PanJiaChen/vue-element-admin 一、Bug描述： （组件的代码和demo基本一致的前提下）我在编辑弹窗里引用了Tinymce富文本组件，如下图，table的每条数据都有一个“修改”按钮，每次点击“修改”按钮，则弹窗里显示该行对应的HTML。可是从第二次开始每次富文的内容都和第一次的一样，按道理不
VUE tinymce editor 配置手册-封装组件
m0_37588079的博客
03-15 963
封装的完整组件代码：tinymce-editor。
vue element admin、vue 使用富文本编辑器（Tinymce）(实现汉化)
Codernmx
03-06 2916
当时要实现这个 功能的时候，不知道 element admin 直接内置了 富文本编辑框，还想着自己去找一个来着，后面看了element admin 官网才发现Tinymce 这个玩意儿是可以直接拿来用的，还是很方便 官网：https://panjiachen.gitee.io/vue-element-admin-site/zh/feature/component/rich-editor.html#%E5%B8%B8%E8%A7%81%E5%AF%8C%E6%96%87%E6%9C%AC 有这个就可以直
【vue-element-admin】--tinymce富文本编辑器的使用
u013998349的博客
12-22 2598
【vue-element-admin】--tinymce富文本编辑器的使用参考资料一、安装tinymce二、使用步骤1.汉化 - //public/tinymce/langs2.封装组件 - //src/components/tinymce/index.vue3.注册及使用组件 - //views/...vue4.实现多图上传功能 - //public/tinymce/axupimgs 参考资料 https://www.cnblogs.com/huihuihero/p/13877589.html 中文文
vue-element-admin使用tinymce富文本编辑器
tianynnb的博客
08-23 554
添加链接描述
vue-element-admin 切换中文版
热门推荐
墨墨碳的博客
06-10 1万+
随便用一个组件都是英文，真是爽的不要不要的 网上找的解决方案： 可以把下载的vue-element-admin切换带到i18n的分支上面 切换到 i18n 的分支 git checkout i18n 查看当前分支 git branch -vv 以上的方法虽然可以解决，但是不必这么麻烦 最终解决方案 在main.js中找到这两处代码注释即可 //import enLang from 'element-ui/lib/locale/lang/en' Vue.use(Element, { size:
vue-element-admin中的分页插件如何变成中文
nyasm的博客
03-28 912
vue-element-admin中的分页插件如何变成中文 在main.js中我们可以这样两行代码 //set ElementUI lang to EN Vue.use(ElementUI, { locale }) 说明组件默认是英文的，en 我们写成这样就是中文的了 Vue.use(ElementUI) just like that ...
Tinymce富文本编辑器的使用及中文语言包的使用
weixin_48969871的博客
06-19 4959
Tintmce 富文本编辑器
tinycore 中文支持
qinscx的专栏
10-17 3926
这两天在弄tinycore，想用它来搭个小系统出来。 下载最新的CorePlus-current.iso  4.5.2，用开源的usb的安装工具core2usb-1.6.exe将它安装到u盘，然后接上台式机上，开机从u盘启动，一切顺利。好，开始搞起！ tinycore官方提供了很多做好的扩展包，rdesktop，openssh，samba等等，右键app，再浏览，搜一下就可以找到，熟悉的环境很
如何实现tinymce多语言的切换
byebukesi的博客
11-17 667
实现tinymce多语言切换
tinymce的使用，中文语言包配置
05-24
NULL 博文链接：https://fdj32.iteye.com/blog/368276
TinyMCE3.0.8简体中文字体修改版
03-01
博文链接：https://lkfnn.iteye.com/blog/195295
在 Vue 项目中引入 tinymce 富文本编辑器的完整代码
08-27
主要介绍了在 Vue 项目中引入 tinymce 富文本编辑器的实例代码,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
Vue+Element使用富文本编辑器的示例代码
08-29
本篇文章主要介绍了Vue+Element使用富文本编辑器的示例代码，具有一定的参考价值，有兴趣的可以了解一下
Vue+Webpack完美整合富文本编辑器TinyMce的方法
12-02
选择一个合适的富文本编辑器对于一个前端项目至关重要，这次我基于Vue来开发我项目中的前端部分，经过权衡选择了tinymce。其在UI，功能都很适合，tinymce官方文档：点击打开链接； 引入tinymce 我选用的版本4.7.4 ...
vue-tinymce 富文本编辑器自定义图片上传
11-24
vue-tinymce 封装了el-upload 控件，支持富文本编辑器自定义图片上传整合。 复制到vue的src/components文件夹下 详情博文介绍见：https://xingyun.blog.csdn.net/article/details/102492921
node-v10.22.0-darwin-x64.tar.xz
最新发布
05-03
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
基于JAVA的物流管理系统的源码设计与实现.zip
05-03
毕业设计-->物流管理系统的设计与实现（Java版本） 采用Struts2+hibernate+Oracle10g+Tomcat 涉及车辆管理，配送点管理，运输方式管理，订单管理，员工管理，用户管理，部门管理，权限管理，角色管理等基础管理功能。
vue3富文本编辑器tinymce
09-14
Vue 3中有很多富文本编辑器的选择，其中一个常用的是TinyMCE。要在Vue 3中使用TinyMCE富文本编辑器，可以按照以下步骤进行： 1. 首先，使用npm或者yarn安装TinyMCE编辑器依赖包： ``` npm install tinymce ``` 2. 在Vue组件中引入需要的TinyMCE编辑器资源文件。有多种方式可以引入，这里以CDN引入为例： ```html <script src="https://cdn.jsdelivr.net/npm/tinymce@5"></script> ``` 3. 创建一个Vue组件，并在其中添加一个textarea元素作为编辑器容器： ```html <template> <div> <textarea id="my-editor"></textarea> </div> </template> ``` 4. 在Vue组件的`mounted`钩子函数中初始化TinyMCE编辑器，并指定其选项和回调函数： ```javascript <script> import { onMounted } from 'vue'; export default { mounted() { onMounted(() => { tinymce.init({ selector: '#my-editor', height: 500, plugins: 'advlist autolink lists link image charmap print preview anchor', toolbar: 'undo redo | formatselect | bold italic backcolor | \ alignleft aligncenter alignright alignjustify | \ bullist numlist outdent indent | removeformat | help', setup: (editor) => { editor.on('change', () => { this.$emit('input', editor.getContent()); }); }, }); }); }, }; </script> ``` 这里的选项和回调函数可以根据实际需要进行配置，你可以根据TinyMCE的文档来设置更多的选项。 5. 最后，在使用该组件的父组件中，可以通过`v-model`来双向绑定富文本编辑器的内容： ```html <template> <div> <RichTextEditor v-model="content" /> <div> <h3>输出的内容：</h3> <div v-html="content"></div> </div> </div> </template> <script> import RichTextEditor from './RichTextEditor.vue'; export default { components: { RichTextEditor, }, data() { return { content: '', }; }, }; </script> ``` 这样，就可以在Vue 3中使用TinyMCE富文本编辑器了。希望对你有所帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值