2

Basically I have to copy content of a div to a textarea, have the ability to edit it inside the textarea and the changes should be saved inside the initial div.

I need to prevent an attribute which looks like data-bind: "some stuff;" and can be set for the children of the initial wrapper div and the comments from being shown inside the textarea.

Here's what I have so far, sadly without any clue how to exclude text when getting the html. https://jsfiddle.net/2kduy9vp/112/

$('.editor').html($('.main').html());

$('.editor').on('input propertychange', function(){
 $('.main').html($(this).val());
});
.editor {
  width: 100%;
  height: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
  <!-- I'm a comment, don't copy me -->
  <div class="child" data-bind="don't copy me" style="background-color: gray; width: 250px;">
    <span> I'm gray, copy me</span>
  </div>
  <!-- I'm a comment, don't copy me -->
  <div class="child" data-bind="don't copy me" style="background-color: pink; width: 250px;">
    <span> I'm pink, copy me</span>
  </div>
</div>

<textarea class="editor"></textarea>
Dennis Novac
  • 1,003
  • 10
  • 23
  • 1
    your question is unclear. what do you want now? – Alive to die - Anant Dec 16 '17 at 19:54
  • Prevent **data-bind: "..."** and the comments from being shown inside the textarea. – Dennis Novac Dec 16 '17 at 19:55
  • It's relatively easy to exclude them . The problem is how to figure out where to put them with relation to new content when you reverse the operation – charlietfl Dec 16 '17 at 20:09
  • Isn't it possible to "tell" that both .html() and .val() should ignore those certain pieces of information? Sorry I'm not too good at this chapter. – Dennis Novac Dec 16 '17 at 20:12
  • Depends on how complex the editing will be. You can't prevent editing a specific element html inside a textarea without lot of complicated code...it's all text. You can not put them in the textarea ... or generate multiple textareas – charlietfl Dec 16 '17 at 20:14
  • https://jsfiddle.net/2kduy9vp/117/ That's how complicated the code is. – Dennis Novac Dec 16 '17 at 20:19
  • That fiddle doesn't really explain what higher level objective is. If it's only content editing, that's reasonably easy. If it is allowing attribute editing that is complex – charlietfl Dec 16 '17 at 20:23
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/161377/discussion-between-dennis-novac-and-charlietfl). – Dennis Novac Dec 16 '17 at 20:23

2 Answers2

1

Why not simply use a div and make it editable using contenteditable="true" and you may apply any style to show the content like you want :

$('.editor').html($('.main').html());

$('.editor').on('input propertychange', function() {
  $('.main').html($(this).html());
});
.editor {
  margin-top: 20px;
  ;
  width: 100%;
  height: 500px;
  padding: 50px;
}

.editor>div {
  background: #fff!important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
  <!-- I'm a comment, exclude me -->
  <div class="child" data-bind="exclude-me" style="background-color: gray; width: 250px;">
    <span> I'm gray, copy me</span>
  </div>
  <!-- I'm a comment, exclude me -->
  <div class="child" data-bind="exclude-me-too" style="background-color: pink; width: 250px;">
    <span> I'm pink, copy me</span>
  </div>
</div>

<div class="editor" contenteditable="true"></div>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
  • how does this prevent editing the `exclude me` ones? – charlietfl Dec 16 '17 at 20:13
  • Because I need too be able to edit everything, including tag names and their props. – Dennis Novac Dec 16 '17 at 20:17
  • @charlietfl he said `from being shown inside the textarea.` so i understand that he doesn't want to show them, he didn't mention if they want to edit them or not. And as you can test you can only edit the content. and i *supposed* this is what OP want as it's a bit unclear what he want to achieve – Temani Afif Dec 16 '17 at 20:17
  • 1
    @DennisNovac maybe if can be more precise on what you want to achieve, as if you want to exclude them so why they are present ? and what's your purpose behind this ? maybe we can reconsider the whole thing then :) – Temani Afif Dec 16 '17 at 20:20
  • 1
    @TemaniAfif The **"divs" have some editable attributes like color, background-color etc.** which can be changed by using some input fields and buttons (already created, not included in question). However there may be some "advanced users" that may want to edit opacity or stuff like that, that isn't included in the initial set of buttons and inputs, that is used by the majority of users. That's why I need to give them the option to edit the raw HTML as well (with the restrctions I mentioned in the question) – Dennis Novac Dec 16 '17 at 20:38
  • @DennisNovac ok got it, am gonna think about a way to update my answer ;) – Temani Afif Dec 16 '17 at 21:55
0

If I understood you correctly, you just have to apply some filtering to the first jQuery line where you add the .main HTML content to the .editor textarea.

These regexes should do the trick:

$('.editor').html($('.main').html()
   .replace(/<!--[\s\S]*?-->/g, "")
   .replace(/data-bind="[\s\S]*?" /g, ""));

(HTML comment regex took from here: Remove HTML comments with Regex, in Javascript)

ph0enix
  • 763
  • 2
  • 8
  • 23
  • why would you use `regex`? and how do you insert them after? – charlietfl Dec 16 '17 at 20:10
  • I'm not completely sure of OP intent. If the comments and data-bind parameter is something superfluous and he needs to remove them for presentation purpose only, this solution will suffice. If not, my bad. In that case I would probably go with some kind of "memory" for the missing parameters when they need to be restored. – ph0enix Dec 16 '17 at 20:19