Vue 使用 fraola——vue-froala-wysiwyg

最新推荐文章于 2024-04-14 09:59:04 发布

今天代码敲了吗

最新推荐文章于 2024-04-14 09:59:04 发布

阅读量2.3k

点赞数 1

分类专栏： Vue # Vue 组件文章标签： vue froala

本文链接：https://blog.youkuaiyun.com/z772330927/article/details/115891497

版权

Vue 同时被 2 个专栏收录

30 篇文章

订阅专栏

Vue 组件

10 篇文章

订阅专栏

本文介绍如何在 Vue 项目中集成并配置 Froala 富文本编辑器，包括安装步骤、全局配置方法及自定义工具栏设置等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue-froala-wysiwyg

froala官网
安装

npm install vue-froala-wysiwyg --save

在main.js全局配置

import 'froala-editor/css/froala_editor.pkgd.min.css'
import 'froala-editor/css/froala_style.min.css'
import 'froala-editor/js/froala_editor.pkgd.min.js'
import 'froala-editor/js/languages/zh_cn.js'
import 'froala-editor/js/plugins.pkgd.min.js'
import VueFroala from 'vue-froala-wysiwyg'

Vue.use(VueFroala)

froala.vue

<template>
  <div id="app">
    <froala id="edit"
            :tag="'textarea'"
            :config="froalaConfig"
            v-model="froalaData"></froala>
  </div>
</template>

<script>
export default {
  name: 'froala',
  data() {
    return {
      froalaData: '',
      froalaConfig: {
      //自定义工具栏
        // toolbarButtons: [
        //   'undo',
        //   'redo',
        //   'clearFormatting',
        //   'bold',
        //   'italic',
        //   'underline',
        //   'strikeThrough',
        //   'fontFamily',
        //   'fontSize',
        //   'color',
        //   'inlineStyle',
        //   'paragraphFormat',
        //   'align',
        //   'formatOL',
        //   'formatUL',
        //   'outdent',
        //   'indent',
        //   'quote',
        //   'insertLink',
        //   'insertImage',
        //   'insertVideo',
        //   'embedly',
        //   'insertFile',
        //   'insertTable',
        //   'emoticons',
        //   'specialCharacters',
        //   'insertHR',
        //   'selectAll',
        //   'print',
        //   'spellChecker',
        //   'html',
        //   'help',
        //   'fullscreen',
        // ],
        // theme: "dark",//主题
        placeholderText: '请在此输入',
        language: 'zh_cn', //语言
        imageUploadURL: 'http://i.froala.com/upload', //上传url
        imageUploadParams: { token: '', i: '', ak: '', f: 9 },
        fileUploadURL: 'http://i.froala.com/upload',
        fileUploadParams: { token: '', i: '', ak: '', f: 9 },
        videoUploadURL: 'http://i.froala.com/upload',
        videoUploadParams: { token: '', i: '', ak: '', f: 9 },
        quickInsertButtons: ['image', 'video', 'table', 'ul', 'ol', 'hr'], //快速插入项
        // toolbarVisibleWithoutSelection: true,//是否开启 不选中模式
        // disableRightClick: true,//是否屏蔽右击
        colorsHEXInput: true, //关闭16进制色值
        toolbarSticky: false, //操作栏是否自动吸顶,
        zIndex: 2501,
        height: '400',
        // autofocus: true,
        events: {
          initialized: function () {
            console.log(1)
          },
          blur: () => {
            console.log(123)
          },
          'image.beforeUpload': function (images) {
            console.log(images)
           return true
          },
          'file.beforeUpload': function () {
            console.log(this.froalaData)
            return true
          },
          'video.beforeUpload': function () {
            console.log(this.froalaData)
            return true
          },
          contentChanged: () => {},
        },
      },
    }
  },
  methods: {},
}
</script>
<style>
.editor-wrap {
  width: 900px;
}
.editor-wrap > div {
  width: 100%;
}
.fr-wrapper > div[style*='z-index:9999;'],
.fr-wrapper > div[style*='z-index: 9999;'] {
  height: 0;
  overflow: hidden;
}
.fr-box .second-toolbar #logo {
  width: 0 !important;
  height: 0 !important;
  overflow: hidden;
}
.fr-box .fr-toolbar {
  border-radius: 4px 4px 0 0;
  border-color: #dcdfe6;
}
.fr-box .second-toolbar {
  border-radius: 0 0 4px 4px;
  border-color: #dcdfe6;
}
.fr-box .fr-wrapper {
  border-color: #dcdfe6 !important;
}
</style>