vue项目中使用tinymce编辑器的步骤详解


Posted in Javascript onSeptember 11, 2018

Tinymce富文本也是一款很流行编辑器

          把文件放在static下,然后在index.html文件中引入这个文件

<script src="static/tinymce/tinymce.min.js"></script>
<tinymce :height=200 ref="editor" v-model="editForm.fdcNote"></tinymce>

         在其他子文件中引入这个

import tinymce from '../components/Tinymce';
 components: {
 tinymce
 },

然后就可以调用起这个组件了。

下面看下vue项目中使用tinymce编辑器的方法,具体内容如下所示:

第一步:npm install tinymce -S

第二步:创建组件

//增加模版
<template>
 <div>
  <textarea :value="value"></textarea>
 </div>
</template>
//在script中引入
import tinymce from "tinymce/tinymce";
import "tinymce/themes/modern/theme";
import "tinymce/plugins/paste";//这个到最下面那个为需要使用的工具栏模块
import "tinymce/plugins/link";
import "tinymce/plugins/lists";
import "tinymce/plugins/image";
import "tinymce/plugins/contextmenu";
import "tinymce/plugins/wordcount";
import "tinymce/plugins/colorpicker";
import "tinymce/plugins/textcolor";
import "tinymce/plugins/media";

第三步:对tinymce进行个性化配置

tinymceinit() {
   const _this = this;
   const setting = {
    selector: "#tinymce",
    language: "zh_CN",//语言设置中文
    menubar: false,//去除文件栏
    branding: false,//去除右下角的'由tinymce驱动'
    elementpath: false,//左下角的当前标签路径
    content_css: ["css文件路径"],//对编辑器内部需要的一些样式
    language_url: "zh_CN.js文件的路径",//导入中文语言文件
    skin_url: "../../../static/skins/lightgray",//在node_modules中tinymce文件夹中
    setup: function(editor) {//设置自定义功能的按钮
     editor.addButton("uploadimg", {//单个按钮,此处的uploading是该按钮的名称
      icon: "image",  //显示的图像
      tooltip: "上传图片",//鼠标放上去后现在是内容
      onclick: function() {}
     });
     editor.addButton("geshi", {//按钮列表,此处的geshi是该按钮的名称
      text: "格式",  //显示的文字
      type: "menubutton",
      menu: [
       {
        text: "标签",
        onclick: function() {}
       }
      ]
     });
    },
    plugins:
     "lists paste link image contextmenu wordcount colorpicker textcolor media imagetools",//对应上方import引入的文件,下面toolbar需要使用到
    toolbar:
     "geshi bold bullist numlist | uploadimg | alignleft aligncenter alignright alignjustify outdent indent"//定义工具栏
   };
   Object.assign(setting, _this.setting);
   tinymce.init(setting);
  },

第四步:在watch中监听传入的value,并修改tinymce的内容

value(newV, oldV) {
  tinymce.activeEditor.setContent(newV);
},

其他:设置图片

第一种:使用tinymce提供的接口

images_upload_handler: function (blobInfo, success, failure) {
  //blobInfo图片对象
  uploadimg(){ //上传图片(自己写的方法)
    success('图片的路径')
    failure('错误提示')
  }
}

第二种:我自己使用的方法,简单说一下思路

1.使用setup自定义一个按钮,按钮的点击事件就是选择图片(参考input,type=file),并上传

2.将服务器返回的路径包装成<img src='返回的路径'>

3.将自己包装的img标签放入鼠标当前指针处

let dom = tinymce.activeEditor.dom;
tinyMCE.execCommand("mceInsertContent",false,dom.createHTML("img", {src: 路径}));

总结

