vue-html5-editor

最新推荐文章于 2024-08-22 09:09:49 发布

柚子、、

最新推荐文章于 2024-08-22 09:09:49 发布

阅读量828

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue.js html5 javascript

本文链接：https://blog.csdn.net/ZZHK666/article/details/123115291

本文介绍了如何在Vue.js项目中使用vue-html5-editor，一个基于HTML5的富文本编辑器组件。通过在main.js中进行全局配置，可以轻松集成到Vue应用中，提供便捷的文本编辑功能。

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

<vue-html5-editor :content="company_info.desc_list" :height="150" :z-index="1000"  placeholder="111" :auto-height="true" @change="updateContent" ></vue-html5-editor>

全局配置 main.js

// 富文本
import '../node_modules/font-awesome/css/font-awesome.css'
import VueHtml5Editor from 'vue-html5-editor'
Vue.use(VueHtml5Editor, {
    // 全局组件名称，使用new VueHtml5Editor(options)时该选项无效 
    // global component name
    name: "vue-html5-editor",
    // 是否显示模块名称，开启的话会在工具栏的图标后台直接显示名称
    // if set true,will append module name to toolbar after icon
    showModuleName: false,
    // 自定义各个图标的class，默认使用的是font-awesome提供的图标
    // custom icon class of built-in modules,default using font-awesome
    icons: {
        text: "fa fa-pencil",
        color: "fa fa-paint-brush",
        font: "fa fa-font",
        align: "fa fa-align-justify",
        list: "fa fa-list",
        link: "fa fa-chain",
        unlink: "fa fa-chain-broken",
        tabulation: "fa fa-ta