wangeditor

wangEditor的使用 第一步，将其下载，并引入项目中。 第二步，引入js <script type="text/javascript" src="/plugin/wangEditor/release/wangEditor.min.js"></script> 第三步，初始化对象 <span class="col-lg-8" id="editor"></span> var E = window.wangEditor; var editor = new E('#editor'); editor.create(); 第四步，添加一些配置 配置菜单 // 自定义菜单配置 editor.customConfig.menus = [ 'head', // 标题 'bold', // 粗体 'fontSize', // 字号 'fontName', // 字体 'italic', // 斜体 'underline', // 下划线 'strikeThrough', // 删除线 'foreColor', // 文字颜色 'backColor', // 背景颜色 'link', // 插入链接 'list', // 列表 'justify', // 对齐方式 'quote', // 引用 'emoticon', // 表情 'image', // 插入图片 'table', // 表格

　　最近在Angular中需要集成富文本编辑器,本来已经集成好百度的UEditor,后台觉得配置太多，让我弄个别的，然后就找到了wangEditor,这个配置和上手都要简单一些，下面来看看具体操作步骤吧： 　　首先大家可以在https://github.com/wangfupeng1988/wangEditor或者官网http://www.wangeditor.com/ 进行下载，里面文档内容也很容易理解，可以自行配置。下载后解压，我们需要用到的主要是wangEditor.js或者 wangEditor.min.js。下面附上目录及代码: 1 < html > 2 < head > 3 < title > angular集成wangEditor </ title > 4 < meta charset ="utf-8" > 5 < script src ="js/angular.min.js" ></ script > 6 < script src ="js/wangEditor.min.js" ></ script > 7 </ head > 8 < body ng-app ="myApp" ng-controller ="myCtrl" > 9 < div id ="editor" ng-model ="sendPromt" ></ div > 10 < button ng

最近用AngularJS2(ng alain)搭建的项目需求中需要富文本，在网上找了很多，要么太重，要么没有详细的集成步骤。 下面将我自己如何将wangeditor集成在项目(项目名称myPro)中的，详细列出。 具体操作步骤 操作步骤参考： https://github.com/fengnovo/wangEditor/tree/master/example/demo/in-ng2 编辑器操作参考文档： https://www.kancloud.cn/wangfupeng/wangeditor2/113969 但是还是没起来，控制台报错，找不到元素。只能自己修改了。 (1)安装wangeditor 项目跑起来之后，安装wangeditor。需要加版本安装，我目前用的是2.1.23，不知道为啥，安装其他版本还是会报错，目前没找到原因。 // 安装命令 npm install wangeditor@2.1.23 --save (2)修改tsconfig.json文件 myPro/tsconfig.json文件，这是最终的代码。 { "compileOnSave": false, "compilerOptions": { "baseUrl": "./", "outDir": "./dist/out-tsc", "sourceMap": true, "declaration": false

wangEditor —— 轻量级 web 富文本编辑器，配置方便，使用简单。支持 IE10+ 浏览器。 官网： www.wangEditor.com 文档： www.kancloud.cn/wangfupeng/wangeditor3/332599 源码： github.com/wangfupeng1988/wangEditor 来源官网 使用 var E = window .wangEditor var editor2 = new E ( '#div3' ) editor2 . create ( ) 运行 demo 下载源码 git clone git@github.com:wangfupeng1988/wangEditor.git 安装或者升级最新版本 node（最低 v6.x.x ） 进入目录，安装依赖包 cd wangEditor && npm i 安装包完成之后，windows 用户运行 npm run win-example ，Mac 用户运行 npm run example 打开浏览器访问 localhost:3000/index.html 用于 React 或者 vue 可查阅 文档 中“其他”章节中的相关介绍 下载 点击 https://github.com/wangfupeng1988/wangEditor/releases 下载最新版。进入 release

