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 相关文章推荐
js 取时间差去掉周六周日实现代码
Dec 25 Javascript
javascript加号&quot;+&quot;的二义性说明
Mar 04 Javascript
使用js实现一个可编辑的select下拉列表
Feb 20 Javascript
jQuery实现的超酷苹果风格图标滑出菜单效果代码
Sep 16 Javascript
JavaScript中windows.open()、windows.close()方法详解
Jul 28 Javascript
vue.js入门教程之绑定class和style样式
Sep 02 Javascript
基于JavaScript实现熔岩灯效果导航菜单
Jan 04 Javascript
Vue实现动态显示textarea剩余字数
May 22 Javascript
关于javascript作用域的常见面试题分享
Jun 18 Javascript
使用ef6创建oracle数据库的实体模型遇到的问题及解决方案
Nov 09 Javascript
微信小程序语音同步智能识别的实现案例代码解析
May 29 Javascript
jQuery实现tab栏切换效果
Dec 22 jQuery
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
用PHP开发GUI
2006/10/09 PHP
mac下安装nginx和php
2013/11/04 PHP
js实现ASP分页函数 HTML分页函数
2006/09/22 Javascript
js最简单的拖拽效果实现代码
2010/09/24 Javascript
javascript学习笔记(一) 在html中使用javascript
2012/06/18 Javascript
实现web打印的各种方法介绍及实现代码
2013/01/09 Javascript
javascript禁用Tab键脚本实例
2013/11/22 Javascript
非常实用的js验证框架实现源码 附原理方法
2016/06/08 Javascript
javascript中json对象json数组json字符串互转及取值方法
2017/04/19 Javascript
NodeJs使用Mysql模块实现事务处理实例
2017/05/31 NodeJs
用Vue-cli搭建的项目中引入css报错的原因分析
2017/07/20 Javascript
JS实现问卷星自动填问卷脚本并在两秒自动提交功能
2020/06/17 Javascript
Vue 仿QQ左滑删除组件功能
2018/03/12 Javascript
React通过redux-persist持久化数据存储的方法示例
2019/02/14 Javascript
VUE脚手架的下载和配置步骤详解
2019/04/01 Javascript
vue中的计算属性和侦听属性
2020/11/06 Javascript
Vue+scss白天和夜间模式切换功能的实现方法
2021/01/05 Vue.js
[00:20]TI9不朽观赛名额抽取
2019/08/05 DOTA
Python读取系统文件夹内所有文件并统计数量的方法
2018/10/23 Python
检测python爬虫时是否代理ip伪装成功的方法
2019/07/12 Python
利用keras加载训练好的.H5文件,并实现预测图片
2020/01/24 Python
如何实现一个python函数装饰器(Decorator)
2020/10/12 Python
详解HTML5中表单验证的8种方法介绍
2016/12/19 HTML / CSS
人事专员岗位职责
2013/11/20 职场文书
车间工艺员岗位职责
2013/12/09 职场文书
大学生毕业的自我评价分享
2014/01/02 职场文书
学雷锋月活动总结
2014/04/25 职场文书
毕业生见习报告总结
2014/11/08 职场文书
教师节获奖感言
2015/07/31 职场文书
旷工检讨书大全
2015/08/15 职场文书
OpenCV3.3+Python3.6实现图片高斯模糊
2021/05/18 Python
Python List remove()实例用法详解
2021/08/02 Python
JVM钩子函数的使用场景详解
2021/08/23 Java/Android
Python爬虫网络请求之代理服务器和动态Cookies
2022/04/12 Python
SQL语句多表联合查询的方法示例
2022/04/18 MySQL
MySQL示例讲解数据库约束以及表的设计
2022/06/16 MySQL