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
12种不宜使用的Javascript语法整理
Nov 04 Javascript
JavaScript作用域与作用域链深入解析
Dec 06 Javascript
jquery获取css的color值返回RGB的方法
Dec 18 Javascript
JS清除文本框内容离开在恢复及鼠标离开文本框时触发js的方法
Jan 12 Javascript
jQuery leonaScroll 1.1 自定义滚动条插件(推荐)
Sep 17 Javascript
Node.js如何优雅的封装一个实用函数的npm包的方法
Apr 29 Javascript
Electron vue的使用教程图文详解
Jul 05 Javascript
Vue实现数据表格合并列rowspan效果
Nov 30 Javascript
如何利用Node.js与JSON搭建简单的动态服务器
Jun 16 Javascript
纯JS开发baguetteBox.js响应式画廊插件
Jun 28 Javascript
JavaScript 监听组合按键思路及代码实现
Jul 28 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
php fckeditor 调用的函数
2009/06/21 PHP
php中记录用户访问过的产品,在cookie记录产品id,id取得产品信息
2011/05/04 PHP
浅析php过滤html字符串,防止SQL注入的方法
2013/07/02 PHP
PHP会话控制实例分析
2016/12/24 PHP
PHP CodeIgniter分页实例及多条件查询解决方案(推荐)
2017/05/20 PHP
PHP设计模式之注册树模式分析
2018/01/26 PHP
php session_decode函数用法讲解
2019/05/26 PHP
浅谈laravel中的关联查询with的问题
2019/10/10 PHP
疯掉了,尽然有js写的操作系统
2007/04/23 Javascript
jQuery 美元符冲突的解决方法
2010/03/28 Javascript
js jquery数组介绍
2012/07/15 Javascript
jquery实现下拉菜单的二级联动利用json对象从DB取值显示联动
2014/03/27 Javascript
浅谈js的setInterval事件
2014/12/05 Javascript
jQuery代码性能优化的10种方法
2016/06/21 Javascript
详解NODEJS的http实现
2018/01/04 NodeJs
讲解vue-router之什么是嵌套路由
2018/05/28 Javascript
Vue实现按钮旋转和移动位置的实例代码
2018/08/09 Javascript
ElementUI radio组件选中小改造
2019/08/12 Javascript
使用layui的router来进行传参的实现方法
2019/09/06 Javascript
利用JS如何获取form表单数据
2019/12/19 Javascript
python制作最美应用的爬虫
2015/10/28 Python
python 实现删除文件或文件夹实例详解
2016/12/04 Python
Python爬取网易云音乐热门评论
2017/03/31 Python
Python+OpenCV人脸检测原理及示例详解
2020/10/19 Python
通过shell+python实现企业微信预警
2019/03/07 Python
Django中使用 Closure Table 储存无限分级数据
2019/06/06 Python
Django实现WebSSH操作物理机或虚拟机的方法
2019/11/06 Python
python实现输入的数据在地图上生成热力图效果
2019/12/06 Python
python跨文件使用全局变量的实现
2020/11/17 Python
CSS3的Border-radius轻松制作圆角
2012/12/24 HTML / CSS
哈利波特商店:Harry Potter Shop
2018/11/30 全球购物
Python如何实现单例模式
2016/06/03 面试题
感恩老师的演讲稿
2014/05/06 职场文书
四风问题自查自纠工作情况报告
2014/10/28 职场文书
高中政治教学反思
2016/02/23 职场文书
教你怎么用Python处理excel实现自动化办公
2021/04/30 Python