修改Zblog编辑页代码插入方式

类别：FRONTEND / 前端 / 日期：2020-11-28 / 浏览：5470 / 评论：0

    可能你跟我一样喜欢在文章中间插入图片，代码，特效这些小玩意，但是奈何有些时候插件他就只支持插入尾部代码，这种情况就会导致插入代码之后你还要剪切粘贴代码到其他位置。如果不想这样折腾，那就好好参考下今天的主题吧，纯干货！

    首先，我们拿个调用JS的例子参考一下。

function APlayer_Edit(){
    global $zbp;
	echo '<script src="'.$zbp->host.'zb_users/plugin/APlayer/add_hide.js" type="text/javascript"></script>';
}

$(function () {
	$("#msg").after("<a href='javascript:void(0)' onclick='APlayer_Edit_HIDE()' title='添加音乐播放器'><strong>[添加音乐播放器]</strong></a>");
});
function APlayer_Edit_HIDE() {
	var oBody = editor_api.editor.content.get();
	oBody = oBody + "<p>[url=\"#\" pic=\"#\" lrc=\"#\" autoplay=\"true\"]</p>";
	editor_api.editor.content.put(oBody);
}

    上面大致的意思是加载名为APlayer_Edit的功能，这个功能则专门调用一个名为add_hide.js的文件，所以我们这里主要修改的是JS文件。

    这里会涉及两个小问题，第一个就是开头的$("#msg")，如果这个位置不修改的话，不管你挂载的输出接口是Filter_Plugin_Edit_Response5还是Filter_Plugin_Edit_Response3，他都会锁定输出在id为msg的接口模块上。第二个问题则是符号转义，在JS里所有双引号要直接放入JS里面必须要经过转义，也就是前面加一个斜杠，或者直接用单引号替换双引号也是可以的。

    下面进入正题，根据代码可得知现在的输出步骤为复制现有内容+新插入代码然后输入，我们将其修改如下

function APlayer_Edit_HIDE() {
    var oBody = editor_api.editor.content.insert("<p>[url=\"#\" pic=\"#\" lrc=\"#\" autoplay=\"true\"]</p>");
}

    将原本的复制现有内容+新插入代码更改为直接插入新代码即可。如果的担心插件多导致服务器并发问题，也可以通过echo输入到php文件中，具体如下

function caizilu_password_edit(){
	global $zbp,$article;
		echo '<div class="editmod"><a class="editinputname" href="javascript:void(0)" onclick="password_show()" title="添加验证密码内容">[添加验证密码内容]</a></div>';
		//添加至文章底部 
		//echo'<script>function password_show(){var oBody = editor_api.editor.content.get();oBody = oBody + "<p>[password]密码查看内容[/password]</p>";editor_api.editor.content.put(oBody);}</script>';
		echo'<script>function password_show(){var oBody = editor_api.editor.content.insert("<p>[password]密码查看内容[/password]</p>");}</script>';
}

    上面的代码保留了原代码并进行了注释，方便参考。

赞助