之前有项目需要用到富文本编辑器，在网上找了好几个后，最终选择了这个功能强大，扩展性强的tinymce

　　tinymce中文文档地址（不全）：http://tinymce.ax-z.cn/

　　tinymce英文原版文档地址：https://www.tiny.cloud/docs/demo/

　　

　　接下来大致讲一下一个小demo（vue项目 + tinymce）

　1、npm 安装 tinymce 和 @packy-tang/vue-tinymce

npm i tinymce @packy-tang/vue-tinymce

　　

　2、复制node_modules/tinymce目录下所有文件至public/目录下

　　　　如下图

　　         

　　　　

　　　　然后在public/index.html页面全局引入tinymce

<body>

    <div id="app"></div>

    <script src="/tinymce/tinymce.min.js"></script>

</body>

　　　　

　　3、汉化

　　　　tinymce需要额外做汉化处理，中文汉化包地址：zh_CN.js

　　　　将 zh_CN.js文件直接放到public/tinymce/langs/目录下就行了，后续配置（下面会讲）时加上{language: 'zh_CN'}就能实现。

　　4、引入

　　　　在vue项目main.js文件中

// tinymce编辑器

import tinymce from 'tinymce'

import VueTinymce from '@packy-tang/vue-tinymce'

Vue.prototype.$tinymce = tinymce

Vue.use(VueTinymce)

　　5、使用

　　　　tinymce有多种编辑器模式，具体可以看文档了解，

　　　　　　笔者一开始使用的是经典模式，但经典模式使用的是iframe，不方便影响编辑器内部的东西，于是采用内联模式，但是内联模式是需要

　　　　聚焦后才会出现编辑工具栏，不符合需求，所以采用设置聚焦的元素未body的方法让编辑工具栏一直显示

　　　　代码如下

　　　　<template>

  <div class="tinymce-editor">

    <div id="tinymceToolbar"></div>

    <vue-tinymce

      ref="editor"

      class="editor overflow-scroll"

      v-model="content"

      :setting="setting"

      :setup="setup"

      @keyup.native="$emit('editorChange', content)"

    />

  </div>

</template>

<script>

export default {

  name: 'tinymceEditor',

  components: {

  },

  data() {

    return {

      // 编辑器内容

      content: '',

      // 编辑器设置

      setting: {

        inline: true,  // 设置内敛模式

        menubar: false, // 隐藏菜单栏

        toolbar:

          'code undo redo restoredraft | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough link anchor | alignleft aligncenter alignright alignjustify outdent indent | \

    　　　　styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | \

    　　　　table image media charmap emoticons hr pagebreak insertdatetime print preview | fullscreen | bdmap indent2em lineheight formatpainter axupimgs | myUpload',

           // 工具栏，根据需要写对应的工具名称，顺序及分割线等等，这里的最后的 ‘myUpload’ 是下面setup里的自定义插件

        toolbar_mode: 'sliding', // 工具栏模式，这里是滑行模式（当屏幕过小时，多余的工具会隐藏，点击更多按钮会出现其他工具，这里配置出现的特效）

        plugins: 'print preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template code 
　　　　　　　　　　codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount imagetools textpattern help 
　　　　　　　　　　emoticons autosave bdmap indent2em autoresize formatpainter axupimgs', 
　　　　　　　　　　// 需要用到的功能插件，如链接，列表等等

        language: 'zh_CN', // 语言，汉化

        branding: false, // 隐藏品牌，隐藏状态栏中显示的“ Powered by Tiny ”链接

        resize: false, // 是否可以缩放编辑器

        elementpath: false, // 在编辑器底部的状态栏中禁用元素路径。

        fixed_toolbar_container: '#tinymceToolbar', // 可以设置元素选择器指定工具栏嵌套在哪个元素里面

        custom_ui_selector: 'body', // 聚焦的元素

        noneditable_noneditable_class: 'mceNonEditable', // 使用此选项，您可以指定TinyMCE将使用的类名称，以确定使用noneditable插件时可编辑哪些内容区域。主要用入你想以代码的形式添加某些内容，并给这些内容设置类名，使他们不可编辑，只能整个删除

        init_instance_callback: editor => {

          editor.focus() // 初始化聚焦，让内联模式的编辑器工具显示

        },

      },

    }

  },

  methods: {

    /**

     * @description: 编辑器setup

     * @author: Depp_ck

     */

    setup(editor) {

        // 自定义插件实现自定义工具栏按钮功能

      editor.ui.registry.addButton('myUpload', {

        tooltip: '上传',

        icon: 'browse',

        onAction: () => {

          console.log('点击了上传')

        },

      })

    },

  },

}

</script>

<style lang="scss" scoped>

.tinymce-editor {

  padding: 20px;

  position: relative;

  .editor {

    padding: 10px;

    border: 1px solid #ddd;

    height: 410px;

    font-size: 16px;

    line-height: 1.4;

    overflow-y: scroll;

  }

}

</style>

