Как реализовать инструмент сравнения и слияния в редакторе ACE

Инструмент сравнения используется для сравнения текстовых различий между двумя текстовыми файлами. Если вы разработчик (если нет, как вы попали сюда?), Вы, вероятно, видели этот вид инструмента в известных IDE, таких как Netbeans и Sublime. В этой статье мы собираемся показать, как реализовать очень полезную и простую в использовании реализацию diff для знаменитого редактора ACE в Javascript.

Требования

Для реализации управления diff / merge для Редактор ACE мы будем зависеть от плагина Ace-diff, написанного @benkeen. Этот плагин является оболочкой для Ace Editor, который предоставляет инструмент для слияния и объединения двух панелей, который визуализирует различия в двух документах и ​​позволяет копировать изменения из одного в другой. Он построен на вершине Google-Diff-матч-патч библиотека.

Чтобы внедрить этот инструмент в свой проект, получите копию ace-diff.js или же ace-diff.min.js файл в / dist папка проекта в Github. и diff_match_patch.js файл в / libs папка проекта в Github. Затем перейдите к добавлению тега скрипта в ваш документ, который включает в себя необходимые плагины (после редактора ACE):


Посетить Официальный репозиторий ace-diff в Github здесь если вам нужна дополнительная информация. После этого вы сможете создать AceDiff класс в вашем документе. Однако для визуализации редактора вы еще не готовы! перейдите к добавлению CSS для правильной визуализации редактора.

Замечания: в соответствии с местом в документе, в котором вы хотите найти элемент управления, вам необходимо изменить некоторые свойства. Вы можете изменить имя классов так, как вам хочется, но не забудьте также изменить их при инициализации со свойством classes в Javascript.

Добавьте следующий CSS, связав .css файл в ваш документ или в пределах style тег:

#flex-container {
display: flex;
display: -webkit-flex;
flex-direction: row;
position: absolute;
bottom: 0;
width: 100%;
top: 0px !important;
left: 0px;
/* these 3 lines are to prevents an unsightly scrolling bounce affect on Safari */
height: 100%;
width: 100%;
overflow: auto;
}
#flex-container>div {
flex-grow: 1;
-webkit-flex-grow: 1;
position: relative;
}
#flex-container>div#acediff-gutter {
flex: 0 0 60px;
-webkit-flex: 0 0 60px;
border-left: 1px solid #999999;
border-right: 1px solid #999999;
background-color: #efefef;
overflow: hidden;
}
#acediff-gutter svg {
background-color: #efefef;
}
.acediff-class {
position: absolute !important;
top: 0;
bottom: 0;
width: 100%;
}
.acediff-diff {
background-color: #d8f2ff;
border-top: 1px solid #a2d7f2;
border-bottom: 1px solid #a2d7f2;
position: absolute;
z-index: 4;
}
.acediff-diff.targetOnly {
height: 0px !important;
border-top: 1px solid #a2d7f2;
border-bottom: 0px;
position: absolute;
}
.acediff-connector {
fill: #d8f2ff;
stroke: #a2d7f2;
}
.acediff-copy-left {
float: right;
}
.acediff-copy-right,
.acediff-copy-left {
position: relative;
}
.acediff-copy-right div {
color: #000000;
text-shadow: 1px 1px #ffffff;
position: absolute;
margin: 2px 3px;
cursor: pointer;
}
.acediff-copy-right div:hover {
color: #004ea0;
}
.acediff-copy-left div {
color: #000000;
text-shadow: 1px 1px #ffffff;
position: absolute;
right: 0px;
margin: 2px 3px;
cursor: pointer;
}
.acediff-copy-left div:hover {
color: #c98100;
}

И вы готовы начать.

Реализация

Элемент управления diff должен иметь следующую разметку:


И вы можете инициализировать с помощью следующего JS:


var aceDiffer = new AceDiff({
left:{
id:"editor-left"
},
right:{
id:"editor-right"
}
});

Обратите внимание, что плагин предоставляет все следующие параметры, которые вы можете изменить, чтобы манипулировать инструментом по своему усмотрению:

{
mode: null,
theme: null,
diffGranularity: 'broad',
showDiffs: true,
showConnectors: true,
maxDiffs: 5000,
left: {
id: 'acediff-left-editor',
content: null,
mode: null,
theme: null,
editable: true,
copyLinkEnabled: true
},
right: {
id: 'acediff-right-editor',
content: null,
mode: null,
theme: null,
editable: true,
copyLinkEnabled: true
},
classes: {
gutterID: 'acediff-gutter',
diff: 'acediff-diff',
connector: 'acediff-connector',
newCodeConnectorLink: 'acediff-new-code-connector-copy',
newCodeConnectorLinkContent: '→',
deletedCodeConnectorLink: 'acediff-deleted-code-connector-copy',
deletedCodeConnectorLinkContent: '←',
copyRightContainer: 'acediff-copy-right',
copyLeftContainer: 'acediff-copy-left'
}
}

Кроме того, вы все равно можете получить доступ к обычным свойствам редакторов ACE, используя полезный API:

  • aceInstance.getEditors(): этот метод возвращает объект с left а также right свойства. Каждый содержит ссылку на оригинальный редактор Ace, на случай, если вам нужно что-то с ними сделать.
  • aceInstance.setOptions(): это позволяет вам установить многие из параметров, упомянутых ранее динамически. Обратите внимание, что некоторые вещи, используемые при создании редактора, например классы не могут быть переопределены.
  • aceInstance.getNumDiffs(): возвращает количество отображаемых различий.
  • aceInstance.diff(): обновляет дифференциал Это никогда не должно требоваться, потому что AceDiff автоматически распознает ключевые события, такие как изменения в редакторе и изменение размера окна.
  • aceInstance.destroy(): уничтожает экземпляр AceDiff, уничтожает оба редактора и очищает желоб.

Как вы можете видеть, работа с AceDiff действительно проста и функциональна. Смотрите следующие типовые примеры использования:

С начальным содержанием

Вы можете настроить управление diff, начиная с простого HTML, т.е.


{
propertyA: 12,
propertyB: 123,
propertyC: 321,
}
{
propertyA: 12,
propertyZ: 123,
propertyC: 321,
}
var aceDiffer = new AceDiff({
left:{
id:"editor-left"
},
right:{
id:"editor-right"
}
});

Динамический контент

Если вы запускаете контроль различий динамически (используя jQuery или Angular), то вам, вероятно, нужно (или вы хотите) динамически добавлять контент в редакторы, чтобы добиться этого, используйте getEditors метод aceDiffer экземпляр, чтобы получить экземпляр редактора ACE соответственно и динамически изменить его, используя setValue метод.


var aceDiffer = new AceDiff({
// Add a mode
mode:"ace/mode/javascript",
left:{
id:"editor-left"
},
right:{
id:"editor-right"
}
});
var editors = aceDiffer.getEditors();
var leftString = "var a = {\n propertyA: 12,\n propertyB: 123, \n propertyC: 321, \n}";
var rightString = "var a = {\n propertyA: 12,\n propertyZ: 123, \n propertyC: 321, \n}";
// Set Value to the editors
editors.left.setValue(leftString, 1);
editors.right.setValue(rightString, 1);
// Optional to prevent CTRL-Z and remove original content as the content was dinamically added
editors.left.getSession().setUndoManager(new ace.UndoManager());
editors.right.getSession().setUndoManager(new ace.UndoManager());
Ссылка на основную публикацию
Adblock
detector