欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue使用Tinymce富文本自定義toolbar按鈕的實(shí)踐

 更新時(shí)間:2021年12月07日 10:49:35   作者:阿雷前進(jìn)中...  
本文主要介紹了Vue使用Tinymce富文本自定義toolbar按鈕,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

富文本編輯器有很多,流行的有UEditor , kindeditor, CKEditor 等等。但今天我們來實(shí)現(xiàn)tniyMCE 的插件開發(fā)。

安裝tinymce、tinymce ts、tinymce-vue聲明文件

npm install tinymce -S
npm install @types/tinymce -S
npm install @tinymce/tinymce-vue -S

封裝組件

<template>
    <div>
        <editor :id="id" v-model="content" :init="init"></editor>
    </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';

import tinymce from 'tinymce';
import Editor from '@tinymce/tinymce-vue';

import 'tinymce/themes/silver/theme';
import 'tinymce/plugins/image';
import 'tinymce/plugins/link';
import 'tinymce/plugins/code';
import 'tinymce/plugins/table';
import 'tinymce/plugins/lists';
import 'tinymce/plugins/contextmenu';
import 'tinymce/plugins/wordcount';
import 'tinymce/plugins/colorpicker';
import 'tinymce/plugins/textcolor';
import 'tinymce/plugins/media';
import 'tinymce/plugins/fullscreen';
import 'tinymce/plugins/preview';
import 'tinymce/plugins/pagebreak';
import 'tinymce/plugins/insertdatetime';
import 'tinymce/plugins/hr';
import 'tinymce/plugins/paste';
import 'tinymce/plugins/codesample';
import 'tinymce/icons/default/icons';

console.log(tinymce);

@Component({ name: 'TinymceEditer', components: { Editor } })
export default class extends Vue {
    //設(shè)置prop id
    @Prop({ default: 'vue-tinymce-' + +new Date() }) id!: string;
 
 //默認(rèn)高度
    @Prop({ default: 300 }) height!: number;

    @Prop({ default: '' })
    private value!: string;

    private content: string = '';

    @Watch('value')
    private onChangeValue(newVal: string) {
        this.content = newVal;
    }

    @Watch('content')
    private onChangeContent(newVal: string) {
        this.$emit('input', newVal);
    }

    //富文本框init配置
    private get init() {
        return {
            selector: '#' + this.id, //富文本編輯器的id
            language: 'zh_CN', //語言
            language_url: '/tinymce/zh_CN.js', //語言包
            skin_url: '/tinymce/skins/ui/oxide', //編輯器需要一個(gè)skin才能正常工作,所以要設(shè)置一個(gè)skin_url指向之前復(fù)制出來的skin文件
            menubar: false, //菜單條
            plugins:
                'link lists image code table colorpicker textcolor wordcount contextmenu  media table fullscreen preview pagebreak insertdatetime hr paste codesample emoticons', //插件
            toolbar:
                'bold italic underline strikethrough  | fontselect | fontsizeselect | formatselect  | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | removeformat| undo redo | link unlink image media insertdatetime table  hr pagebreak codesample | code fullscreen preview', //工具條
            font_formats: 'Arial=arial,helvetica,sans-serif; 宋體=SimSun;  微軟雅黑=Microsoft Yahei; Impact=impact,chicago;', //字體
            fontsize_formats: '11px 12px 14px 16px 18px 24px 36px 48px 64px 72px', //文字大小
            height: this.height, //高度
            branding: false, //水印
            elementpath: false, //底部元素路徑
            paste_data_images: true, //允許粘貼圖片
            //初始化前執(zhí)行
            setup: (editor: any) => {},
            //實(shí)例化執(zhí)行
            init_instance_callback: (editor: any) => {
                this.content && editor.setContent(this.content);

                //this.hasInit = true
                editor.on('NodeChange Change KeyUp SetContent', () => {
                    //this.hasChange = true
                    this.content = editor.getContent();
                });
            },

            //視頻設(shè)置回調(diào)
            video_template_callback: (data: any) => {
                return `<video width="
                    ${data.width} " height="${data.height}"
                    ${data.poster ? 'poster="' + data.poster + '"' : ''}
                    controls="controls">
                    <source src="${data.source}"/>
                </video>`;
            },

            //粘貼圖片回調(diào)
            images_upload_handler: (blobInfo: any, success: Function, failure: Function) => {
                this.handleImgUpload(blobInfo, success, failure);
            },
        };
    }

    private mounted() {
        this.content = this.value;
    }

    //上傳圖片
    private handleImgUpload(blobInfo: any, success: Function, failure: Function) {
        this.$emit('upload', blobInfo, success, failure);
    }
}
</script>

<style lang="scss">
.tox-tinymce-aux {
    z-index: 3000 !important;
}
</style>

組件使用

<template>
   <tinymce v-model="content" />
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import Tinymce from '@/components/tinymce/tinymce.vue';

@Component({
    components: {
        Tinymce,
    },
})
export default class extends Vue {
    private content: string = '';
}
</script>

<style lang="scss" scoped></style>

Vue使用Tinymce富文本編輯器自定義toolbar按鈕

在這里插入圖片描述

