全国咨询热线:18720358503

小程序界面设计模板_在 Vue 项目中引入 tinymce 富

类别:行业新闻 发布时间:2021-01-08 浏览人次:

在 Vue 项目中引入 tinymce 富文本编辑器的完整代码       这篇文章主要介绍了在 Vue 项目中引入 tinymce 富文本编辑器的实例代码,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下

项目中原本使用的富文本编辑器是 ,这是一个很轻量、简洁编辑器

但是公司的业务升级,想要一个功能更全面的编辑器,我找了好久,目前常见的编辑器有这些:

:百度前端的开源项目,功能强大,基于 jQuery,但已经没有再维护,而且限定了后端代码,修改起来比较费劲

:微型,易用,小而美,只是 Bootstrap + jQuery...

:功能强大,代码简洁,需要配置后台,而且好久没见更新了

:轻量、简洁、易用,但是升级到 3.x 之后,不便于定制化开发。不过作者很勤奋,广义上和我是一家人,打个call

:本身功能不多,不过可以自行扩展,api 也很好懂,如果能看懂英文的话...

:没深入研究,UI挺漂亮,也是一款小而美的编辑器,可是我需要大的

在有这么参考的情况下,我最终还是选择了 这个不搭梯子连官网都打不开的编辑器(简直是自讨苦吃),主要因为两点:

1. GitHub 上星星很多,功能也齐全;

2. 唯一一个从 word 粘贴过来还能保持绝大部分格式的编辑器;

3. 不需要找后端人员扫码改接口,前后端分离;

4. 说好的两点呢!

一、资源下载

tinymce 官方为 vue 项目提供了一个组件

npm install @tinymce/tinymce-vue -S

在 vscode、webstorm 的终端运行这段代码可能会报错,最好使用操作系统自带的命令行工具

如果有购买 tinymce 的服务,可以参考 tinymce-vue 的说明,通过 api-key 直接使用 tinymce

像我这样没购买的,还是要老老实实下载 tinymce

npm install tinymce -S

安装之后,在 node_modules 中找到 tinymce/skins 目录,然后将 skins 目录拷贝到 static 目录下

// 如果是使用 vue-cli 3.x 构建的 typescript 项目,就放到 public 目录下,文中所有 static 目录相关都这样处理

tinymce 默认是英文界面,所以还需要下载一个中文(记得搭梯子!搭梯子!搭梯子!)

然后将这个语言包放到 static 目录下,为了结构清晰,我包了一层 tinymce 目录

二、初始化

在页面中引入以下文件

import tinymce from 'tinymce/tinymce'
import 'tinymce/themes/modern/theme'
import Editor from '@tinymce/tinymce-vue'

tinymce-vue ponents 中注册,然后直接使用

这里的 init 是 tinymce 初始化配置项,后面会讲到一些关键的 api,完整 api 可以参考

编辑器需要一个 skin 才能正常工作,所以要设置一个 skin_url 指向之前复制出来的 skin 文件

init: {
 language_url: '/static/tinymce/zh_CN.js',
 language: 'zh_CN',
 skin_url: '/static/tinymce/skins/lightgray',
 height: 300
}

// vue-cli 3.x 创建的 typescript 项目,将 url 中的 static 去掉,即 skin_url: '/tinymce/skins/lightgray'

同时在 mounted 中也需要初始化一次:

如果在这里传入上面的 init 对象,并不能生效,但什么参数都不传也会报错,所以这里传入一个空对象

三、扩展插件

完成了上面的初始化之后,就已经能正常运行编辑器了,但只有一些基本功能

tinymce 通过添加插件 的方式来添加功能

比如要添加一个上传图片的功能,就需要用到 image 插件,添加超链接需要用到 link 插件

同时还需要在页面引入这些插件:

添加了插件之后,默认会在工具栏 toolbar 上添加对应的功能按钮,toolbar 也可以自定义

贴一下完整的组件代码:

 template 
 div 
 h1 tinymce /h1 
 editor id='tinymce' v-model='tinymceHtml' :init='init' /editor 
 div v-html='tinymceHtml' /div 
 /div 
 /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

是一个对象,包含上传文件的信息:

总结

以上所述是小编给大家介绍的在 Vue 项目中引入 tinymce 富文本编辑器的完整代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对凡科网站的支持!


推荐阅读

小程序界面设计模板_在 Vue 项目中引入 tinymce 富

在 Vue 新项目中引进 tinymce 富文字编写器的详细编码 本文关键详细介绍了在 Vue 新项目中引进 tinymce 富文字编写器的案例编码,十分非常好,具备一定的参照效仿使用价值,必须的朋...

2021-01-08
网站建设之怎样判断一个好的域名

企业网站建设之如何分辨一个好的网站域名创作者:1.好记的网站域名假如一个喜爱你网站的网民,电脑上电脑硬盘坏了遗失了个人收藏夹里全部的网站地址,或是在别人设备上网上,也...

2021-01-08
前端知识:如何上传下载CSS滤镜和混合模式处理

第一、应用CSSps滤镜和混和方式线上凡科抠图应用CSSps滤镜和混和方式能够完成各种各样各种各样的图象解决实际效果,比如CSSgram新项目,内嵌诸多图象解决实际效果,一部分实际效果...

2021-01-08
广州凡科互联网科技股份有限公司招聘资深策划

招聘人数:12职位信息1、商户的营销定位、整体推广计划与方案,线上及线下活动项目方案策划撰写;2、负责商户品牌营销方案撰写;品牌宣传文案撰写;3、负责社会化媒体平台(微博...

2021-01-08
设计网站时网站的简洁清晰广州网站建

企业设计方案网站时网站的简约清楚。关键主要表现在下边几层面。设计方案应简约强有力是客户浏览网站数最多,检索模块百度收录网页页面的通道。要为中后期的SEO营销推广提升出...

2021-01-08
针对IOS和Android的 App应用推广的报价技巧

【引言】在全部App开发设计之中,App营销推广是在App开发设计进行后的一个关键阶段,但营销推广的实际效果立即关联到这一App的生死存亡,一个好的营销推广会将一个一般的App推上高...

2021-01-08
X

400-8700-61718720358503
企业邮箱2639601583@qq.com
官方微信