vue2使用TinyMCE本地化

2024-11-02

Vue集成tinymce富文本编辑器并实现本地化指南（2019.11.21最新）

tinymce是一款综合口碑特别好.功能异常强大的富文本编辑器,在某些网站,甚至享有"宇宙最强富文本编辑器"的称号.那么,在Vue项目中如何集成呢?这并不困难,只需要参照官方教程即可.难点在于如何将默认的英文本地化为中文. 本人参考了众多网络资料进行本地化,竟发现没有一篇文章能够完全走通,并且各个教程显得极其繁琐.因此重新参考官方教程,反复实践,终究得以攻克.最终的方案较为简洁,基于官方包较为可靠.现将配置的细节.一些关键的要点分享如下. 本文使用的版本:tinymce-vue

2.0 vue2+tinymce实现图片上传与回显

1.效果 2.配置 2.1 在init中添加图片上传函数 // 图片上传 images_upload_handler: (blobInfo, success, failure) => { // const img = 'data:image/jpeg;base64,' + blobInfo.base64() // success(img) if(blobInfo.blob().size/1024/1024>2){ failure("上传失败,图片大小请控制在 2M 以内")

关于我开发tinymce的自由表单、病历插件这件事

项目地址:https://gitee.com/zhao-xuhang/tinymce 1.前期准备这是个vue2项目所以要使用vue-cli (虽然开发tinymce插件和这个没关系) 1. 使用npm安装下面的依赖 1 "@packy-tang/vue-tinymce": "^1.1.2", 2 "@tinymce/tinymce-vue": "^3.2.8", 3 "tinymce": "^

基于vue2.0+vuex+localStorage开发的本地记事本

本文采用vue2.0+vuex+localStorage+sass+webpack,实现一个本地存储的记事本.兼容PC端和移动端.在线预览地址:DEMO github地址:https://github.com/lin-xin/notepad demo地址:http://test.omwteam.com/ 功能说明支持回车添加事件支持事件状态切换添加事件 -> 进入未完成列表未完成 -> 已完成(勾选checkbox) 未完成 -> 已取消(点击取消按钮) 已完成 -> 未完

TinyMCE插件：RESPONSIVE filemanager 9 安装与配置

RESPONSIVE filemanager 功能: 文件上传文件下载重命名文件删除文件新建文件夹为每个用户创建子目录上传文件效果图: 浏览文件效果图: 文件说明: filemanager(核心程序文件),放入TinyMCE的Plugins(插件)文件中 source(文件上传文件夹),放在任意位置,配合$upload_dir路径一起使用 thumbs(缩略图文件夹),放在任意位置,缩略图会自己生成,配合$thumbs_base_path路径一起使用 tinymce/plugins/

vue2.0与vue3.0项目创建

脚手架安装与卸载安装 npm install -g vue-cli //or npm install -g @vue/cli 卸载 npm uninstall -g vue-cli //or npm uninstall -g @vue/cli 桥接工具 npm install -g @vue/cli-init vue项目创建 vue 2.0 项目创建 vue init webpack projectname vue 3.0 项目创建 vue create projectname 运行项目 cd

vue2.0实践的一些细节

最近用vue2.0做了个活动.做完了回头发现,好像并没有太多的技术难点,而自己好像又做了比较久...只能说效率有待提升啊...简单总结了一些比较细节的点. 1.对于一些已知肯定会有数据的模块,先用一个有高度的元素占位,不然当数据加载好渲染的时候会出现跳动的感觉.可以这样写: <div class="yhq_inner"> //占位元素 <template v-if="true"> //加template则页面加载时就不会显示待编译符号如:{{

ABP文档 - 本地化

文档目录本节内容: 简介应用语言本地化源 XML文件注册XML本地化源 JSOn文件注册JSON本地化源资源文件自定义源获取一个本地文本在服务端在MVc控制器里在MVC视图里在Javascript里格式化参数默认本地化源扩展本地化源获取语言最佳实践简介任何应用至少有一种用户界面语言,很多应用有多种,ABP为一个应用提供了一个灵活的本地化系统. 应用语言第一件事就是声明支持哪些语言,这在你的模块的PreInitialize方法里完成,如下所示: Config

JQuery 复制粘贴上传图片插件（textarea 和 tinyMCE）

开源地址:https://github.com/yuezhongxin/paste-upload-image.js 支持 Ctrl+C/Ctrl+V 上传,支持拖拽上传,也支持 QQ/微信截图上传. textarea使用(返回markdown格式的图片): <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8" /> <scrip

用FSM一键制作逐帧动画雪碧图 Vue2 + webpack

因为工作需要要将五六十张逐帧图拼成雪碧图,网上想找到一件制作工具半天没有找到,就自己用canvas写了一个. 写成之后就再没有什么机会使用了,因此希望有人使用的时候如果遇到bug了能及时反馈给我. 最近用vue2 + webpack重新构建了下,代码量挺简洁的,逻辑也很简单,适合新手看看,顺便求几个star 项目名称: FrameSpriteMaker 简称 FSM github项目地址:https://github.com/pspgbhu/FrameSpriteMaker-vue

JS魔法堂:不完全国际化&本地化手册之理論篇

