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

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编辑器的步骤详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

(0)

相关推荐

  • 常用的HTML富文本编译器UEditor、CKEditor、TinyMCE、HTMLArea、eWebEditor、KindEditor简介

    1.UEditor UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于BSD协议,允许自由使用和修改代码... 主要特点: 轻量级:代码精简,加载迅速. 定制化: 全新的分层理念,满足多元化的需求. 采用三层架构: 1. 核心层: 为命令层提供底层API,如range/selection/domUtils类. 2. 命令插件层: 基于核心层开发command命令,命令之间相互独立. 3. 界面层: 为命令层提供用户使用界面. 满

  • 在 Vue 项目中引入 tinymce 富文本编辑器的完整代码

    项目中原本使用的富文本编辑器是 wangEditor,这是一个很轻量.简洁编辑器 但是公司的业务升级,想要一个功能更全面的编辑器,我找了好久,目前常见的编辑器有这些: UEditor:百度前端的开源项目,功能强大,基于 jQuery,但已经没有再维护,而且限定了后端代码,修改起来比较费劲 bootstrap-wysiwyg:微型,易用,小而美,只是 Bootstrap + jQuery... kindEditor:功能强大,代码简洁,需要配置后台,而且好久没见更新了 wangEditor:轻量.

  • TinyMCE 新增本地图片上传功能

    这样TinyMCE 就可以正常显示图片了.其实该功能属于普通HTML富文本控件基本功能了.现有需求将TinyMCE 扩展成可直接上传本地图片而后在文本区域显示图片. 实现思路: 使用Ajax 进行图片上传,此上传方式可以更友好的实现TinyMCE 的图片上传扩展, 具体方法可以参考我的上一篇 Jquery ajaxsubmit 上传图片.将Ajax上传图片集成到 TinyMCE 中, 主要是修改TinyMCE 目录下的 tinymce\jscripts\tiny_mce\plugins 的 ad

  • JS开发 富文本编辑器TinyMCE详解

    一.题外话 最近负责了一个cms网站的运维,里面存在很多和编辑器有关的问题,比如编辑一些新闻博客,论文模块.系统采用的是FCKEditor,自我感觉不是很好,如下图 特别是在用户想插入一个图片的话,就很麻烦,所有用户共享一个文件目录,这样就不好了,于是便想到了TinyMCE编辑器,博客园默认的也是这个编辑器,接下 来,我们开始吧 二.TinyMCE编辑器集成步骤 2.1:下载相关文件 (1)下载TinyMCE插件包 下载地址,如下图所示,下载开发版 (2)下载其他功能包 包括中文语言包zh_CN

  • tinyMCE插件开发之插入html,php,sql,js代码 并代码高亮显示

    下面就是我开发的过程. 首先,我的 tinyMCE版本是 Version: 3.2.7 (2009-09-22) .下载地址 http://www.jb51.net/codes/17198.htmltinyMCE插入代码,需要调用 tinyMCE的 tinyMCE.execCommand('mceInsertContent',false,value); 方法.其中参数无需改变,value 就是你要插入的内容, 比如我写了一个函数, 复制代码 代码如下: function InsertHTML(v

  • TinyMCE汉化及本地上传图片功能实例详解

    TinyMCE我就不多介绍了,这是下载地址:https://www.tinymce.com/download/ 下载下来是英文版,要汉化也很简单. 首先去网上随便下载个汉化包,然后把汉化包解压后的langs文件夹里的zh_CN.js拷到你下载的TinyMCE的langs文件夹中就行.最后在 tinymce.init中加上"language: "zh_CN","(后面会贴出代码) 本地图片上传我用到了Jquery中的uploadify和UI,所以需要引用jquery.

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

    Tinymce富文本也是一款很流行编辑器 把文件放在static下,然后在index.html文件中引入这个文件 <script src="static/tinymce/tinymce.min.js"></script> <tinymce :height=200 ref="editor" v-model="editForm.fdcNote"></tinymce> 在其他子文件中引入这个 import

  • vue项目添加多页面配置的步骤详解

    公司使用 vue-cli 创建的 vue项目 在初始化时并没有做多页面配置,随着需求的不断增加,发现有必要使用多页面配置.看了很多 vue多页面配置 的文章,基本都是在初始化时就配置了多页面.而且如果使用这些实现,需要调整当前项目的目录结构,这点也是不能接受的. 最后,参考这些文章,在不调整当前项目目录结构实现了多页面的配置的添加.这里做下记录.总结,方便以后复用.如果还能有幸帮助到有同样需求的童鞋的话,那就更好了. 实现步骤 1.添加新增入口相关文件; 2.使用变量维护多入口: 3.开发环境读

  • 在vue项目中引入highcharts图表的方法(详解)

    npm进行highchars的导入,导入完成后就可以进行highchars的可视化组件开发了 npm install highcharts --save 1.components目录下新建一个chart.vue组件 <template> <div class="x-bar"> <div :id="id" :option="option"></div> </div> </templa

  • Android项目中使用HTTPS配置的步骤详解

    前言 如果你的项目的网络框架是okhttp,那么使用https还是挺简单的,因为okhttp默认支持HTTPS.传送门 下面话不多说了,来一起看看详细的介绍: Android 使用 HTTPS 配置的步骤. 1.step 配置hostnameVerifier new HostnameVerifier() { @Override public boolean verify(String hostname, SSLSession session) { return true; } }: 2.step

  • vue项目中实现缓存的最佳方案详解

    需求 在开发vue的项目中有遇到了这样一个需求:一个视频列表页面,展示视频名称和是否收藏,点击进去某一项观看,可以收藏或者取消收藏,返回的时候需要记住列表页面的页码等状态,同时这条视频的收藏状态也需要更新, 但是从其他页面进来视频列表页面的时候不缓存这个页面,也就是进入的时候是视频列表页面的第一页 一句话总结一下: pageAList->pageADetail->pageAList, 缓存pageAList, 同时该视频的收藏状态如果发生变化需要更新, 其他页面->pageAList,

  • vue项目前端错误收集之sentry教程详解

    sentry简介 Sentry 是一个开源的错误追踪工具,可以帮助开发人员实时监控和修复系统中的错误.其专注于错误监控以及提取一切事后处理所需的信息;支持几乎所有主流开发语言( JS/Java/Python/php )和平台, 并提供了web来展示输出错误. sentry官网: https://sentry.io/ sentry安装 sentry 是一个开源的工具,可以自行搭建. 官方支持两种安装和运行 Sentry 服务器的方法, Docker 和 Python .推荐使用 Docker .

  • vue 项目常用加载器及配置详解

    本文介绍了vue 项目常用加载器及配置详解,分享给大家,具体如下: 1.安装sass: 1.1 由于sass-loader依赖于node-sass,所以在安装sass-loader的同时还需安装node-sass npm install --save-dev node-sass npm install --save-dev sass-loader 1.2 安装完成后修改 <style>标签: <style lang="scss"></style> 2

  • Vue.js 中的 v-cloak 指令及使用详解

    先来看下vue.js 中的v-cloak 指令 可以使用 v-cloak 指令设置样式,这些样式会在 Vue 实例编译结束时,从绑定的 HTML 元素上被移除. 当网络较慢,网页还在加载 Vue.js ,而导致 Vue 来不及渲染,这时页面就会显示出 Vue 源代码.我们可以使用 v-cloak 指令来解决这一问题. html: <div id="app"> {{context}} </div> js: <script> var app = new

  • vue项目打包部署_nginx代理访问方法详解

    我又来了,今天部署了下vue项目,使用nginx做了代理,这样可以解决跨域的问题,这里做一个简单讲解. 1.先看vue项目打包(我这里使用的是vscode开发工具) 这里是我的项目结构: 打包之前需要修改如下配置文件: 配置文件一:build>>utils.js (修改publicPath:"../../" , 这样写是处理打包后找不到静态文件的问题) 配置文件二:config>>index.js(修改assetsPublicPath:'./' ,修改目的是为了

随机推荐