這里我增加了收縮的按鈕

 init: {
        language: "zh_CN",
        skin_url: "/tinymce/skins/ui/oxide",
        height: "100%",
        fontsize_formats: "8pt 10pt 12pt 14pt 16pt 18pt 24pt 36pt",
        font_formats:
          "微軟雅黑=Microsoft YaHei;方正仿宋_GBK=方正仿宋_GBK;宋體=simsun,serif;仿宋體=FangSong,serif;黑體=SimHei;Times New Roman=Times New Roman;",
        plugins: {
	      type: [String, Array],
	      default: "code lists image media table wordcount indent2em"
	    ,
        toolbar:  {
	      type: [String, Array],
	      default:
	        "code | lineheight | undo redo | fontsizeselect | fontselect |  formatselect | bold italic forecolor backcolor | alignleft aligncenter alignright alignjustify | myCustomToolbarButton | bullist numlist outdent indent indent2em| lists image media table | removeformat"
	    },
        branding: false,
        menubar: false,
        setup: editor => {
          let _this = this;
          editor.ui.registry.addButton("myCustomToolbarButton", {
            text: "收縮",
            onAction: function() {
              _this.show= !_this.show;
            }
          });
        }
      },

關(guān)鍵代碼

這里使用 箭頭函數(shù) => 即可操作vue中屬性和事件

 setup: editor => {
    let _this = this;
    editor.ui.registry.addButton("myCustomToolbarButton", {
      text: "收縮",
      onAction: function() {
        _this.show= !_this.show;
      }
    });
  }

到此這篇關(guān)于Vue使用Tinymce富文本自定義toolbar按鈕的實(shí)踐的文章就介紹到這了,更多相關(guān)Vue Tinymce自定義toolbar 內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • elementUI動(dòng)態(tài)表單?+?el-select?按要求禁用問題

    elementUI動(dòng)態(tài)表單?+?el-select?按要求禁用問題

    這篇文章主要介紹了elementUI動(dòng)態(tài)表單?+?el-select?按要求禁用問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-10-10
  • 解決VantUI popup 彈窗不彈出或無蒙層的問題

    解決VantUI popup 彈窗不彈出或無蒙層的問題

    這篇文章主要介紹了解決VantUI popup 彈窗不彈出或無蒙層的問題。具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2020-11-11
  • vue2之響應(yīng)式雙向綁定,在對(duì)象或數(shù)組新增屬性頁面無響應(yīng)的情況

    vue2之響應(yīng)式雙向綁定,在對(duì)象或數(shù)組新增屬性頁面無響應(yīng)的情況

    這篇文章主要介紹了vue2之響應(yīng)式雙向綁定,在對(duì)象或數(shù)組新增屬性頁面無響應(yīng)的情況及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-04-04
  • 基于Vue實(shí)現(xiàn)自定義組件的方式引入圖標(biāo)

    基于Vue實(shí)現(xiàn)自定義組件的方式引入圖標(biāo)

    在vue項(xiàng)目中我們經(jīng)常遇到圖標(biāo),下面這篇文章主要給大家介紹了關(guān)于如何基于Vue實(shí)現(xiàn)自定義組件的方式引入圖標(biāo)的相關(guān)資料,文章通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2021-07-07
  • Vue+Element UI+Lumen實(shí)現(xiàn)通用表格分頁功能

    Vue+Element UI+Lumen實(shí)現(xiàn)通用表格分頁功能

    這篇文章主要介紹了Vue+Element UI+Lumen實(shí)現(xiàn)通用表格分頁功能,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-02-02
  • Vue?2?和?Vue?3?中?toRefs函數(shù)的不用用法

    Vue?2?和?Vue?3?中?toRefs函數(shù)的不用用法

    Vue?是一款流行的JavaScript?框架,用于構(gòu)建用戶界面,在Vue2和?Vue3中,都存在一個(gè)名為toRefs的函數(shù),但其行為在這兩個(gè)版本中有所不同,這篇文章主要介紹了Vue2和Vue3中toRefs的區(qū)別,需要的朋友可以參考下
    2023-08-08
  • vue3.0找不到模塊“./App.vue”或其相應(yīng)的類型聲明(多種情況分析)

    vue3.0找不到模塊“./App.vue”或其相應(yīng)的類型聲明(多種情況分析)

    這篇文章主要介紹了vue3.0找不到模塊“./App.vue”或其相應(yīng)的類型聲明,報(bào)錯(cuò)原因是typescript?只能理解?.ts?文件,無法理解?.vue文件,本文通過多種情況分析給大家詳細(xì)講解,需要的朋友可以參考下
    2023-01-01
  • Vue修飾符的使用詳解

    Vue修飾符的使用詳解

    為了方便大家寫代碼,Vue給大家提供了很多方便的修飾符,比如我們經(jīng)常用到的取消冒泡,阻止默認(rèn)事件等等,這篇文章將給大家分享Vue?中的常用的修飾符
    2022-10-10
  • vue之proxyTable代理超全面配置流程

    vue之proxyTable代理超全面配置流程

    這篇文章主要介紹了vue之proxyTable代理超全面配置流程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • vue2 使用@vue/composition-api依賴包 編譯、打包各種報(bào)錯(cuò)問題分析

    vue2 使用@vue/composition-api依賴包 編譯、打包各種報(bào)錯(cuò)問題分析

    由于package.json 文件中 vue、vue-template-compiler 版本號(hào)前面 多了個(gè) ^ 導(dǎo)致實(shí)際導(dǎo)入時(shí),node_module中的 vue 版本可能被升級(jí)為 2.7.x,這篇文章主要介紹了vue2 使用@vue/composition-api依賴包 編譯、打包各種報(bào)錯(cuò)問題分析,需要的朋友可以參考下
    2023-01-01

最新評(píng)論