前端富文本编辑器vue + tinymce的更多相关文章

  1. 前端富文本编辑器 vue-html5-editor

    1..项目创建与初始化 在安装好脚手架的依赖后,要执行 npm install vue-html5-editor -S 来安装这个富文本插件,由于这个富文本插件的图标是依赖font-awesome.c ...

  2. 富文本编辑器TinyMCE的使用(React Vue)

    富文本编辑器TinyMCE的使用(React Vue) 一,需求与介绍 1.1,需求 编辑新闻等富有个性化的文本 1.2,介绍 TinyMCE是一款易用.且功能强大的所见即所得的富文本编辑器. Tin ...

  3. Django 之 富文本编辑器-tinymce

    这里的富文本编辑器以 tinymce 为例. 环境:ubuntu 16.04 + django 1.10 + python 2.7 ubuntu安装tinymce: python 2.7 $ sudo ...

  4. tinymce 富文本编辑器 编写资料

    tinymce官方文档: 粘贴图片插件 博客搬运地址 使用Blob获取图片并二进制显示实例页面 tinymce自动调整插件 是时候掌握一个富文本编辑器了——TinyMCE(1) XMLHttpRequ ...

  5. vue集成百度富文本编辑器

    1.前期工作,访问百度富文本官网下载相应的百度富文本文件,根据后端用的技术下载相应的版本,建议下载最新版UTF-8版 (有图有真相,看图) https://ueditor.baidu.com/webs ...

  6. 在 Vue 项目中引入 tinymce 富文本编辑器

    项目中原本使用的富文本编辑器是 wangEditor,这是一个很轻量.简洁编辑器 但是公司的业务升级,想要一个功能更全面的编辑器,我找了好久,目前常见的编辑器有这些: UEditor:百度前端的开源项 ...

  7. Vue CLI 3+tinymce 5富文本编辑器整合

    基于Vue CLI 3脚手架搭建的项目整合tinymce 5富文本编辑器,vue cli 2版本及tinymce 4版本参考:https://blog.csdn.net/liub37/article/ ...

  8. 15、Vue CLI 3+tinymce 5富文本编辑器整合

    富文本编辑器里大佬们都说tinymce NB! 插件安装 inymce官方提供了一个vue的组件tinymce-vue 如果有注册或购买过服务的话,直接通过组件配置api-key直接使用,懒的注册或者 ...

  9. vue中引入Tinymce富文本编辑器

    最近想在项目上引入一个富文本编辑器,之前引入过summernote,感觉并不太适合vue使用, 然后在网上查了查,vue中使用Tinymce比较适合, 首先,我们在vue项目的components文件 ...

随机推荐

  1. D language

    D language https://en.wikipedia.org/wiki/D_(programming_language) Dart https://dlang.org/ flutter fr ...

  2. 观点纠正，yarn和npm对比，今天yarn仍然比npm快吗

    yarn和npm的区别和对比,网上很多了,不多说了. 只纠正一个观点:yarn仍然比npm快吗?不. 2016年,yarn刚刚发布,速度确实比npm快,于是网络上出现了好多推荐yarn的文章. 于是很 ...

  3. InnoDB -- 行记录格式

    本文转载自InnoDB -- 行记录格式 分类 Named File Format InnoDB早期的文件格式(页格式)为Antelope,可以定义两种行记录格式,分别是Compact和Redunda ...

  4. 下载com.springsource.org.aspectj.weaver-1.6.8.RELEASE.jar

    看别人都说在repo.maven.com下载,没想到竟然要登录 索性我直接在国内阿里云的镜像仓库下载好了,速度又快又方便 搜索aspectj 下载地址:https://maven.aliyun.com ...

  5. A study on ILC for linear discrete systems with single delay

    论文题目就是随笔的题目,以后的随笔的命名都是如此,特此说明. 论文的主要内容是偏理论研究的,引入了离散矩阵延迟指数函数,来处理具有单时滞线性离散系统.对于离散延迟矩阵指数函数其定义为: \[e_{m} ...

  6. Spirng 循环依赖报错：Requested bean is currently in creation: Is there an unresolvable circular reference?

    1:前言 最近在项目中遇到了一次循环依赖报错的问题,虽然解决的很快,但是有些不明白的地方,特此记录. 在此我把 bean 的结构和 注入方式单独拎出来进行演示 1.1:报错提示 1.2:错误日志 Ex ...

  7. 读懂RESTful风格

    RESTful就是资源定位和资源操作的风格.不是标准也不是协议. REST即Representational State Transfer的缩写,可译为"表现层状态转化".REST ...

  8. 正月十五吃汤圆CountDownLatch

    CountDownLatch实际应用 今天是正月十五,给大家拜个晚年啦! 元宵节是中国传统节日,吃汤圆不能少啊,今天我们统计下"叫练"吃汤圆时间,并用代码模拟下叫练吃汤圆!其中用到 ...

  9. for、while的循环套用和函数的递归

    一.集成开发工具Eclipse 1.1 下载 官网下载 https://www.eclipse.org/downloads/download.php?file=/technology/epp/down ...

  10. c++ string类使用及用string类解决整行字符串输入

    下面随笔给出c++ string类使用及用string类解决整行字符串输入. string类 使用字符串类string表示字符串 string实际上是对字符数组操作的封装 string类常用的构造函数 ...