如何动态设置ueditor的预览模式

UEditor是一款开源的富文本编辑器,可以用于实现各种格式的文档编辑。在web项目开发中使用UEditor时,需要添加相应的代码。 显示完整的ueditor界面 通过在jsp页面中添加以下代码,

UEditor是一款开源的富文本编辑器,可以用于实现各种格式的文档编辑。在web项目开发中使用UEditor时,需要添加相应的代码。

显示完整的ueditor界面

通过在jsp页面中添加以下代码,即可在页面中看到完整的UEditor界面。

lt;script type"text/javascript" src""gt;lt;/scriptgt;
lt;script type"text/javascript" src""gt;lt;/scriptgt;
lt;script type"text/javascript"gt;
    var editor  ('editor');
lt;/scriptgt;

定制工具栏按钮

如果工具栏中的按钮太多或者有些按钮在项目中并不需要,可以使用以下方法进行定制。

lt;script type"text/javascript" src""gt;lt;/scriptgt;
lt;script type"text/javascript" src""gt;lt;/scriptgt;
lt;script type"text/javascript"gt;
    var editor  ('editor', {
        toolbars: [['bold','italic','underline']]
    });
lt;/scriptgt;

动态改变工具栏按钮

有时候我们需要根据需求动态改变工具栏中显示的按钮,比如先浏览一篇文章时只需要少量的工具栏按钮,点击编辑按钮后才显示更多按钮。

通过调用UEditor的API中的destroy()函数,可以将编辑器销毁并退回到textarea状态,只需将下面的代码封装成一个函数,并在需要的时候调用该函数即可。

function setToolbar(buttons) {
    ();
    editor  ('editor', {
        toolbars: [buttons]
    });
}

这样就实现了动态控制工具栏按钮的需求。

标签: