专栏首页前端之攻略富文本编辑器 tinymce 的使用

富文本编辑器 tinymce 的使用

一款简洁表格功能齐全的富文本编辑器,表格编辑有比较强大的功能,支持获取html,设置只读功能

1、安装 tinymce

npm install tinymce --save

2、安装 @packy-tang/vue-tinymce

npm install @packy-tang/vue-tinymce

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

4、public里面的index.html文件 引入

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

新建tinymce.vue文件

<template>
  <div>
    <div v-html="content"></div>
    <el-button @click="handleClick">click</el-button>
    <!-- App -->
    <div>
      <vue-tinymce v-model="content" :setup="setup" :setting="setting" />
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      content: '<table style="border-collapse: collapse; width: 100%;height:35px;" border="1"><tbody><tr><td>this is p1</td><td>this is p2</td></tr></tbody></table>',
      setting: {
        readonly: false,
        menubar: false,
        toolbar:
          "undo redo | fullscreen | formatselect alignleft aligncenter alignright alignjustify | link unlink | numlist bullist | image media table | fontselect fontsizeselect forecolor backcolor | bold italic underline strikethrough | indent outdent | superscript subscript | removeformat |",
        toolbar_drawer: "sliding",
        quickbars_selection_toolbar:
          "removeformat | bold italic underline strikethrough | fontsizeselect forecolor backcolor",
        plugins: "link image media table lists fullscreen quickbars",
        language_url: "/static/tinymce/langs/zh_CN.js", // 语言包的路径
        language: "zh_CN",
        height: 350
      }
    };
  },

  methods: {
    handleClick() {
      console.log(this.content);
    },
    setup(editor) {
      console.log(editor);
    }
  }

};
</script>

 效果图

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 水平滚动条

    主要用到并排Div 的父级设置white-space: nowrap,并排的div设置display:inline-block;

    tianyawhl
  • vue-print-nb 打印插件的使用

    import Print from 'vue-print-nb' Vue.use(Print)

    tianyawhl
  • bootstrap 模态框垂直居中实现方法 原

    (adsbygoogle = window.adsbygoogle || []).push({});

    tianyawhl
  • 测试时间序列的40个问题

    时间序列预测与建模在数据分析中起着重要的作用。时间序列分析是统计学的一个分支,广泛应用于计量经济学和运筹学等领域。这篇技能测试文章是为了测试你对时间序列概念的了...

    磐创AI
  • 五个特性,让你升级React

    本系列文章主要将总结React从15.x升级到v16.x所需要注意的内容,本文则主要总结为什么要升级到v16.x,v16.x的一些新特性,主要内容包括:

    前端林子
  • 在 React 中缩放、裁剪和缩放图像

    在本文中,我们将了解如何使用 Cropper.js 在 React Web 应用中裁剪图像。尽管我们不会将这些图像上传到远程服务器进行存储,但是很容易就能完成这...

    疯狂的技术宅
  • 敲黑板了,这是新知识点

    这年头,不管什么应用,仿佛“上云“都成了标配,感觉拥抱了“云”,应用的逼格都上升了。那真的是这样的吗?

    出其东门
  • 巧用flashback database实现灵活的数据回滚(r5笔记第16天)

    之前写了一篇博文分享了使用flashback database的特性来在测试环境中避免重复导入大批量的数据,造成时间和存储空间的浪费。http://blog.i...

    jeanron100
  • 前端学习(46)~事件简介

    事件:就是文档或浏览器窗口中发生的一些特定的交互瞬间。对于 Web 应用来说,有下面这些代表性的事件:点击某个元素、将鼠标移动至某个元素上方、关闭弹窗等等。

    Vincent-yuan
  • css常用布局

    执行结果链接描述 在header 和footer上再包裹一层div,在外层的div上添加背景颜色,设置内层layout上设置左右margin:auto,就出现了...

    bamboo

扫码关注云+社区

领取腾讯云代金券