前言最近加入到新项目组负责前端技术预研和选型,其中涉及到一个熟悉又陌生的需求--国际化&本地化.熟悉的是之前的项目也玩过,陌生的是之前的实现仅仅停留在"有"的阶段而已.趁着这个机会好好学习整理一下,为后面的技术选型做准备. 本篇将阐述国际化和本地化的概念,以及其中一个很重要的概念--Language tag(也叫Language code 或 Culture). 何为国际化? 国际化我认为就是应用支持多语言和文化习俗(数字.货币.日期和字符比较算法等),而本地化则是应用

vue2.0构建淘票票webapp

项目描述之前一直用vue1.x写项目,最近为了过渡到vue2.0,特易用vue2.0栈仿写了淘票票页面,而且加入了express作为后台服务. 前端技术栈:vue2.0 + vue-router + vuex + mint-ui 后台技术栈:nodejs + express 项目地址:https://github.com/canfoo/vue2.0-taopiaopiao 废话先不多说,先晒晒预览效果,过过瘾: 项目架构本项目采用vue2.0栈构建前端页面,采用expre

一步一步使用ABP框架搭建正式项目系列教程之本地化详解

返回总目录<一步一步使用ABP框架搭建正式项目系列教程> 本篇目录扯扯本地化 ABP中的本地化小结扯扯本地化本节来说说本地化,也有叫国际化.全球化的,不管怎么个叫法,反正道理都是一样的,就是一个系统具有选择多种语言的能力.比如,我们用的电脑或手机,可以在设置中选择语言,但是这并不影响系统已经具有的功能,只是显示的文字变成你所选语言的文字了.再比如说微信,功能设置里面也能选择语言,比如你选择的是英语,那么我们在中文看到的朋友圈就变成了"Moments". 想要更详细地

ABP源码分析十二：本地化

本文逐个分析ABP中涉及到locaization的接口和类,以及相互之间的关系.本地化主要涉及两个方面:一个是语言(Language)的管理,这部分相对简单.另一个是语言对应得本地化资源(Localization)的管理,这部分稍显复杂. LanguageInfo:用于封装language的基本信息. ILanguageProvider:接口定义一个返回本地化语言集合的方法.这里使用接口做隔离是有必要的,因为ABP底层框架的DefaultLanguageProvider只是返回通过代码hardc

ABP源码分析四十三：ZERO的本地化

ABP Zero模块扩展了ABP基础框架中的本地化功能,实现了通过数据库管理本地化的功能.其通过数据库保存本地化语言及其资源. ApplicationLanguage:代表本地化语言的实体类.一种语言就是一个ApplicationLanguage实例. ApplicationLanguageProvider:实现了ILanguageProvider接口,通过IApplicationLanguageManager实例设置DefaultLanguage和获取应用所配置的Language的列表. Ap

Vuex2.0+Vue2.0构建备忘录应用实践

一.介绍Vuex Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化,适合于构建中大型单页应用. 1.什么是状态管理模式? 看个简单的例子: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content=&q

一步步构造自己的vue2.0+webpack环境

前面vue2.0和webpack都已经有接触了些(vue.js入门,webpack入门之简单例子跑起来),现在开始学习如何构造自己的vue2.0+webpack环境. 1.首先新建一个目录vue-wkdemo,这是我们的项目目录.执行 npm init 命令生成package.json文件.执行npm init之后,会提示你填写一些项目的信息,一直回车默认就好了,或者直接执行 npm init -y 直接跳过询问步骤. 2.安装项目依赖项 npm install webpack webpack-

ASP.NET MVC5+EF6+EasyUI 后台管理系统（30）-本地化(多语言)

系列目录我们的系统有时要扩展到其他国家,或者地区,需要更多的语言环境,微软提供了一些解决方案,原始我们是用js来控制的,现在不需要了. 我们只要创建简单的资源文件,通过MVC的路由设置就可以轻松的进行语言中的切换. 本节受益于:Asp.net MVC3 高级编程第121页.大家可以自行百度这本书,这应该是国内第一本中文版的MVC3.0教程现在从项目入手吧(本节也适合其他MVC程序),新建一个语言项目来放资源文件. 一.新建App.Lang,同时新建BaseRes.resx和BaseRes.e

ASP.NET Core 中文文档第三章原理（6）全球化与本地化

原文:Globalization and localization 作者:Rick Anderson.Damien Bowden.Bart Calixto.Nadeem Afana 翻译:谢炀(Kiler) 校对:许登洋(Seay).高嵩使用 ASP.NET Core 创建一个多语言版本的网站有助于你吸引到更多的用户,ASP.NET Core 提供服务和中间件来支持本地化语言和文化. 国际化涉及全球化和本地化.全球化是为了应用程序支持不同文化而设计的.全球化增加了对特定地理区域的语言文字

JS魔法堂:不完全国际化&本地化手册之实战篇

前言最近加入到新项目组负责前端技术预研和选型,其中涉及到一个熟悉又陌生的需求--国际化&本地化.熟悉的是之前的项目也玩过,陌生的是之前的实现仅仅停留在"有"的阶段而已.趁着这个机会好好学习整理一下,为后面的技术选型做准备. 本篇将于大家一起挽起袖子撸代码:) 如何获取Language tag? 在实现本地化处理前,我们起码先要获取Language tag吧?那么获取方式分为两类 1.直接获取浏览器的Language tag信息一般来说浏览器语言的版本标示着用户所属或

vue2使用TinyMCE本地化

热门专题