1.执行：npm install --save wangeditor 2.在你需要调用编辑器的vue文件中引入 wangeditor： import E from 'wangeditor' 页面调用： < div id ="editor" > <!-- <p>{{addFormData.content?'请输入正文':addFormData.content}} </p> --> </ div > 初始化编辑器： 在 mounted 方法中： that.$nextTick( function () { // Code that will run only after the // entire view has been rendered // 创建编辑器 that.editor = new E('#editor' ) // 自定义菜单配置 that.editor.customConfig.menus = [ 'bold', // 粗体 'italic', // 斜体 'head', // 标题 'quote', // 引用 'list', // 列表 'link', // 插入链接 'image', // 插入图片 'table', // 表格 ] that.editor.customConfig.onchange = function (html) { if (html

1 下载 //（注意 wangeditor 全部是小写字母） npm install wangeditor 2 项目中引用 import E from 'wangeditor' 3 在这里插入代码片 <div id="editor" class="editor"></div> <button v-on:click="getContent">查看内容</button> 4 js 代码 export default { name: 'editor', data () { return { editorContent: ''，//定义为全局变量 editor:'' //定义为全局变量 } }, methods: { getContent: function () { this.editor.txt.html('') //清空富文本框 alert(this.editorContent) this.editor.txt.html(“内容”); //富文本框设置内容 } }, mounted() { var editor = new E('#editorElem') editor.customConfig.onchange = (html) => { this.editorContent = html //内容复制 } editor.create() } } 来源： CSDN 作者： ——爱

https://cloud.tencent.com/developer/article/1141421 几种富文本编辑器 默认情况下CKEditor是没有上传图片功能的，可以在编辑器中粘贴图片，这样的话保存在数据库中的是图片的源文件，这很容易出现问题，即使字段是text格式的也很容易就超出最大范围了，所以要配合kcfinder来上传文件。一个是ck一个是kc真实一对好兄弟。 总体看了下,最简洁明了的叫做wangEditor 加在easyui中是这样的: <script> // CKEDITOR.replace('editor1'); //wangEditor var E = window.wangEditor; var editor = new E("#wangEditor"); // 下面两个配置，使用其中一个即可显示“上传图片”的tab。但是两者不要同时使用！！！ // editor.customConfig.uploadImgShowBase64 = true // 使用 base64 保存图片 editor.customConfig.uploadImgServer = 'http://test91.ykmimi.com/upload/newspic/0'; // 上传图片到服务器 //设定上传文件名字 editor.customConfig.uploadFileName =

最近有需求，需要在项目中做一个pc与移动端都适配的富文本编辑器，网上查到用wangEditor编辑器的比较多，于是打算练习一下 官网地址： http://www.wangeditor.com/ bootcdn上有一个10版本的 不过在网上没看到有人使用过10版本的先使用3的最新版本吧 简单例子 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="editor"> <p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p> </div> <script src="https://cdn.bootcss.com/wangEditor/10.0.13/wangEditor.min.js"></script> <script type="text/javascript"> var E = window.wangEditor var editor = new E('

使用 textarea wangEditor 从v3版本开始不支持 textarea ，但是可以通过onchange来实现 textarea 中提交富文本内容。 点击这里 => 参考官网教程 <= < div id = "div1" > < p > 欢迎使用 < b > wangEditor < / b > 富文本编辑器 < / p > < / div > < textarea 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 . wangEditor var editor = new E ( '#div1' ) var $text1 = $ ( '#text1' ) editor . customConfig . onchange = function ( html ) { // 监控变化

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> Java富文本编辑之图片链接本地化 作者：邵发 官网： http://afanihao.cn/java 本文介绍在图文混编项目中（博客、新闻等），如何将富文本中的图片外链转为本地链接的问题。本文是Java学习指南系列教程的官方配套文档，项目源码在本文末尾说明。 所谓富文本Rich Text，就是以HTML形式表示的文本。在前端通常由富文本编辑器得到，比如UEditor，KindEditor，wangEditor等富文本编辑器。在富文本中可能存在外链的图片链接，那么后台如何将外链图片转为本站链接，是本文要讨论的话题。 1. 富文本编辑器 在需要实现图文混排功能时，可以使用前端的富文本编辑器。常见的富文本编辑器有 UEditor, KindEditor, wangEditor等，使用起来大同小异。比如，下图以KindEditor来演示。 在提交给后台时，可以调用编辑器提供的API来获取编辑器里面的HTML文本，里面包含了CSS样式和图片链接。关于富文本编辑器的使用，不在本文中详述。 2. 富文本中的图片外链 当富文本中包含了图片外链接，一般要求将外链转换为本站链接。 例如以下文本： <p> 根据外媒报道，12月6日，美国海军最新的两栖攻击舰“美国”号抵达了日本佐世保，加入了美国海军第七舰队。 </p> <p