在vue中使用Tinymce

最新推荐文章于 2024-08-18 11:34:56 发布

放荡不羁的疯子

最新推荐文章于 2024-08-18 11:34:56 发布

阅读量1.2k

点赞数

分类专栏：学习文章标签： vue.js javascript html

本文链接：https://blog.csdn.net/flyer9651/article/details/120146329

版权

学习专栏收录该内容

7 篇文章 0 订阅

订阅专栏

场景：在需求中需要使用富文本编辑器进行在线文本编辑

详见，见中文网站

1、引入

"@packy-tang/vue-tinymce": "^1.1.2",

"tinymce": "^5.9.1",

这两个放在package.json中的依赖中

2、使用

<template>
  <vue-tinymce v-model="content" :setting="setting" />
</template>

<script>
  import Tinymce from '@/components/Tinymce'
  export default {
  name: 'aaaa',
  components: {
    Tinymce,
  data: function () {
    return {
      content: '',
      setting: {
        menubar: true,
        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 letterspacing | \
        table image media charmap emoticons hr pagebreak insertdatetime print preview | fullscreen | bdmap indent2em lineheight formatpainter axupimgs importword kityformula-editor',
        fontsize_formats: '12px 14px 16px 18px 24px 36px 48px 56px 72px',
        letterspacing_formats: "0px 2px 4px 6px 24px",
        font_formats: '微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapf dingbats;知乎配置=BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, sans-serif;小米配置=Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif',
        toolbar_drawer: "sliding",
        quickbars_selection_toolbar: "removeformat | bold italic underline strikethrough | fontsizeselect forecolor backcolor",
        plugins: 'print preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template advcode codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount imagetools textpattern help emoticons autosave bdmap indent2em autoresize formatpainter axupimgs importword kityformula-editor letterspacing',
        language: 'zh_CN', //本地化设置
        // language_url: "/public/tinymce/langs/zh_CN.js", //使用language_url会相对灵活
        width: 800,
        height: 650, //编辑器高度
        max_height: 800,
        link_list: [
          { title: '预置链接1', value: 'http://www.tinymce.com' },
          { title: '预置链接2', value: 'http://tinymce.ax-z.cn' }
        ],
        image_list: [
          { title: '预置图片1', value: 'https://www.tiny.cloud/images/glyph-tinymce@2x.png' },
          { title: '预置图片2', value: 'https://www.baidu.com/img/bd_logo1.png' }
        ],
        image_class_list: [
          { title: 'None', value: '' },
          { title: 'Some class', value: 'class-name' }
        ],
        toolbar_mode : 'wrap',
        automatic_uploads : false,
        images_upload_base_path: '/demo',
        images_upload_handler: function (blobInfo, succFun, failFun) {
            succFun('/demo/images/img.jpg')
        }
      }
    }
  },
</script>

content双向绑定变量这里如果默认不给值时，不可以设置为null，必须为''，否则会无法将变量里的内容绑定