精华内容
下载资源
问答
  • react+typescript中使用wangeditor

    千次阅读 2019-12-30 11:38:13
    在react+typescript中使用富文本wangeditor 第一步:安装 npm install wangeditor --save-dev 第二步:引入 import E from 'wangeditor' 这里会提示你要安装 npm install @types/wangeditor,执行这行代码一直报...

    在react+typescript中使用富文本wangeditor

    第一步:安装

    npm install wangeditor --save-dev
    

    第二步:引入

    import E from 'wangeditor'
    

    这里会提示你要安装 npm install @types/wangeditor,执行这行代码一直报404找不到这个依赖包,这个时候我们就要去 .d.ts 文件中去适配

    第三步:配置.d.ts文件

    declare module '*.css' {
      const styles: any;
      export = styles;
    }
    
    declare module '*.jpg' {
      const jpgs: any;
      export = jpgs;
    }
    
    declare module '*.png' {
      const pngs: any;
      export = pngs;
    }
    
    declare module '*.gif' {
      const gifs: any;
      export = gifs;
    }
    
    declare module '*.json' {
      const json: any;
      export = json;
    }
    declare module 'wangeditor' {
      const wangeditor: any;
      export = wangeditor
    }
    
    

    适配完最后的wangeditor之后报错就消失了,富文本也可以正常使用

    第四步:使用

    import React, { Component } from 'react';
    import E from 'wangeditor'
    // import { inject, observer } from 'mobx-react'
    // import { withRouter } from 'react-router-dom'
    
    // @withRouter @inject('appStore') @observer
    
    interface Props{
    
    }
    interface state{
        editorContent:string
    }
    class Editor extends Component<Props,state> {
        constructor(props:Props) {
            super(props);
            this.state = {
                editorContent:''
             };
        }
    
        componentDidMount() {
            const elemMenu = ".editorElem-menu";
            const elemBody = ".editorElem-body";
            const editor = new E(elemMenu,elemBody)
            // 使用 onchange 函数监听内容的变化,并实时更新到 state 中
            editor.customConfig.onchange = (html:any) => {
                console.log(editor.txt.html())
                this.setState({
                    // editorContent: editor.txt.text()
                    editorContent: editor.txt.html()
                })
            }
            editor.customConfig.menus = [
                'head',  // 标题
                'bold',  // 粗体
                'fontSize',  // 字号
                'fontName',  // 字体
                'italic',  // 斜体
                'underline',  // 下划线
                'strikeThrough',  // 删除线
                'foreColor',  // 文字颜色
                'backColor',  // 背景颜色
                'link',  // 插入链接
                'list',  // 列表
                'justify',  // 对齐方式
                'quote',  // 引用
                'emoticon',  // 表情
                'image',  // 插入图片
                'table',  // 表格
                'video',  // 插入视频
                'code',  // 插入代码
                'undo',  // 撤销
                'redo'  // 重复
            ]
            editor.customConfig.uploadImgShowBase64 = true
            editor.create()
        };
    
        render() {
            return (
                <div className="shop">
                    <div className="text-area" >
                        <div ref="editorElemMenu"
                             style={{backgroundColor:'#f1f1f1',border:"1px solid #ccc"}}
                             className="editorElem-menu">
                        </div>
                        {/* <div style={{padding: '5px 0', color: '#ccc'}}>中间隔离带</div> */}
                        <div
                            style={{
                                height:300,
                                border:"1px solid #ccc",
                                borderTop:"none"
                            }}
                            ref="editorElemBody" className="editorElem-body">
                        </div>
                    </div>
                </div>
            );
        }
    }
    
    export default Editor;
    
    展开全文
  • wangEditor的一些记录

    千次阅读 2020-11-30 11:32:35
    1、在vue中使用wangEditor 网上的资料一堆,但基本都是wangEditor3的运用,wangEditor4只需要把customConfig 改成config即可。 例如:关于在vue项目中使用wangEditor 2、标题样式、斜体样式不生效 感谢文章:...

    1、在vue中使用wangEditor

    网上的资料一堆,但基本都是wangEditor3的运用,wangEditor4只需要把customConfig 改成config即可。
    例如:关于在vue项目中使用wangEditor

    2、标题样式、斜体样式不生效

    感谢文章:https://blog.csdn.net/weixin_44258964/article/details/103213167
    原因:设置的全局样式导致样式失效
    解决:重新对编辑器的样式进行设置,覆盖全局即可

    通过查找原始默认样式:webkit内核的默认样式
    添加到你的.vue文件中覆盖reset.css的样式。

     /*
      *  以下样式由于全局reset文件被覆盖,所以需要重新定义
      */
      ::v-deep h5, .h5 {
        font-size: 14px;
      }
    
      ::v-deep h4, .h4 {
        font-size: 16px;
        font-weight: bold;
      }
    
      ::v-deep h3, .h3 {
        font-size: 18px;
        font-weight: bold;
      }
    
      ::v-deep h2, .h2 {
        font-size: 20px;
        font-weight: bold;
      }
    
      ::v-deep h1, .h1 {
        font-size: 22px;
        font-weight: bold;
      }
      ::v-deep i {
        font-style: italic
      }
      ::v-deep .w-e-toolbar .w-e-menu i {
        font-style: normal;
      }
      ::v-deep ol {
        list-style-type: decimal;
      }
    

    3、插入表格、引用等显示空白

    官网有说明这点:
    获取 html 中需要注意的是:从编辑器中获取的 html 代码是不包含任何样式的纯 html,如果显示的时候需要对其中的 <table> <code> <blockquote>等标签进行自定义样式(这样既可实现多皮肤功能)

    官网有提供样式参考,复制下来,改吧改吧就可以了。

     /* ul ol 样式 */
      ::v-deep ol{
        margin: 10px 0 10px 22px;
        list-style-type: decimal;
      }
      ::v-deep ul{
        margin: 10px 0 10px 22px;
        list-style-type: disc;
      }
      /* table 样式 */
      ::v-deep table {
        border-top: 1px solid #ccc;
        border-left: 1px solid #ccc;
      }
      ::v-deep table td,
      ::v-deep table th {
        border-bottom: 1px solid #ccc;
        border-right: 1px solid #ccc;
        padding: 3px 5px;
        height:32px;
      }
      ::v-deep table th {
        border-bottom: 2px solid #ccc;
        text-align: center;
        background-color: #f1f1f1 ;
      }
    
      /* blockquote 样式 */
      ::v-deep blockquote {
        display: block;
        border-left: 8px solid #d0e5f2;
        padding: 5px 10px;
        margin: 10px 0;
        line-height: 1.4;
        min-height: 24px;
        font-size: 100%;
        background-color: #f1f1f1;
      }
    
      /* code 样式 */
      ::v-deep code {
        display: inline-block;
        *display: inline;
        *zoom: 1;
        background-color: #f1f1f1;
        border-radius: 3px;
        padding: 3px 5px;
        margin: 0 3px;
      }
      ::v-deep pre code {
        display: block;
      }
      ::v-deep a {
        // text-decoration: underline;
        color: #5592e5;
      }
    

    3、编辑器实例化不成功报错

    解决:在mounted中实现

     mounted() {
         this.seteditor()
     },
     //methods
     seteditor(){
    	 const editor = new E(this.$refs.toolbar, this.$refs.editor)
    	 editor.config.placeholder = this.placeholder
    	 // ... 配置
    	 
    	 // 创建富文本编辑器
    	 this.editor = editor
    	 this.editor.create()
     },
    

    4、图片上传,复制的内容没有自动添加到服务器

    这里主要注意的是uploadFileName一定要根据你们的接口来!!!

    /**
    * 图片上传部分
    */
     editor.config.uploadImgShowBase64 = false // base 64 存储图片
     editor.config.uploadImgServer = host + '/api/common/file/image' // 配置服务器端地址
     editor.config.uploadImgHeaders = {} // 自定义 header
     editor.config.uploadFileName = 'image' // 后端接受上传文件的参数名 --> 重点修改,参考后台给的地址
     editor.config.uploadImgMaxSize = 10 * 1024 * 1024 // 图片大小限制  --> 看后台接口的限制
     editor.config.uploadImgMaxLength = 1 // 限制一次最多上传 1 张图片  --> 看后台接口的限制
     editor.config.uploadImgTimeout = 3 * 60 * 1000 // 设置超时时间
     editor.config.debug = false
    

    5、存在的XSS问题

    因为wangEditor的输出的是html和text, 如果你只需要纯文本就不需要用wangEditor了,我们的需求是输出html,数据库保存的也是html,如果是通过wangEditor组件输入的文本暂时没有发现xss的问题,因为组件有进行转义:

    <a href="javascript:alert(123)">123</a>
    转成:
    &lt;a href="javascript:alert(123)"&gt;123&lt;/a&gt;
    

    但是不通过文本框输入,而是直接拦截,改接口字段的话,就能进行xss攻击。

    我们暂时采用的是对返回文本进行过滤,通过DOMPurify这个插件。简单好用

    安装:
    npm install dompurify
    
    使用:
    import DOMPurify from 'dompurify'
    //res.content 是返回的脏html
    const content = DOMPurify.sanitize(res.content)
    

    当然,为了保险,后台也采用了过滤机制,使用了JSOUP,不过这个有个问题,img中的src如果是相对路径,会把src给过滤掉,这个需要注意在whitelist中进行一些配置修改。

    展开全文
  • 背景 公司的一个后台管理系统,关于新闻发布和公告之类的用到富文本编辑器,在父组件中引入编辑器组件,点击添加和编辑出现弹窗,编辑器放在弹窗里。 BUG1光标跳动问题 在网上找了博客,在子组件内部监听属性...

    爬坑背景

    公司的一个后台管理系统,关于新闻发布和公告之类的用到富文本编辑器,在父组件中引入编辑器组件,点击添加和编辑出现弹窗,编辑器放在弹窗里。

    BUG1光标跳动问题

    在父组件中引用组件的位置改成这样,去掉v-model,在data中定义变量initText 和 tempText

    <editor-bar :value="initText" @change="change"></editor-bar>
    

    在父组件的change方法中,先将子组件改变的值存起来

        change(val) {
          this.tempText = val;
        },
    

    点击编辑时,初始化富文本的内容

        // 编辑
        editRow(row) {
          this.title = "修改新闻";
          this.addDialog = true;
          this.formData = row;
          this.initText = this.formData.content;//重点
        },
    

    在提交表单时,表单验证之前,将当前富文本内容赋值给formData,一定要加判断,不然点击编辑没有修改时,提交表单验证不通过,内容会变成空。

    if (this.tempText !== "") this.formData.content = this.tempText;
    

    BUG3编辑富文本内容没有提交,关闭弹窗后依旧是刚编辑过的内容

    在关闭弹窗时对表单进行重置就可以了

    前端小白第一次写博客,用什么问题请多多指出!共同进步!

    展开全文
  • 地址:http://www.wangeditor.com/, gitHub:...1)首先终端中安装npm i wangeditor <divref="editor"style="text-align:left"class="text"></div> 2) 引入富...

    地址:http://www.wangeditor.com/,

    gitHub:https://github.com/wangfupeng1988/wangEditor/blob/master/example/demo/in-vue/src/components/Editor.vue

    1)首先终端中安装 npm i wangeditor

       <div ref="editor" style="text-align: left" class="text"></div>

    2) 引入富文本编辑器 import E from "wangeditor"

    3)以前的时候这样用时不会报错,现在确不行了,怀疑时wangeditor更新改版了,下的包有些内容不一样,造成下面这个错

      

      4)改变层级的话,我在游览器中调试  ,可以用css改变

      

    // /deep/.w-e-toolbar {
        //   z-index: 100 !important;
        // }
        // /deep/.w-e-text-container {
        //   z-index: 100 !important;
        // }

    5)当然不用CSS改变的话,要在层级和内容

     var editor = new E(this.$refs.editor); //此处不能用
        console.log(editor);

      发现这个editor 中

     

     editor.config.onchange和editor.zIndex.baseZIndex才取到内容和层级 在按照1)2)操作

     npm i wangeditor

      引入富文本编辑器 import E from "wangeditor"

      mounted() {
        var editor = new E(this.$refs.editor); //此处不能用
        console.log(editor);
        // editor.customConfig.onchange = (html) => {
        //   this.articalObj.content = html;
        // };
        // editor.customConfig.zIndex = 100;  //这个不能用了
        editor.config.onchange = (html) => {
          this.articalObj.content = html;
        };
        editor.zIndex.baseZIndex = 100;
        editor.create();
      },

    总结:如果取不到的情况下,可以console.log下,看看控制台有没有自己要的

    展开全文
  • vue2.0中引入wangEditor2 步骤与

    千次阅读 2017-11-07 10:38:50
    安装:官方给出了如下安装方式点击 https://github.com/wangfupeng1988/wangEditor/releases 下载最新版 使用git下载: git clone ...使用npm安装: npm install wangeditor (...
  • 1,vue中安装wangEditor 进入项目目录, 使用的npm安装 npm install wangeditor 2,创建公用组件 在components中创建wangEnditor文件夹 组件内容为 <template lang="html"> <div class="editor"> <...
  • wangeditor富文本编辑器的一些

    千次阅读 2019-04-04 01:11:51
    看到CSDN都在用wangeditor而且用起来的确简单,可是图片上传还是一直搞不定。 1.返回格式问题 官方要求返回json格式,先定义字典赋值,然后采用json.dumps(result,ensure_ascii=False)进行后端返回: { "errno...
  • <script type="text/javascript" src="https://unpkg.com/wangeditor@3.1.1/release/wangEditor.min.js"> var E = window.wangEditor var editor = new E('#div1') var $text1 = $('#text1') //editor.custom...
  • 一共尝试了 Tinymce、UEditor、Quill等好几种编辑器,最终觉得最满意的是 WangEditor。 1、Tinymce 开源项目ElementAdmin自带的例子,图片上传 竟然存的是 base64。 没有看出,怎么指定后端url。 另外,这个...
  • Vue中使用wangeditor

    2021-03-31 15:29:23
    最近项目使用到富文本,在一番谈论下决定用wangeditor富文本 使用 npm 安装 npm i wangeditor --save 使用 cdn 安装 <script type="text/javascript" src=...
  • 自从这个富文本的出现 我就慢慢的进入了一个,起初不知道用什么编辑器好,看了好多好多,最后选择了。这个 wangeditor3。个人认为这个富文本很干净,还很多功能。 选择了编辑器 我就慢慢的走进了的道理,一步...
  • 1:使用文本编辑器的时候,文本编辑器会不现实 -->解决方法:在执行完获取列表以后,我添加了一个延迟函数,其实代码可优化成执行完获取列表这个函数以后再执行编辑器的这个方法。 2:因为是在表格中使用,...
  • wangEditor图片批量上传

    千次阅读 2018-05-31 16:27:57
    最近公司网站改版,个人负责后台管理系统的开发...在进行内容编辑的时候采用了wangEditor富文本编辑,在使用过程中图片多张上传时遇到了一个:   editor.customConfig.customUploadImg = function (files, ins...

空空如也

空空如也

1 2 3 4 5 ... 12
收藏数 238
精华内容 95
关键字:

wangeditor的坑