项目中使用富文本编辑器
-
百度富文本编辑器 Ueditor
基本使用:下载源码 →放入项目中引用(vue2可以放到static文件夹中,如果是vue3放到public文件夹中 )→使用
例:编辑器有很多可自定义的参数项,在实例化的时候可以传入给编辑器,详询 API文档→http://fex.baidu.com/ueditor/
<div id="container"></div>
this.editor = window.UE.getEditor('container', {
toolbars: [
['fullscreen', 'source', 'undo', 'redo', 'bold']
],
autoHeightEnabled: true,
autoFloatEnabled: true
});
this.editor.addListener('ready', () => {
this.editor.setContent('hello') ;//设置编辑器内容
})
this.editor.addListener('contentchange', () => { //内容变化时获取编辑器内容
let html= this.editor.getContent() //获取html内容,返回: <p>hello</p>
let txt=this.editor.getContentTxt() //获取纯文本内容,返回: hello
})
效果展示:
-
wangEditor Typescript 开发的 Web 富文本编辑器, 轻量、简洁、易用、开源免费 (兼容常见的 PC 浏览器:Chrome,Firefox,Safari,Edge,QQ 浏览器,IE11。不支持移动端)
基本使用 API文档→http://www.wangeditor.com/doc/
1.下载
npm 安装
npm i wangeditor --save
CDN 链接
https://unpkg.com/wangeditor/dist/wangEditor.min.js
2-1.使用 js 外链引入
<div id="div1">
<p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>
</div><script type="text/javascript" src="//unpkg.com/wangeditor/dist/wangEditor.min.js"></script>
<script type="text/javascript">
const E = window.wangEditor
const editor = new E('#div1')
// 或者 const editor = new E( document.getElementById('div1') )
editor.create()
</script>
2-2使用 npm 安装<div ref="editorElem" style="width:800px;"></div>
import E from "wangeditor";
this.editor = new E(this.$refs.editorElem);
this.editor.config.onchange = html => { // 编辑器的事件,每次改变会获取其html内容
this.editorContent = html;
};
this.editor.config.height = 100;
this.editor.config.menus = [
// 菜单配置
'head', // 标题
'bold', // 粗体
'fontSize', // 字号
'fontName', // 字体
'italic', // 斜体
'underline', // 下划线
'strikeThrough', // 删除线
'foreColor', // 文字颜色
'backColor', // 背景颜色
'link', // 插入链接
'list', // 列表
'justify', // 对齐方式
'quote', // 引用
'emoticon', // 表情
'image', // 插入图片
'table', // 表格
'code', // 插入代码
'undo', // 撤销
'redo' // 重复
];this.editor.create(); // 创建富文本实例
let txt=this.editor.txt.text();//获取纯文本
let html=this.editor.txt.html(); //获取内容
this.editor.txt.html('sasasasasasa');//设置编辑器内容
this.editor.txt.clear(); //清空编辑器内容
效果展示:
----------------------------------------《完》-----------------------------------------欢迎指正