tinymce富文本编辑器在vue-typescript-admin-template中的使用及中文字体的设置

最新推荐文章于 2024-09-13 22:52:27 发布
最新推荐文章于 2024-09-13 22:52:27 发布
阅读量1.1k 收藏
点赞数
文章标签： typescript javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43228674/article/details/108276636
版权

vue-typescript-admin-template集成了tinymce富文本编辑器，demo为链如下：
vue-typescript-admin-template中的tinymce

组件在项目中的路径如下：
tinymce在项目中的路径
在页面中使用，可以加入下面几行代码引入组件：
引入tinymce
然后，在vue文件中直接引入就可以啦！

重点来啦！！那就是怎样设置中文字体！

1、打开tinymce组件中的index.vue文件（位置见图1）
2、找到 initOptions函数，添加下图中的font_formats属性。
3、等号前面的是显示在tinymce前端的字体选择， 等号后端是系统识别后设置的字体。

千万别傻傻的直接这样想当然的写上中文汉字，这样系统是识别不了哒。要根据CSS中的字体对应设置哦
在这里插入图片描述

weixin_43228674
关注
手摸手，带你用vue撸后台
代码青春
08-22 970
手摸手，带你用vue撸后台 手摸手，带你用 vue 撸后台 系列一（基础篇） 手摸手，带你用 vue 撸后台 系列二(登录权限篇) 手摸手，带你用 vue 撸后台 系列三 (实战篇) 手摸手，带你用 vue 撸后台 系列四(vueAdmin 一个极简的后台基础模板) 手摸手，带你用 vue 撸后台 系列五(v4.0 新版本) 手摸手，带你封装一个 vue component 手...
vue-element-admin使用tinymce富文本编辑器
qq_20649143的博客
05-10 8464
vue-element-admin使用tinymce富文本编辑器新手使用tinymace富文本编辑器的历程 新手使用tinymace富文本编辑器的历程 环境：vue-element-admin 1、安装tinymce-vue npm install @tinymce/tinymce-vue -S 2、下载tinymce npm install tinymce -S 3、下载完可以先在public下面建个目录tinymce，下载tinymce完成后在node_modules 中找到 tinymce/ski
vue-typescript-admin-template-master_vue_
09-30
采用vue+ts+html5+css3开发的后台管理系统模版
富文本编辑器在facebox弹框不显示_快来pick你心目中的JavaScript富文本编辑器吧
weixin_42398386的博客
01-18 131
全文共2099字，预计学习时长4分钟也许，你时常会遇到要开发基于Web的文本编辑器的情况。有时候，只需实现一个简约且轻量级的应用程序，不必有其他任何不必要的功能。而有时候，你的首要任务是保护用户的商业机密。在这样的情况下，如果想知道“背后发生了什么”，最好是从头开始创建应用程序。所幸，可采取的解决方案有很多。因此，总能找到一种工具，来创建符合用户需求和资金要求的在线文本编辑器。本文将简要...
Vue Typescript Admin 模板常见问题解决方案
最新发布
gitblog_07461的博客
09-13 302
Vue Typescript Admin 模板常见问题解决方案 vue-typescript-admin-template ???? A vue-cli 3.0 + typescript minimal admin template 项...
vue element admin、vue 使用富文本编辑器（Tinymce）(实现汉化)
Codernmx
03-06 3095
当时要实现这个 功能的时候，不知道 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 有这个就可以直
element admin 动态路由_vue-typescript-admin-template开源后台前端解决方案
weixin_39616348的博客
11-21 477
简介vue-typescript-admin-template 是一个后台前端解决方案，它基于 vue, typescript 和 element-ui实现。原始的 Javascript 版本的代码是由 PanJiaChen 开发维护的 vue-element-admin。github 地址：https://github.com/Armour/vue-typescript-admin-templa...
vue-tinymce 富文本编辑器自定义图片上传
11-24
vue-tinymce 封装了el-upload 控件，支持富文本编辑器自定义图片上传整合。 复制到vue的src/components文件夹下 详情博文介绍见：https://xingyun.blog.csdn.net/article/details/102492921
在 Vue 项目中引入 tinymce 富文本编辑器的完整代码
08-27
在 Vue 项目中引入 tinymce 富文本编辑器的完整代码 在 Vue 项目中引入 tinymce 富文本编辑器需要完成以下几个步骤：资源下载、初始化、扩展插件。 资源下载 首先，需要下载 tinymce 的 Vue 组件 tinymce-vue，...
Vue使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)
10-15
主要介绍了Vue项目中使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)的相关知识，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以...
vue-tinymce-editor Vue2的Tinymce编辑器组件。-Vue.js开发
05-27
可以在此页面中查看演示和示例：演示和示例安装$ npm install vue-tinymce-editor如何使用从'vue'导入import Vue从'vue-tinymce-editor'导入tinymce Vue.component（'tinymce'， tinymce）您可以在标记中使用该组件 ...
vue-typescript-admin-element-ui:基于Vue + typescript版的后台管理系统模板
03-11
掘金博客： ://juejin.im/user/579570d679bc44006638c738/posts vue-typescript-admin-element-ui 基于Vue + typescript版的后台管理系统模板。 项目预览 分享不易，喜欢的话一定别忘了点 :sparkling_heart: 只关注不点 :sparkling_heart:的都是耍流氓 只收藏也不点 :sparkling_heart:的也一样是耍流氓。 简介 ts香不香这里我就不做过多吹捧了，基础有比较清晰的介绍，本篇博客主要分享Vue + typescript + element-ui，后台管理系统实战篇。 简单来说，ts属于强类型语言，它的优势在于静态类型检查，概括来说主要包括以下几点： 静态类型检查 IDE智能提示 代码重构 杰出性 一，技术栈 打字稿 vue-cli 3.x + 纱 萨斯 元素用户界面 威克斯 ... 二，项目说明 yarn install //依赖安装 yarn run
vue_typescript-admin
10-21
目前Vue CLI已经内置了TypeScript工具支持。在3.X未来的的计划中，也会增加对TypeScript更多的支持。
vue-typescript-admin-mock-server:for vue-typecript-admin-template项目的模拟服务器
04-29
Vue TypeScript管理模拟服务器 项目的模拟服务器 演示链接 （由vue-typecript-admin-template使用） 概述 此项目中api文件夹下的javascript代码是从的打字稿源代码生成的（通过在此目录中运行tsc命令）。 唯一的手动更改是将mock-server.js重命名为index.js 。 昂首阔步 网址架构基于并遵循REST API标准。 info: { name: 'Mock API', description: 'Mock API for vue-typescript-admin-template.', version: '1.0.0' }, paths: { get: [ '/mock-api/v1/articles', '/mock-api/v1/articles/:id', '/mock-api/
tinymce富文本编辑器中文语言包
10-15
tinymce中文语言包，在项目中引入后，需要设置初始化参数：language: 'zh_CN'即可。
vue-admin-template：基于element-vue-admin的框架进行改造的一个viue前端开发框架
02-14
构建设置 # 进入项目目录 cd vue-admin-template # 安装依赖 npm install # 建议不要直接使用 cnpm 安装以来，会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题 npm install --registry=https://registry.npm.taobao.org # 启动服务 npm run dev 浏览器访问 发布 # 构建测试环境 npm run build:stage # 构建生产环境 npm run build:prod 其他 # 预览发布环境效果 npm run preview # 预览发布环境效果 + 静态资源分析 npm run preview -- --report # 代码格式检查 npm run lint # 代码格式检查并自动修复 npm run lint -- --fix
vue-typescript-admin-template后台管理系统
hsany330的专栏
04-02 3444
前言 之前都是用2.9.6@vue-cli写的【音乐博客】 因为vue-cli@3.0早早就发布了，怕到时候面试的时候问到不懂，略显尴尬，所以趁着有空余的时间来学习学习 刚好也可以将项目升级一下，用下大佬写的框架 四个方面 1.升级vue-cli到3.0以上版本 Vue CLI 的包名称由 vue-cli 改成了 @vue/cli 因为我电脑的vue-cli是2.9.6版本，所以需要卸载然后重新安装新版本 卸载vue-cli： npm unins...
Vue-TypeScript-Admin-Template: 强大的前端管理模板，助力高效开发
gitblog_00078的博客
03-21 483
Vue-TypeScript-Admin-Template: 强大的前端管理模板，助力高效开发 vue-typescript-admin-template???? A vue-cli 3.0 + typescript minimal admin template项目地址:https://gitcode.com/gh_mirrors/vu/vue-typescript-admin-template 项目...
探索现代后台界面新纪元：Vue TypeScript Admin Template
gitblog_00215的博客
08-09 497
探索现代后台界面新纪元：Vue TypeScript Admin Template vue-typescript-admin-template???? A vue-cli 3.0 + typescript minimal admin template项目地址:https://gitcode.com/gh_mirrors/vu/vue-typescript-admin-template 随着前端技术的蓬...
Vue中集成Tinymce富文本编辑器指南
资源摘要信息: "在Vue中使用TinyMCE富文本编辑器" 在Web开发领域中，富文本编辑器允许用户在网页上进行所见即所得的文字排版，插入图片、链接和其他多媒体元素。TinyMCE是一个流行的富文本编辑器，它以插件形式提供...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值