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 相关文章推荐
新页面打开实际尺寸的图片
Aug 25 Javascript
jquery text()要注意啦
Oct 30 Javascript
js tab效果的实现代码
Dec 26 Javascript
网页前端优化之滚动延时加载图片示例
Jul 13 Javascript
JavaScript对象的property属性详解
Apr 01 Javascript
JavaScript字符串对象charAt方法入门实例(用于取得指定位置的字符)
Oct 17 Javascript
JavaScript实现向setTimeout执行代码传递参数的方法
Apr 16 Javascript
详解JavaScript的Date对象(制作简易钟表)
Apr 07 Javascript
详解jQuery中的getAll()和cleanData()
Apr 15 jQuery
JavaScript实现移动端带transition动画的轮播效果
Mar 24 Javascript
vue.js 解决v-model让select默认选中不生效的问题
Jul 28 Javascript
js实现随机点名功能
Dec 23 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
ob_start(),ob_start('ob_gzhandler')使用
2006/12/25 PHP
PHP判断IP并转跳到相应城市分站的方法
2015/03/25 PHP
PHP里的单例类写法实例
2015/06/25 PHP
PHP微信开发之微信消息自动回复下所遇到的坑
2016/05/09 PHP
php实现微信扫码支付
2017/03/26 PHP
PHP PDOStatement::fetchAll讲解
2019/01/31 PHP
PHP token验证生成原理实例分析
2019/06/05 PHP
PHP连接MySQL数据库操作代码实例解析
2020/07/11 PHP
javascript 面向对象编程基础 多态
2009/08/21 Javascript
jquery 多级下拉菜单核心代码
2010/05/21 Javascript
js 获取(接收)地址栏参数值的方法
2013/04/01 Javascript
JavaScript使用focus()设置焦点失败的解决方法
2014/09/03 Javascript
bootstrap3 兼容IE8浏览器!
2016/05/02 Javascript
bootstrap中使用google prettify让代码高亮的方法
2016/10/21 Javascript
AngularJS 中使用Swiper制作滚动图不能滑动的解决方法
2016/11/15 Javascript
jQuery Ajax 实现在html页面实时显示用户登录状态
2016/12/30 Javascript
ES6学习教程之对象的扩展详解
2017/05/02 Javascript
详解利用 Express 托管静态文件的方法
2017/09/18 Javascript
让你5分钟掌握9个JavaScript小技巧
2018/06/09 Javascript
nodejs中方法和模块用法示例
2018/12/24 NodeJs
解决layui使用layui-icon出现默认图标的问题
2019/09/11 Javascript
[02:52]DOTA2新手基础教程 米波
2014/01/21 DOTA
使用BeautifulSoup爬虫程序获取百度搜索结果的标题和url示例
2014/01/19 Python
详解Tensorflow数据读取有三种方式(next_batch)
2018/02/01 Python
python3安装speech语音模块的方法
2018/12/24 Python
python 处理数字,把大于上限的数字置零实现方法
2019/01/28 Python
Tensorflow读取并输出已保存模型的权重数值方式
2020/01/04 Python
Python3通过chmod修改目录或文件权限的方法示例
2020/06/08 Python
比较基础的php面试题及答案-填空题
2014/04/26 面试题
药学专业大学生自荐信
2013/09/28 职场文书
探矿工程师自荐信
2014/01/24 职场文书
宿舍违规用电检讨书
2014/02/16 职场文书
建筑安全员岗位职责
2014/03/13 职场文书
党员先进性教育整改措施
2014/09/18 职场文书
解决Golang中ResponseWriter的一个坑
2021/04/27 Golang
MySQL如何解决幻读问题
2021/08/07 MySQL