首页 » 网站推广 » neditorphp技巧_Neditor基于Ueditor的一款现代化界面的富文本编辑器

neditorphp技巧_Neditor基于Ueditor的一款现代化界面的富文本编辑器

访客 2024-11-17 0

扫一扫用手机浏览

文章目录 [+]

Neditor.tar.xz

办法二: npm安装

neditorphp技巧_Neditor基于Ueditor的一款现代化界面的富文本编辑器

npm i @notadd/neditor -S

neditorphp技巧_Neditor基于Ueditor的一款现代化界面的富文本编辑器
(图片来自网络侵删)

//办法三:编译安装git clone https://github.com/notadd/neditor.ginpm installnpm run build

第二步:在浏览器打开 index.html

进入到目录 dist , 利用浏览器打开文件 index.html

利用

创建demo文件

解压下载的包,在解压后的目录创建 demo.html 文件,填入下面的html代码

<!DOCTYPE HTML><html lang="en-US"><head> <meta charset="UTF-8"> <title>ueditor demo</title></head><body> <!-- 加载编辑器的容器 --> <script id="container" name="content" type="text/plain"> 这里写你的初始化内容 </script> <!-- 配置文件 --> <script type="text/javascript" src="ueditor.config.js"></script> <!-- 编辑器源码文件 --> <script type="text/javascript" src="ueditor.all.js"></script> <!-- 实例化编辑器 --> <script type="text/javascript"> var ue = UE.getEditor('container'); </script></body></html>

在浏览器打开demo.html

如果看到了下面这样的编辑器,恭喜你,初次支配成功!

传入自定义的参数

编辑器有很多可自定义的参数项,在实例化的时候可以传入给编辑器:

var ue = UE.getEditor('container', { autoHeight: false});

设置和读取编辑器里的内容

通 getContent 和 setContent 方法可以设置和读取编辑器的内容

var ue = UE.getContent();//对编辑器的操作最好在编辑器ready之后再做ue.ready(function() { //设置编辑器的内容 ue.setContent('hello'); //获取html内容,返回: <p>hello</p> var html = ue.getContent(); //获取纯文本内容,返回: hello var txt = ue.getContentTxt();});定制工具栏图标

配置项修正解释

修正配置项的方法: 1. 方法一:修正 ueditor.config.js 里面的 toolbars 2. 方法二:实例化编辑器的时候传入 toolbars 参数

var ue = UE.getEditor('container');

大略列表

toolbars: [ ['fullscreen', 'source', 'undo', 'redo', 'bold']]

多行列表

toolbars: [ ['fullscreen', 'source', 'undo', 'redo'], ['bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc']]

两行

支配包目录解释

支配包解压后的文件目录构造如下所示

dialogs: 弹出对话框对应的资源和JS文件lang: 编辑器国际化显示的文件php或jsp或asp或net: 涉及到做事器端操作的后台文件themes: 样式图片和样式文件third-party: 第三方插件(包括代码高亮,源码编辑等组件)ueditor.all.js: 开拓版代码合并的结果,目录下所有文件的打包文件ueditor.all.min.js: ueditor.all.js文件的压缩版,建议在正式支配时采取ueditor.config.js: 编辑器的配置文件,建媾和编辑器实例化页面置于同一目录ueditor.parse.js: 编辑的内容显示页面引用,会自动加载表格、列表、代码高亮等样式ueditor.parse.min.js: ueditor.parse.js文件的压缩版,建议在内容展示页正式支配时采取

源码包目录解释

二次开拓办法

无需对 UEditor 代码做任何修正,只需在UEditor之外通过UEditor供应的二次开拓接口开拓定制功能.这种开拓办法不仅避免了修正UEditor源码,方便日后UEditor的升级,而且通过接口,可以将开拓的定制功能掩护到一个文件中或者一个目录中,方便日后对其掩护。

支配定制功能

对付 UEditor 的二次开拓,一样平常多为添加按钮,下拉筐或者是添加一个dialog。
基于这几种常规的办法,我在_examples目录下分别书写了3个类型的定制demo。

addCustomizeButton.js 添加一个按钮addCustomizeCombox.js 添加一个下拉框addCustomizeDialog.js 添加一个弹出层

除了添加弹出层须要一个额外的html页面外,对付须要添加和修正的功能代码全部都掩护到一个js文件中了。
利用文件的办法:

<script type="text/javascript" charset="utf-8" src="../ueditor.config.js"></script><script type="text/javascript" charset="utf-8" src="editor_api.js"></script><script type="text/javascript" charset="utf-8" src="../lang/zh-cn/zh-cn.js"></script><!--添加按钮--><script type="text/javascript" charset="utf-8" src="addCustomizeButton.js"></script>

新添加的按钮就完成了。
实例化编辑器时,无需再而外添加任何代码。

开拓细节前面讲了如何支配你的功能,这个小节来和大家讲一下,UEditor供应那些接口,让大家可以在编辑器之外扩展你的功能。

UE.registerUI('uiname', function(editor, uiname) { //do something}, [index, [editorId]]);

考虑到大家的功能基本上都会扩展一个UI和这个UI做的事情,以是UEditor供应了registerUI这个接口,可以让开发者动态的注入扩展的内容。

uiname,是你为新添加的UI起的名字,这里可以是1个或者多个,“uiname”后者是“uiname1 uiname2 uiname3”function,是实际你要做的事情,这里供应两个参数,editor是编辑器实例,如果你有多个编辑器实例,那每个编辑器实例化后,都会调用这个function,并且把editor传进来,uiname,你为ui起的名字,如果前边你添加的是多个的化,这里function会被调用多次,并且将每一个ui名字通报进来.如果函数返回了一个UI 实例,那这个UI实例就会被默认加到工具栏上。
当然也可以不返回任何UI。
比如希望监控selectionchange事宜,在某些场景下弹出浮层,这时就不须要返回任何UI.index,是你想放到toolbar的那个位置,默认是放到末了editorId,当你的页面上有多个编辑器实例时,你想将这个ui扩展到那个编辑器实例上,这里的editorId是给你编辑器初始化时,传入的id,默认是每个实例都会加入你的扩展

添加按钮

UE.registerUI('button', function(editor, uiName) { //注册按钮实行时的command命令,利用命令默认就会带有回退操作 editor.registerCommand(uiName, { execCommand: function() { alert('execCommand:' + uiName) } }); //创建一个button var btn = new UE.ui.Button({ //按钮的名字 name: uiName, //提示 title: uiName, //添加额外样式,指定icon图标,这里默认利用一个重复的icon cssRules: 'background-position: -500px 0;', //点击时实行的命令 onclick: function() { //这里可以不用实行命令,做你自己的操作也可 editor.execCommand(uiName); } }); //当点到编辑内容上时,按钮要做的状态反射 editor.addListener('selectionchange', function() { var state = editor.queryCommandState(uiName); if (state == -1) { btn.setDisabled(true); btn.setChecked(false); } else { btn.setDisabled(false); btn.setChecked(state); } }); //由于你是添加button,以是须要返回这个button return btn;});

更多内容:https://gitee.com/notadd/neditor

标签:

相关文章

招商蛇口中国房地产龙头企业,未来可期

招商蛇口(股票代码:001979),作为中国房地产企业的领军企业,自成立以来始终秉持“以人为本,追求卓越”的经营理念,致力于打造高...

网站推广 2025-02-18 阅读1 评论0