首先，本文中的代码在不使用AJAX的场景中。

我们需要知道几点：

0、wangEditor v3 默认只支持div方式显示出编辑器。

1、wangEditor 从v3版本开始不支持 textarea ，但是可以通过onchange来实现 textarea 中提交富文本内容。

2、div是无法向后台传递值的，F12看下编辑器div的属性就知道了。

整体思路：

0、创建一个div用来显示出编辑器。

1、通过代码给textarea传递编辑器div中p标签的值。

2、我们给textarea一个name属性。

3、在后端接收值。

参考手册：

https://www.kancloud.cn/wangfupeng/wangeditor3/430149

官方实例：

使用 textarea

    <div id="div1"><p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p></div><!--我在这做了修改，给了一个name属性，方便后端接收值--><textarea name="content" id="text1" style="width:100%; height:200px;"></textarea><script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script><script type="text/javascript" src="../wangEditor.js"></script><script type="text/javascript">var E = window.wangEditorvar editor = new E('#div1')var $text1 = $('#text1')editor.customConfig.onchange = function (html) {// 监控变化，同步更新到 textarea$text1.val(html)}editor.create()// 初始化 textarea 的值$text1.val(editor.txt.html())</script>

THINKPHP5.1使用富文本编辑器wangEditor相关推荐

使用富文本编辑器wangEditor完成图片文件的上传
项目中一些特定的功能可能需要在页面中用到富文本编辑器来实现文件的输入上传等等,在这里用wangEditor来实现使用富文本编辑器进行文件图面的输入和上传保存,这里wangEditor也可以参考wang ...
vue中使用富文本编辑器wangEditor及踩坑
因为上传图片的问题使用过了各种富文本,最后发现还是这个比较好用.分享记录一下. 安装 npm install wangeditor --save 新建一个wangeditor.vue(组件),代码内容 ...
Vue cli项目，使用富文本编辑器WangEditor，8小时摸爬滚打后，弃坑Tinymce、UEditor、Quill
一共尝试了 Tinymce.UEditor.Quill等好几种编辑器,最终觉得最满意的是 WangEditor. 1.Tinymce 开源项目ElementAdmin自带的例子,图片上传竟然存的是 ...
前端使用富文本编辑器wangEditor
一.npm下载终端输入 npm i wangeditor --save 二.代码此处已经把富文本编辑器抽出为组件: 组件内容: <template lang="html" ...
【WangEditor】使用富文本编辑器 WangEditor 实现用户自定义图片大小（改js源码）
效果图 1.WangEditor本身提供的 "编辑图片" 功能,调整图片大小选项只能为30%,50%,100%. 2.修改 wangEditor.js 源码后,用户可以输入自定义大 ...
使用富文本编辑器wangEditor
wangEditor说明文档使用步骤: 1.安装依赖 yarn add wangeditor --save 2.引入 import E from 'wangeditor' 3.指定容器并在mount ...
在vue3中使用富文本编辑器WangEditor
yarn add @wangeditor/editor # 或者 npm install @wangeditor/editor --saveyarn add @wangeditor/editor-fo ...
vue获取编辑器纯文字_vue中使用富文本编辑器
前端使用富文本编辑器的插件有很多,今天献上wangeditor的使用教程,教你如何在vue中使用富文本编辑器 wangeditor是一个萌新富文本编辑器,基于js和css,重点在于它轻量,如果你需要的 ...
Django 3.2.5博客开发教程:使用富文本编辑器添加数据
在Django admin后台添加数据的时候,文章内容文本框想发布一篇图文并茂的文章需就得手写Html代码,这十分吃力,也没法上传图片和文件.这显然不是我等高大上程序猿想要的. 为提升效率,我们可以使 ...

THINKPHP5.1使用富文本编辑器wangEditor

使用 textarea

THINKPHP5.1使用富文本编辑器wangEditor相关推荐

最新文章

热门文章