以上所述是小编给大家介绍的vue项目中使用tinymce编辑器的步骤详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
加载 Javascript 最佳实践
Oct 30 Javascript
JS文本框追加多个下拉框的值的简单实例
Jul 12 Javascript
ExtJS4利根据登录后不同的角色分配不同的树形菜单
May 02 Javascript
基于 Node.js 实现前后端分离
Apr 23 Javascript
微信小程序 九宫格实例代码
Jan 21 Javascript
jQuery插件zTree实现获取一级节点数据的方法
Mar 08 Javascript
vue实现单选和多选功能
Aug 11 Javascript
bootstrap-table formatter 使用vue组件的方法
May 09 Javascript
JavaScript学习教程之cookie与webstorage
Jun 23 Javascript
解决Vue的文本编辑器 vue-quill-editor 小图标样式排布错乱问题
Aug 03 Javascript
关于ES6尾调用优化的使用
Sep 11 Javascript
node.js通过url读取文件
Oct 16 Javascript
VUE 实现滚动监听 导航栏置顶的方法
Sep 11 #Javascript
vue中的watch监听数据变化及watch中各属性的详解
Sep 11 #Javascript
vue axios数据请求get、post方法及实例详解
Sep 11 #Javascript
js监听html页面的上下滚动事件方法
Sep 11 #Javascript
vue 使用html2canvas将DOM转化为图片的方法
Sep 11 #Javascript
Vue项目数据动态过滤实践及实现思路
Sep 11 #Javascript
使用vue.js在页面内组件监听scroll事件的方法
Sep 11 #Javascript
You might like
Laravel 5框架学习之路由、控制器和视图简介
2015/04/07 PHP
php array_slice 取出数组中的一段序列实例
2016/11/04 PHP
php图片合成方法(多张图片合成一张)
2017/11/25 PHP
PHP有序表查找之插值查找算法示例
2018/02/10 PHP
一个cssQuery对象 javascript脚本实现代码
2009/07/21 Javascript
只需一行代码,轻松实现一个在线编辑器
2013/11/12 Javascript
javascript模拟订火车票和退票示例
2014/04/24 Javascript
使用jquery.upload.js实现异步上传示例代码
2014/07/29 Javascript
jQuery实现tab选项卡效果的方法
2015/07/08 Javascript
有关jQuery中parent()和siblings()的小问题
2016/06/01 Javascript
基于jQuery实现Accordion手风琴自定义插件
2020/10/13 Javascript
JS创建Tag标签的方法详解
2017/06/09 Javascript
基于jQuery封装的分页组件
2017/06/26 jQuery
vue实现购物车的小练习
2020/12/21 Vue.js
React实现todolist功能
2020/12/28 Javascript
python双向链表实现实例代码
2013/11/21 Python
python魔法方法-属性访问控制详解
2016/07/25 Python
Python selenium如何设置等待时间
2016/09/15 Python
Python IDLE清空窗口的实例
2018/06/25 Python
Python实现的文轩网爬虫完整示例
2019/05/16 Python
python实现大文本文件分割
2019/07/22 Python
Python 脚本实现淘宝准点秒杀功能
2019/11/13 Python
对tensorflow中cifar-10文档的Read操作详解
2020/02/10 Python
Django model class Meta原理解析
2020/11/14 Python
Canvas制作旋转的太极的示例
2018/03/09 HTML / CSS
小学三年级学生评语
2014/04/22 职场文书
优秀的应届生自荐信
2014/05/23 职场文书
小学安全工作汇报材料
2014/08/19 职场文书
小学生2014国庆节演讲稿:祖国在我心中
2014/09/21 职场文书
个人贷款收入证明
2014/10/26 职场文书
通报表扬范文
2015/01/17 职场文书
研究生给导师的自荐信
2015/03/06 职场文书
2015年村计划生育工作总结
2015/04/28 职场文书
HTML+css盒子模型案例(圆,半圆等)“border-radius” 简单易上手
2021/05/10 HTML / CSS
基于Redis的List实现特价商品列表功能
2021/08/30 Redis
前端监听websocket消息并实时弹出(实例代码)
2021/11/27 Javascript