zoukankan      html  css  js  c++  java
  • vue 集成 NEditor 富文本

    下载NEditor 放在  vue 项目下面 public  文件中。

    安装    vue-neditor-wrap  执行命令

    npm  install  vue-neditor-wrap

    代码使用 

    <VueNeditorWrap
    ref="VueNeditorWrap"
    v-model="content"
    :config="myConfig"
    :destroy="false"
    @ready="ready"
    ></VueNeditorWrap>
     
    myConfig: {
    // 如果需要上传功能,找后端小伙伴要服务器接口地址
    serverUrl:
    globalAPI.sysAPIs.itsm_sys_common.itsm_sys_common_upload_api.url,
    // 你的UEditor资源存放的路径,相对于打包后的index.html
    UEDITOR_HOME_URL: "/NEditor/",
    // 编辑器不自动被内容撑高
    autoHeightEnabled: false,
    // 初始容器高度
    initialFrameHeight: 240,
    // 初始容器宽度
    initialFrameWidth: "100%",
    // 关闭自动保存
    enableAutoSave: false,
    // 是否只读
    readonly: false,
    // 最大字数
    maximumWords: 2000,
    //关闭字数统计
    // wordCount: false,
    // //关闭elementPath
    // elementPathEnabled: false,
    toolbars: [
    [
    "source",
    "|",
    "undo",
    "redo",
    "|",
    "bold",
    "italic",
    "underline",
    "fontborder",
    "strikethrough",
    "superscript",
    "subscript",
    "removeformat",
    "formatmatch",
    "autotypeset",
    "blockquote",
    "pasteplain",
    "|",
    "forecolor",
    "backcolor",
    "insertorderedlist",
    "insertunorderedlist",
    "selectall",
    "cleardoc",
    "|",
    "rowspacingtop",
    "rowspacingbottom",
    "lineheight",
    "|",
    "customstyle",
    "paragraph",
    "fontfamily",
    "fontsize",
    "|",
    "directionalityltr",
    "directionalityrtl",
    "indent",
    "|",
    "justifyleft",
    "justifycenter",
    "justifyright",
    "justifyjustify",
    "|",
    "touppercase",
    "tolowercase",
    "|",
    "link",
    "unlink",
    "anchor"
    ]
    ]
    },
    content: ""
  • 相关阅读:
    tomcat 远程部署项目
    Maven的使用
    FTP服务器的使用
    2017.10-2018.10工作思考
    Java面试题准备(二)
    移植数据库的心得
    重新安装开发环境之安装使用plsql碰到的两个问题
    Redis学习笔记(一)
    开发之没沟通误删客户数据库数据之找数据路
    Java面试准备(一)
  • 原文地址:https://www.cnblogs.com/hucoke/p/11313591.html
Copyright © 2011-2022 走看看